ColdBreeze-chat-web/src/common/component/StyledSettingContainer.tsx

import { FC, PropsWithChildren, ReactNode } from "react";
import styled from "styled-components";
import { useLocation, NavLink } from "react-router-dom";
import backIcon from "../../assets/icons/arrow.left.svg?url";
import { Nav } from "../../routes/settingChannel/navs";

const StyledWrapper = styled.div`
  width: 100vw;
  height: 100vh;
  display: flex;

  > .left {
    max-height: 100vh;
    overflow: scroll;
    padding: 32px 16px;
    min-width: 212px;
    background-color: #f5f6f7;

    > .title {
      cursor: pointer;
      font-weight: bold;
      font-size: 16px;
      line-height: 24px;
      color: #1c1c1e;
      margin-bottom: 32px;
      padding-left: 24px;
      background-size: 16px;
      background: url(${backIcon}) no-repeat left;
    }

    > .items {
      display: flex;
      flex-direction: column;
      gap: 2px;
      margin-bottom: 36px;

      &:before {
        padding-left: 12px;
        content: attr(data-title);
        font-weight: bold;
        font-size: 12px;
        line-height: 18px;
        color: #6b7280;
        margin-bottom: 2px;
      }

      .item {
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: #44494f;
        border-radius: 4px;

        &:hover,
        &.curr {
          background: #e7e5e4;
        }

        > a {
          display: block;
          padding: 4px 12px;
        }
      }

      &.danger .item {
        cursor: pointer;
        padding: 4px 12px;
        color: #ef4444;

        &:hover {
          background: none;
        }
      }
    }
  }

  > .right {
    background-color: #fff;
    width: 100%;
    max-height: 100%;
    overflow: auto;
    padding: 32px;

    > .title {
      font-weight: bold;
      font-size: 20px;
      line-height: 30px;
      color: #374151;
      margin-bottom: 32px;
    }
  }
`;

export interface Danger {
  title: string;
  handler: () => void;
}

interface Props {
  closeModal: () => void;
  title?: string;
  navs: Nav[];
  dangers: [Danger | boolean];
  nav: { title: string; name?: string; component?: ReactNode };
}

const StyledSettingContainer: FC<PropsWithChildren<Props>> = ({
  closeModal,
  title = "Settings",
  navs = [],
  dangers = [],
  nav,
  children
}) => {
  const { pathname } = useLocation();
  return (
    <StyledWrapper>
      <div className="left">
        <h2 onClick={closeModal} className="title">
          {title}
        </h2>
        {navs.map(({ title, items }) => {
          return (
            <ul key={title} data-title={title} className="items">
              {items.map(({ name, title }) => {
                return (
                  <li key={name} className={`item ${name == nav?.name ? "curr" : ""}`}>
                    <NavLink to={`${pathname}?nav=${name}`}>{title}</NavLink>
                  </li>
                );
              })}
            </ul>
          );
        })}
        {dangers.length ? (
          <ul className="items danger">
            {dangers.map((d) => {
              if (typeof d === "boolean" || !d) return null;
              const { title, handler } = d;
              return (
                <li key={title} onClick={handler} className="item">
                  {title}
                </li>
              );
            })}
          </ul>
        ) : null}
      </div>
      <div className="right">
        {nav && <h4 className="title">{nav.title}</h4>}
        {children}
      </div>
    </StyledWrapper>
  );
};

export default StyledSettingContainer;