feat: lots updates

2022-02-24 14:50:26 +08:00
parent b1ba2aa523
commit 0394c99292
46 changed files with 1101 additions and 397 deletions
@@ -0,0 +1,130 @@
+// 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>
+  );
+}