322 lines
10 KiB
TypeScript
322 lines
10 KiB
TypeScript
import {
|
|
Home as HomeIcon,
|
|
MessageDots,
|
|
MessageAdd,
|
|
Lock,
|
|
} from "@styled-icons/boxicons-solid";
|
|
import { observer } from "mobx-react-lite";
|
|
import { Link } from "react-router-dom";
|
|
import styled from "styled-components/macro";
|
|
|
|
import styles from "./Home.module.scss";
|
|
import { Text } from "preact-i18n";
|
|
|
|
import { CategoryButton } from "@revoltchat/ui";
|
|
|
|
import { PageHeader } from "../../components/ui/Header";
|
|
import { useClient } from "../../controllers/client/ClientController";
|
|
|
|
const Overlay = styled.div`
|
|
display: grid;
|
|
height: 100%;
|
|
overflow-y: scroll;
|
|
|
|
> * {
|
|
grid-area: 1 / 1;
|
|
}
|
|
|
|
.content {
|
|
z-index: 1;
|
|
}
|
|
|
|
h3 {
|
|
padding-top: 1rem;
|
|
}
|
|
`;
|
|
|
|
const DisabledButtonWrapper = styled.div`
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
`;
|
|
|
|
export default observer(() => {
|
|
const client = useClient();
|
|
|
|
const servers = [
|
|
{
|
|
id: "01J544PT4T3WQBVBSDK3TBFZW7",
|
|
name: "PepChat Official",
|
|
description:
|
|
"Get your questions answered and stay up-to-date with the state of the project.",
|
|
inviteCode: "pepchatdiscover",
|
|
disabled: false,
|
|
},
|
|
{
|
|
id: "01J5ZQMJSQ5AFZJJ3S204JK5Q4",
|
|
name: "Elite Group Buy (EGB)",
|
|
description: "Group buy peptides, amino blends & more.",
|
|
inviteCode: "elitegroupbuydiscover",
|
|
disabled: false,
|
|
},
|
|
{
|
|
id: "01J545CBXQRWZZAASZQ6THKE96",
|
|
name: "Qingdao Sigma Chemical (QSC)",
|
|
description:
|
|
"China wholesale bioactive compounds. (International, US, EU, Canada and Australia domestic)",
|
|
inviteCode: "qscdiscover",
|
|
disabled: false,
|
|
},
|
|
{
|
|
id: "01J63A8HQ8S10MM4B3K85VMYBW",
|
|
name: "Wonderland",
|
|
description: "Peptide life social group.",
|
|
inviteCode: "wonderlanddiscover",
|
|
disabled: false,
|
|
},
|
|
{
|
|
id: "01J5VPXSS0EK69QD69RX6SKZHW",
|
|
name: "Kimmes Korner",
|
|
description: "Peptide group buys.",
|
|
inviteCode: "kimmeskornerdiscover",
|
|
disabled: false,
|
|
},
|
|
{
|
|
id: "01J5Z5QBQWREPZZPMVKJNCBDP2",
|
|
name: "Joyous",
|
|
description: "Peptide group buys.",
|
|
inviteCode: "joyousdiscover",
|
|
disabled: false,
|
|
},
|
|
{
|
|
id: "01J6FNC5667A6RWV1SK4FMP19S",
|
|
name: "Rabbit Hole Research",
|
|
description:
|
|
"A peptide research collective focused on community, education, and facilitating group buys.",
|
|
inviteCode: "rabbitholediscover",
|
|
disabled: false,
|
|
},
|
|
{
|
|
id: "01J6DDFWNT3SFKVQHK8J29RPXE",
|
|
name: "Johnny 5",
|
|
description:
|
|
"Amazing community of helpful people. Focus on weight loss group buys.",
|
|
inviteCode: "johnny5discover",
|
|
disabled: false,
|
|
},
|
|
{
|
|
id: "01J64CC6710N7CCWBBT625VXQ3",
|
|
name: "The Raven Nest",
|
|
description:
|
|
"Group buys, protocols, social, and all things peptides.",
|
|
inviteCode: "ravennestdiscover",
|
|
disabled: false,
|
|
},
|
|
{
|
|
id: "01J72VR94J6722AHF1MD33DB4F",
|
|
name: "New Beginnings Research",
|
|
description:
|
|
"Peptide community focused on education, research, and organized group buys.",
|
|
inviteCode: "newbeginningsdiscover",
|
|
disabled: false,
|
|
},
|
|
{
|
|
id: "01J6ZRS52BA42BJFVT0M4WY0Q6",
|
|
name: "Deb's PepTalk",
|
|
description: "Peptide GB's, education & ramblings.",
|
|
inviteCode: "debspeptalkdiscover",
|
|
disabled: false,
|
|
},
|
|
{
|
|
id: "01J7E2NW9WXSHWJR7B75CDB2AC",
|
|
name: "AOB",
|
|
description: "Handmade organic beauty products",
|
|
inviteCode: "aobdiscover",
|
|
disabled: false,
|
|
},
|
|
{
|
|
id: "01J6DHAK4RH0H6QK35CZ4G3ZSW",
|
|
name: "Cousin Eddie's Corner",
|
|
description: "Peptides with a dose of humour!",
|
|
inviteCode: "cousineddiescornerdiscover",
|
|
disabled: false,
|
|
},
|
|
{
|
|
id: "01J6RS5RR3YKPMW09M7D71BTD2",
|
|
name: "HYB",
|
|
description: "China wholesale direct.",
|
|
inviteCode: "hybdiscover",
|
|
disabled: false,
|
|
},
|
|
{
|
|
id: "01J740MT75NC05F6VB9EJ4Y115",
|
|
name: "Royal Peptides",
|
|
description:
|
|
"USA domestic wholesale vendor with 3rd party tested kits.",
|
|
inviteCode: "royalpeptidesdiscover",
|
|
disabled: false,
|
|
},
|
|
{
|
|
id: "01J78Z1C1XW209S5YSQZMPS0E4",
|
|
name: "The Pep Planner",
|
|
description:
|
|
"Planner to keep track of daily pins, peptide information, orders & more.",
|
|
inviteCode: "thepepplannerdiscover",
|
|
disabled: false,
|
|
},
|
|
{
|
|
id: "01J74BC8PFE9XBDX05J3Y9R9PV",
|
|
name: "Monkey Peps",
|
|
description:
|
|
"A Peptide Community for support, sourcing and group testing.",
|
|
inviteCode: "monkeypepsdiscover",
|
|
disabled: false,
|
|
},
|
|
{
|
|
id: "01J7EGW77XE2GSJGPR87MQXZW4",
|
|
name: "SRY-LAB",
|
|
description:
|
|
"Peptide factory in China. Wholesale, retail and customization.",
|
|
inviteCode: "srylabdiscover",
|
|
disabled: false,
|
|
},
|
|
{
|
|
id: "01J7NZR6KTG9BTRMNPCQQJ1VES",
|
|
name: "Shanghai Nexa Pharma",
|
|
description:
|
|
"Ship from domestic USA 3-5 business days. Custom batch manufacture MOQ 300 vials.",
|
|
inviteCode: "snpdiscover",
|
|
disabled: false,
|
|
},
|
|
{
|
|
id: "01J72F71TZWQFEBNSSFBMSDZK1",
|
|
name: "Angel Shanghai Chem (ASC)",
|
|
description: "Manufacturer of Peptides",
|
|
inviteCode: "ascdiscover",
|
|
disabled: false,
|
|
},
|
|
{
|
|
id: "01J7HYARZBNXEBVT07YVBD33FJ",
|
|
name: "Tianjin Cangtu",
|
|
description:
|
|
"Peptide manufacturers from China. Promotions and group purchases.",
|
|
inviteCode: "tianjincangtudiscover",
|
|
disabled: false,
|
|
},
|
|
{
|
|
id: "01J72C64KX97MP5K6ABDRP62P4",
|
|
name: "The Hood",
|
|
description:
|
|
"Welcome to the neighbour-hood. A magical place full of potions and peps.",
|
|
inviteCode: "thehooddiscover",
|
|
disabled: false,
|
|
},
|
|
{
|
|
id: "01J7RF37VXVMTS55K1C18PQ2HY",
|
|
name: "Peppy Princess",
|
|
description: "Beauty and skin-care experts.",
|
|
inviteCode: "peppyprincessdiscover",
|
|
disabled: false,
|
|
},
|
|
{
|
|
id: "01J71Z3FVMJVCVCD8X4WGVR1SF",
|
|
name: "JoLynn's World",
|
|
description: "Pep talk and group buys.",
|
|
inviteCode: "jolynnsworlddiscover",
|
|
disabled: false,
|
|
},
|
|
{
|
|
id: "01J84NMVTR2NQVHV9FQ1VR6YBN",
|
|
name: "Henan Tirzepa Peptides",
|
|
description:
|
|
"Factory direct wholesale of peptide products, door-to-door delivery.",
|
|
inviteCode: "henantirzepadiscover",
|
|
disabled: false,
|
|
},
|
|
{
|
|
id: "01J8CQBJRR8EYVQFM7ARD1P11P",
|
|
name: "Peptopia",
|
|
description:
|
|
"Discussions about safe use, sourcing, testing, & more. GBs for Tirz, Reta, Sema, Cagri & more.",
|
|
inviteCode: "peptopiadiscover",
|
|
disabled: false,
|
|
},
|
|
{
|
|
id: "01J8GZYC66E5T7PZNYVHD4DC6V",
|
|
name: "Nantong Guangyuan Chemical (GYC)",
|
|
description:
|
|
"High quality peptides with 99% purity from manufacturers.",
|
|
inviteCode: "gycdiscover",
|
|
disabled: false,
|
|
},
|
|
{
|
|
id: "01J9QDPBRHTCBV4DJ15G28393H",
|
|
name: "Uther Pharmaceutical Peptide",
|
|
description: "Chemistry changes the world.",
|
|
inviteCode: "uppdiscover",
|
|
disabled: false,
|
|
},
|
|
{
|
|
id: "01J5TQYA639STTEX7SH5KXC96M",
|
|
name: "Joe Lu's Hideout",
|
|
description: "Peptide group buys.",
|
|
inviteCode: "placeholder",
|
|
disabled: true,
|
|
},
|
|
];
|
|
|
|
const renderServerButton = (server) => {
|
|
const isServerJoined = client.servers.get(server.id);
|
|
const linkTo = isServerJoined
|
|
? `/server/${server.id}`
|
|
: `/invite/${server.inviteCode}`;
|
|
|
|
const buttonContent = (
|
|
<CategoryButton
|
|
key={server.id}
|
|
action={server.disabled ? undefined : "chevron"}
|
|
icon={
|
|
server.disabled ? (
|
|
<Lock size={32} />
|
|
) : isServerJoined ? (
|
|
<MessageDots size={32} />
|
|
) : (
|
|
<MessageAdd size={32} />
|
|
)
|
|
}
|
|
description={server.description}>
|
|
{server.name}
|
|
</CategoryButton>
|
|
);
|
|
|
|
if (server.disabled) {
|
|
return (
|
|
<DisabledButtonWrapper>{buttonContent}</DisabledButtonWrapper>
|
|
);
|
|
} else {
|
|
return (
|
|
<Link to={linkTo} key={server.id}>
|
|
{buttonContent}
|
|
</Link>
|
|
);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={styles.home}>
|
|
<Overlay>
|
|
<div className="content">
|
|
<PageHeader icon={<HomeIcon size={24} />} withTransparency>
|
|
<Text id="app.navigation.tabs.home" />
|
|
</PageHeader>
|
|
<div className={styles.homeScreen}>
|
|
<h3>Welcome to PepChat</h3>
|
|
<div className={styles.actions}>
|
|
{servers.map(renderServerButton)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Overlay>{" "}
|
|
</div>
|
|
);
|
|
});
|