zerosoul
131 lines
3.1 KiB
JavaScript
131 lines
3.1 KiB
JavaScript
// import React from 'react'
|
|
import styled from "styled-components";
|
|
import Modal from "./Modal";
|
|
|
|
const StyledWrapper = styled.div`
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
> .left {
|
|
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: url(https://static.nicegoodthings.com/project/rustchat/icon.arrow.left.svg);
|
|
background-size: 16px;
|
|
background-repeat: no-repeat;
|
|
background-position: 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 {
|
|
cursor: pointer;
|
|
padding: 4px 12px;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
color: #44494f;
|
|
border-radius: 4px;
|
|
&:hover,
|
|
&.curr {
|
|
background: #e7e5e4;
|
|
}
|
|
}
|
|
&.danger .item {
|
|
color: #ef4444;
|
|
&:hover {
|
|
background: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
> .right {
|
|
background-color: #fff;
|
|
width: 100%;
|
|
padding: 32px;
|
|
> .title {
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
line-height: 30px;
|
|
color: #374151;
|
|
margin-bottom: 32px;
|
|
}
|
|
}
|
|
`;
|
|
export default function StyledSettingContainer({
|
|
closeModal,
|
|
title = "Setting",
|
|
navs = [],
|
|
dangers = [],
|
|
nav,
|
|
updateNav,
|
|
children,
|
|
}) {
|
|
const handleNavClick = (name) => {
|
|
updateNav(name);
|
|
};
|
|
return (
|
|
<Modal>
|
|
<StyledWrapper className="animate__animated animate__fadeInUp animate__faster">
|
|
<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}
|
|
onClick={handleNavClick.bind(null, name)}
|
|
className={`item ${name == nav?.name ? "curr" : ""}`}
|
|
>
|
|
{title}
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
);
|
|
})}
|
|
{dangers.length ? (
|
|
<ul className="items danger">
|
|
{dangers.map((d) => {
|
|
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>
|
|
</Modal>
|
|
);
|
|
}
|