feat: blank placeholder
This commit is contained in:
zerosoul
@@ -0,0 +1,4 @@
|
||||
<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 20.5C0 9.45431 8.95431 0.5 20 0.5C31.0457 0.5 40 9.45431 40 20.5C40 31.5457 31.0457 40.5 20 40.5C8.95431 40.5 0 31.5457 0 20.5Z" fill="#BDB4FE"/>
|
||||
<path d="M30 20.5C30 14.9772 25.5228 10.5 20 10.5C14.4772 10.5 10 14.9772 10 20.5C10 22.1428 10.3972 23.7294 11.1449 25.1502L10.0285 29.4386C9.99198 29.5791 9.99199 29.7266 10.0286 29.867C10.1469 30.3213 10.6111 30.5937 11.0654 30.4753L15.3558 29.3583C16.7752 30.1039 18.3596 30.5 20 30.5C25.5228 30.5 30 26.0228 30 20.5ZM20 16.5C21.1046 16.5 22 17.3954 22 18.5V22.5C22 23.6046 21.1046 24.5 20 24.5H17C15.8954 24.5 15 23.6046 15 22.5V18.5C15 17.3954 15.8954 16.5 17 16.5H20ZM23 21.6619V19.3382L24.7344 17.6963C25.2125 17.2437 26 17.5826 26 18.2409V22.7591C26 23.4174 25.2125 23.7563 24.7344 23.3037L23 21.6619Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 888 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 20.5C0 9.45431 8.95431 0.5 20 0.5C31.0457 0.5 40 9.45431 40 20.5C40 31.5457 31.0457 40.5 20 40.5C8.95431 40.5 0 31.5457 0 20.5Z" fill="#FF9C66"/>
|
||||
<path d="M16.2554 17.4999C17.2219 17.4999 18.0054 18.2834 18.0054 19.2499V28.75C18.0054 29.7165 17.2219 30.5 16.2554 30.5H11.751C10.7845 30.5 10.001 29.7165 10.001 28.75V19.2499C10.001 18.2834 10.7845 17.4999 11.751 17.4999H16.2554ZM14.2532 26.9952H13.7532L13.6514 27.002C13.2853 27.0517 13.0032 27.3655 13.0032 27.7452C13.0032 28.1249 13.2853 28.4387 13.6514 28.4883L13.7532 28.4952H14.2532L14.355 28.4883C14.721 28.4387 15.0032 28.1249 15.0032 27.7452C15.0032 27.3655 14.721 27.0517 14.355 27.002L14.2532 26.9952ZM27.7504 10.5C28.9412 10.5 29.916 11.4252 29.9952 12.596L30.0004 12.75V21.75C30.0004 22.9409 29.0752 23.9156 27.9044 23.9948L27.7504 24H24.0044V26H25.2504C25.6646 26 26.0004 26.3358 26.0004 26.75C26.0004 27.1297 25.7182 27.4435 25.3521 27.4932L25.2504 27.5H19.0004V26H22.5044V24H19.0004V19C19.0004 17.6745 17.9688 16.59 16.6647 16.5053L16.5004 16.5H12.0004V12.75C12.0004 11.5591 12.9255 10.5844 14.0963 10.5052L14.2504 10.5H27.7504Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,4 @@
|
||||
<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 20.5C0 9.45431 8.95431 0.5 20 0.5C31.0457 0.5 40 9.45431 40 20.5C40 31.5457 31.0457 40.5 20 40.5C8.95431 40.5 0 31.5457 0 20.5Z" fill="#FDE272"/>
|
||||
<path d="M25.5 20.5C28.5376 20.5 31 22.9624 31 26C31 29.0376 28.5376 31.5 25.5 31.5C22.4624 31.5 20 29.0376 20 26C20 22.9624 22.4624 20.5 25.5 20.5ZM12 21.499L20.8094 21.5002C19.6887 22.6681 19 24.2536 19 26C19 27.0874 19.267 28.1124 19.739 29.013C18.6887 29.363 17.5306 29.5 16.5 29.5C13.7779 29.5 10.1647 28.544 10.0055 25.2296L10 25V23.499C10 22.395 10.896 21.499 12 21.499ZM25.5 22.5016L25.4101 22.5096C25.206 22.5467 25.0451 22.7076 25.0081 22.9117L25 23.0016V25.4996L22.5 25.5L22.4101 25.5081C22.206 25.5451 22.0451 25.706 22.0081 25.9101L22 26L22.0081 26.0899C22.0451 26.294 22.206 26.4549 22.4101 26.4919L22.5 26.5L25 26.4996V29L25.0081 29.0899C25.0451 29.294 25.206 29.4549 25.4101 29.4919L25.5 29.5L25.5899 29.4919C25.794 29.4549 25.9549 29.294 25.9919 29.0899L26 29V26.4996L28.5 26.5L28.5899 26.4919C28.794 26.4549 28.9549 26.294 28.9919 26.0899L29 26L28.9919 25.9101C28.9549 25.706 28.794 25.5451 28.5899 25.5081L28.5 25.5L26 25.4996V23.0016L25.9919 22.9117C25.9549 22.7076 25.794 22.5467 25.5899 22.5096L25.5 22.5016ZM16.5 10.5C18.985 10.5 21 12.515 21 15C21 17.485 18.985 19.5 16.5 19.5C14.015 19.5 12 17.485 12 15C12 12.515 14.015 10.5 16.5 10.5ZM25.5 12.5C27.433 12.5 29 14.067 29 16C29 17.933 27.433 19.5 25.5 19.5C23.567 19.5 22 17.933 22 16C22 14.067 23.567 12.5 25.5 12.5Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,4 @@
|
||||
<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 20.5C0 9.45431 8.95431 0.5 20 0.5C31.0457 0.5 40 9.45431 40 20.5C40 31.5457 31.0457 40.5 20 40.5C8.95431 40.5 0 31.5457 0 20.5Z" fill="#ACDC79"/>
|
||||
<path d="M20 10.5C25.523 10.5 30 14.978 30 20.5C30 26.022 25.523 30.5 20 30.5C14.477 30.5 10 26.022 10 20.5C10 14.978 14.477 10.5 20 10.5ZM20 24C19.4477 24 19 24.4477 19 25C19 25.5523 19.4477 26 20 26C20.5523 26 21 25.5523 21 25C21 24.4477 20.5523 24 20 24ZM20 15.25C18.4812 15.25 17.25 16.4812 17.25 18C17.25 18.4142 17.5858 18.75 18 18.75C18.3797 18.75 18.6935 18.4678 18.7432 18.1018L18.75 18C18.75 17.3096 19.3096 16.75 20 16.75C20.6904 16.75 21.25 17.3096 21.25 18C21.25 18.5388 21.115 18.8053 20.6051 19.3322L20.4697 19.4697C19.5916 20.3478 19.25 20.9171 19.25 22C19.25 22.4142 19.5858 22.75 20 22.75C20.4142 22.75 20.75 22.4142 20.75 22C20.75 21.4612 20.885 21.1947 21.3949 20.6678L21.5303 20.5303C22.4084 19.6522 22.75 19.0829 22.75 18C22.75 16.4812 21.5188 15.25 20 15.25Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -0,0 +1,5 @@
|
||||
<svg width="120" height="116" viewBox="0 0 120 116" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="90.0398" cy="36.9398" r="5.53066" transform="rotate(-36.9067 90.0398 36.9398)" fill="#EAECF0"/>
|
||||
<circle cx="105.836" cy="25.0337" r="10.1764" transform="rotate(-36.9067 105.836 25.0337)" fill="#EAECF0"/>
|
||||
<path d="M81.3393 9.60212C81.9873 9.11548 82.65 8.66237 83.3254 8.24248C84.2382 7.67505 84.25 6.30085 83.2837 5.83047C72.6454 0.652199 60.3296 -1.32614 47.7902 0.909375C16.2812 6.52674 -4.70799 36.6235 0.909375 68.1324C2.01072 74.3101 4.05304 80.0833 6.86249 85.331L1.20284 102.916C0.676969 104.55 2.13172 106.135 3.80448 105.75L20.2484 101.965C32.9879 112.87 50.3349 118.186 68.1324 115.013C97.6843 109.745 117.983 82.9433 115.756 53.6394C115.684 52.6928 114.554 52.2487 113.795 52.8188C101.861 61.7813 84.9213 59.3724 75.9589 47.4384C66.9964 35.5045 69.4053 18.5646 81.3393 9.60212Z" fill="#EAECF0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 926 B |
@@ -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} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -7,11 +7,11 @@ import { AiOutlineCaretDown } from "react-icons/ai";
|
||||
|
||||
import StyledWrapper from "./styled";
|
||||
import AddIcon from "../../assets/icons/add.svg";
|
||||
import BlankPlaceholder from "../../common/component/BlankPlaceholder";
|
||||
import Server from "../../common/component/Server";
|
||||
import Tooltip from "../../common/component/Tooltip";
|
||||
// import Contact from "../../common/component/Contact";
|
||||
import CurrentUser from "../../common/component/CurrentUser";
|
||||
import IconLogo from "../../assets/icons/rustchat.logo.svg";
|
||||
import ChannelChat from "./ChannelChat";
|
||||
import DMChat from "./DMChat";
|
||||
import ChannelList from "./ChannelList";
|
||||
@@ -104,7 +104,7 @@ export default function ChatPage() {
|
||||
<CurrentUser />
|
||||
</div>
|
||||
<div className={`right ${placeholderVisible ? "placeholder" : ""}`}>
|
||||
{placeholderVisible && <IconLogo />}
|
||||
{placeholderVisible && <BlankPlaceholder />}
|
||||
{channel_id && (
|
||||
<ChannelChat cid={channel_id} dropFiles={channelDropFiles} />
|
||||
)}
|
||||
|
||||
@@ -5,9 +5,9 @@ import Search from "../../common/component/Search";
|
||||
import Contact from "../../common/component/Contact";
|
||||
// import CurrentUser from "../../common/component/CurrentUser";
|
||||
import Profile from "../../common/component/Profile";
|
||||
import IconLogo from "../../assets/icons/rustchat.logo.svg";
|
||||
|
||||
import StyledWrapper from "./styled";
|
||||
import BlankPlaceholder from "../../common/component/BlankPlaceholder";
|
||||
|
||||
export default function ContactsPage() {
|
||||
const { user_id } = useParams();
|
||||
@@ -38,7 +38,7 @@ export default function ContactsPage() {
|
||||
</div>
|
||||
) : (
|
||||
<div className="right placeholder">
|
||||
<IconLogo />
|
||||
<BlankPlaceholder type="contact" />
|
||||
</div>
|
||||
)}
|
||||
</StyledWrapper>
|
||||
|
||||
Reference in New Issue
Block a user