feat: blank placeholder

2022-04-29 17:15:03 +08:00
parent 1a483a8888
commit 9639073f31
8 changed files with 145 additions and 4 deletions
@@ -0,0 +1,120 @@
+import { useState } from "react";
+import styled from "styled-components";
+import ChannelModal from "../component/ChannelModal";
+import IconChat from "../../assets/icons/placeholder.chat.svg";
+import IconAsk from "../../assets/icons/placeholder.question.svg";
+import IconInvite from "../../assets/icons/placeholder.invite.svg";
+import IconDownload from "../../assets/icons/placeholder.download.svg";
+import { NavLink } from "react-router-dom";
+import ContactsModal from "./ContactsModal";
+import { useSelector } from "react-redux";
+const Styled = styled.div`
+  margin-top: -50px;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  .head {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    .title {
+      font-weight: 700;
+      font-size: 30px;
+      line-height: 38px;
+      color: #344054;
+    }
+    .desc {
+      text-align: center;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      color: #98a2b3;
+      max-width: 424px;
+    }
+  }
+  .boxes {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: 24px;
+    .box {
+      cursor: pointer;
+      width: 200px;
+      height: 200px;
+      background: #f9fafb;
+      border-radius: 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 16px;
+      .icon {
+        width: 40px;
+        height: 40px;
+      }
+      .txt {
+        padding: 0 21px;
+        text-align: center;
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 20px;
+        color: #475467;
+      }
+    }
+  }
+`;
+export default function BlankPlaceholder({ type = "chat" }) {
+  const server = useSelector((store) => store.server);
+  const [createChannelVisible, setCreateChannelVisible] = useState(false);
+  const [contactListVisible, setContactListVisible] = useState(false);
+  const toggleChannelModalVisible = () => {
+    setCreateChannelVisible((prev) => !prev);
+  };
+  const toggleContactListVisible = () => {
+    setContactListVisible((prev) => !prev);
+  };
+  const chatTip =
+    type == "chat"
+      ? "Create a Channel to Start a Conversation"
+      : "Send a Direct Message";
+  const chatHanlder =
+    type == "chat" ? toggleChannelModalVisible : toggleContactListVisible;
+  return (
+    <>
+      <Styled>
+        <div className="head">
+          <h2 className="title">Welcome to {server.name} server</h2>
+          <p className="desc">
+            Here are some steps to help you get started. For more, check out our
+            Getting Started guide
+          </p>
+        </div>
+        <div className="boxes">
+          <NavLink className="box" to={"#"}>
+            <IconInvite className="icon" />
+            <div className="txt">Invite your friends or teammates</div>
+          </NavLink>
+          <div className="box" onClick={chatHanlder}>
+            <IconChat className="icon" />
+            <div className="txt">{chatTip}</div>
+          </div>
+          <a className="box" href="#">
+            <IconDownload className="icon" />
+            <div className="txt">Download PC and Mobile apps</div>
+          </a>
+          <NavLink to={"#"} className="box">
+            <IconAsk className="icon" />
+            <div className="txt">Got quesions? Visit our help center </div>
+          </NavLink>
+        </div>
+      </Styled>
+      {createChannelVisible && (
+        <ChannelModal personal={true} closeModal={toggleChannelModalVisible} />
+      )}
+      {contactListVisible && (
+        <ContactsModal closeModal={toggleContactListVisible} />
+      )}
+    </>
+  );
+}