night0721/nyx-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

formatted code

Browse source
This commit is contained in:
night0721 2021-11-17 05:52:23 +08:00
parent bf180cc46a
commit bbab44277b
18 changed files with 784 additions and 5601 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored
View file

@ -2,6 +2,8 @@
# dependencies # dependencies
/node_modules /node_modules
package-lock.json
yarn.lock
/.pnp /.pnp
.pnp.js .pnp.js

14
chakra_config/theme.js
View file

@ -1,9 +1,7 @@
import { extendTheme, ThemeConfig } from "@chakra-ui/react" import { extendTheme, ThemeConfig } from "@chakra-ui/react";
// 2. Add your color mode config
const config = { const config = {
initialColorMode: "dark", initialColorMode: "dark",
useSystemColorMode: false, useSystemColorMode: false,
} };
// 3. extend the theme const theme = extendTheme({ config });
const theme = extendTheme({ config }) export default theme;
export default theme

76
components/AuthButton.js
View file

@ -1,39 +1,47 @@
import { signIn, signOut, useSession } from 'next-auth/client' import { signIn, signOut, useSession } from "next-auth/client";
import {Button} from '@chakra-ui/react' import { Button } from "@chakra-ui/react";
export default function Page() { export default function Page() {
const [session, loading] = useSession() const [session, loading] = useSession();
return <> return (
{!session && <> <>
<Button {!session && (
display={{ base: 'none', md: 'inline-flex' }} <>
fontSize={'sm'} <Button
fontWeight={600} display={{ base: "none", md: "inline-flex" }}
color={'white'} fontSize={"sm"}
bg={'teal.400'} fontWeight={600}
href={'#'} color={"white"}
_hover={{ bg={"teal.400"}
bg: 'teal.300', href={"#"}
}} _hover={{
onClick={()=>signIn()}> bg: "teal.300",
Sign In }}
</Button> onClick={() => signIn()}
</>} >
{session && <> Sign In
<Button </Button>
display={{ base: 'none', md: 'inline-flex' }} </>
fontSize={'sm'} )}
fontWeight={600} {session && (
color={'white'} <>
bg={'teal.400'} <Button
href={'#'} display={{ base: "none", md: "inline-flex" }}
_hover={{ fontSize={"sm"}
bg: 'teal.300', fontWeight={600}
}} color={"white"}
onClick={() => signOut()}> bg={"teal.400"}
Sign Out href={"#"}
</Button> _hover={{
</>} bg: "teal.300",
}}
onClick={() => signOut()}
>
Sign Out
</Button>
</>
)}
</> </>
);
} }

49
components/CTA.js
View file

@ -1,24 +1,31 @@
import { Box, Button, Heading, Text } from '@chakra-ui/react' import { Box, Button, Heading, Text } from "@chakra-ui/react";
import * as React from 'react' import * as React from "react";
export const CTA = () => ( export const CTA = () => (
<Box as="section"> <Box as="section">
<Box <Box
maxW="2xl" maxW="2xl"
mx="auto" mx="auto"
px={{ base: '6', lg: '8' }} px={{ base: "6", lg: "8" }}
py={{ base: '16', sm: '20' }} py={{ base: "16", sm: "20" }}
textAlign="center" textAlign="center"
> >
<Heading as="h2" size="3xl" fontWeight="extrabold" letterSpacing="tight"> <Heading as="h2" size="3xl" fontWeight="extrabold" letterSpacing="tight">
Convinced? Convinced?
</Heading> </Heading>
<Text mt="4" fontSize="lg"> <Text mt="4" fontSize="lg">
Start using Cath.exe in your servers now Start using Cath.exe in your servers now
</Text> </Text>
<Button mt="8" as="a" href="#" size="lg" colorScheme="teal" fontWeight="bold"> <Button
Start For Free mt="8"
</Button> as="a"
</Box> href="#"
size="lg"
colorScheme="teal"
fontWeight="bold"
>
Start For Free
</Button>
</Box> </Box>
) </Box>
);

58
components/Card.js
View file

@ -1,28 +1,40 @@
import React from 'react' import React from "react";
import Link from 'next/link' import Link from "next/link";
import {Text, Flex, Button} from '@chakra-ui/react' import { Text, Flex, Button } from "@chakra-ui/react";
import {motion} from 'framer-motion' import { motion } from "framer-motion";
const MotionFlex = motion(Flex) const MotionFlex = motion(Flex);
const item = { const item = {
hidden: { y: 20, opacity: 0 }, hidden: { y: 20, opacity: 0 },
visible: { visible: {
y: 0, y: 0,
opacity: 1 opacity: 1,
} },
};
function Card({ title, desc, link }) {
return (
<Link href={link}>
<MotionFlex
direction="column"
background="gray.900"
width={300}
height={150}
p="5"
borderRadius="15px"
variants={item}
>
<Text fontSize="2xl">{title}</Text>
<Text fontSize="lg" style={{ marginBottom: "10px" }}>
{desc}
</Text>
<Button colorScheme="teal" variant="outline">
Learn More
</Button>
</MotionFlex>
</Link>
);
} }
function Card({title, desc, link}) { export default Card;
return (
<Link href={link}>
<MotionFlex direction='column' background='gray.900' width={300} height={150} p='5' borderRadius='15px' variants={item}>
<Text fontSize='2xl'>{title}</Text>
<Text fontSize='lg' style={{ marginBottom: '10px' }}>{desc}</Text>
<Button colorScheme='teal' variant='outline'>Learn More</Button>
</MotionFlex>
</Link>
)
}
export default Card

341
components/Sidebar/Sidebar.js
View file

@ -1,187 +1,180 @@
import { import {
Avatar, Avatar,
Box, Box,
Collapse, Collapse,
Drawer, Drawer,
DrawerContent, DrawerContent,
DrawerOverlay, DrawerOverlay,
Flex, Flex,
Icon, Icon,
IconButton, IconButton,
Input, Input,
InputGroup, InputGroup,
InputLeftElement, InputLeftElement,
Text, Text,
useColorModeValue, useColorModeValue,
useDisclosure, useDisclosure,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { FaBell } from "react-icons/fa"; import { FaBell } from "react-icons/fa";
import { AiFillGift } from "react-icons/ai"; import { AiFillGift } from "react-icons/ai";
import { FiMenu, FiSearch } from "react-icons/fi"; import { FiMenu, FiSearch } from "react-icons/fi";
import { HiCode } from "react-icons/hi"; import { HiCode } from "react-icons/hi";
import { MdKeyboardArrowRight, MdHome } from "react-icons/md"; import { MdKeyboardArrowRight, MdHome } from "react-icons/md";
import AuthButton from '../AuthButton' import AuthButton from "../AuthButton";
import Link from 'next/link' import Link from "next/link";
import React from "react"; import React from "react";
import {session} from 'next-auth/client' import { session } from "next-auth/client";
export default function Sidebar({children}) { export default function Sidebar({ children }) {
const sidebar = useDisclosure(); const sidebar = useDisclosure();
const integrations = useDisclosure(); const integrations = useDisclosure();
const NavItem = (props) => { const NavItem = props => {
const { icon, children, ...rest } = props; const { icon, children, ...rest } = props;
return (
<Flex
align="center"
px="4"
pl="4"
py="3"
cursor="pointer"
color={useColorModeValue("inherit", "gray.400")}
_hover={{
bg: useColorModeValue("gray.100", "gray.900"),
color: useColorModeValue("gray.900", "gray.200"),
}}
role="group"
fontWeight="semibold"
transition=".15s ease"
{...rest}
>
{icon && (
<Icon
mr="2"
boxSize="4"
_groupHover={{
color: 'gray.600',
}}
as={icon}
/>
)}
{children}
</Flex>
);
};
const SidebarContent = (props) => (
<Box
as="nav"
pos="fixed"
top="0"
left="0"
zIndex="sticky"
h="full"
pb="10"
overflowX="hidden"
overflowY="auto"
bg={useColorModeValue("white", "gray.800")}
borderColor={useColorModeValue("inherit", "gray.700")}
borderRightWidth="1px"
w="60"
{...props}
>
<Link href='/'>
<Flex px="4" py="5" align="center">
<Text
fontSize="2xl"
ml="2"
color={useColorModeValue("brand.500", "white")}
fontWeight="semibold"
>
Cath.exe
</Text>
</Flex>
</Link>
<Flex
direction="column"
as="nav"
fontSize="sm"
color="gray.600"
aria-label="Main Navigation"
>
<Link href='/'>
<NavItem icon={MdHome}>Home</NavItem>
</Link>
<NavItem icon={HiCode} onClick={integrations.onToggle}>
Control Panel
<Icon
as={MdKeyboardArrowRight}
ml="auto"
transform={integrations.isOpen && "rotate(90deg)"}
/>
</NavItem>
<Collapse in={integrations.isOpen}>
<Link href='/controlpanel'>
<NavItem pl="12" py="2">
Main
</NavItem>
</Link>
<Link href='controlpanel/commands'>
<NavItem pl="12" py="2">
Commands
</NavItem>
</Link>
</Collapse>
<NavItem icon={AiFillGift}>Coming Soon</NavItem>
<AuthButton/>
</Flex>
</Box>
);
return ( return (
<Box <Flex
as="section" align="center"
bg={useColorModeValue("gray.50", "gray.700")} px="4"
minH="100vh" pl="4"
> py="3"
<SidebarContent display={{ base: "none", md: "unset" }} /> cursor="pointer"
<Drawer color={useColorModeValue("inherit", "gray.400")}
isOpen={sidebar.isOpen} _hover={{
onClose={sidebar.onClose} bg: useColorModeValue("gray.100", "gray.900"),
placement="left" color: useColorModeValue("gray.900", "gray.200"),
> }}
<DrawerOverlay /> role="group"
<DrawerContent> fontWeight="semibold"
<SidebarContent w="full" borderRight="none" /> transition=".15s ease"
</DrawerContent> {...rest}
</Drawer> >
<Box ml={{ base: 0, md: 60 }} transition=".3s ease"> {icon && (
<Flex <Icon
as="header" mr="2"
align="center" boxSize="4"
justify="space-between" _groupHover={{
w="full" color: "gray.600",
px="4" }}
bg={useColorModeValue("white", "gray.800")} as={icon}
borderBottomWidth="1px" />
borderColor={useColorModeValue("inherit", "gray.700")} )}
h="14" {children}
> </Flex>
<IconButton
aria-label="Menu"
display={{ base: "inline-flex", md: "none" }}
onClick={sidebar.onOpen}
icon={<FiMenu />}
size="sm"
/>
<Flex w="96">
</Flex>
<Flex align="center">
<Icon color="gray.500" as={FaBell} cursor="pointer" />
<Avatar
ml="4"
size="sm"
name="anubra266"
src=''
cursor="pointer"
/>
</Flex>
</Flex>
<Box as="main" p="4" background={'#1a202c'}>
{children}
</Box>
</Box>
</Box>
); );
};
const SidebarContent = props => (
<Box
as="nav"
pos="fixed"
top="0"
left="0"
zIndex="sticky"
h="full"
pb="10"
overflowX="hidden"
overflowY="auto"
bg={useColorModeValue("white", "gray.800")}
borderColor={useColorModeValue("inherit", "gray.700")}
borderRightWidth="1px"
w="60"
{...props}
>
<Link href="/">
<Flex px="4" py="5" align="center">
<Text
fontSize="2xl"
ml="2"
color={useColorModeValue("brand.500", "white")}
fontWeight="semibold"
>
Cath.exe
</Text>
</Flex>
</Link>
<Flex
direction="column"
as="nav"
fontSize="sm"
color="gray.600"
aria-label="Main Navigation"
>
<Link href="/">
<NavItem icon={MdHome}>Home</NavItem>
</Link>
<NavItem icon={HiCode} onClick={integrations.onToggle}>
Control Panel
<Icon
as={MdKeyboardArrowRight}
ml="auto"
transform={integrations.isOpen && "rotate(90deg)"}
/>
</NavItem>
<Collapse in={integrations.isOpen}>
<Link href="/controlpanel">
<NavItem pl="12" py="2">
Main
</NavItem>
</Link>
<Link href="controlpanel/commands">
<NavItem pl="12" py="2">
Commands
</NavItem>
</Link>
</Collapse>
<NavItem icon={AiFillGift}>Coming Soon</NavItem>
<AuthButton />
</Flex>
</Box>
);
return (
<Box
as="section"
bg={useColorModeValue("gray.50", "gray.700")}
minH="100vh"
>
<SidebarContent display={{ base: "none", md: "unset" }} />
<Drawer
isOpen={sidebar.isOpen}
onClose={sidebar.onClose}
placement="left"
>
<DrawerOverlay />
<DrawerContent>
<SidebarContent w="full" borderRight="none" />
</DrawerContent>
</Drawer>
<Box ml={{ base: 0, md: 60 }} transition=".3s ease">
<Flex
as="header"
align="center"
justify="space-between"
w="full"
px="4"
bg={useColorModeValue("white", "gray.800")}
borderBottomWidth="1px"
borderColor={useColorModeValue("inherit", "gray.700")}
h="14"
>
<IconButton
aria-label="Menu"
display={{ base: "inline-flex", md: "none" }}
onClick={sidebar.onOpen}
icon={<FiMenu />}
size="sm"
/>
<Flex w="96"></Flex>
<Flex align="center">
<Icon color="gray.500" as={FaBell} cursor="pointer" />
<Avatar ml="4" size="sm" name="anubra266" src="" cursor="pointer" />
</Flex>
</Flex>
<Box as="main" p="4" background={"#1a202c"}>
{children}
</Box>
</Box>
</Box>
);
} }

117
components/StatCard.js
View file

@ -1,60 +1,81 @@
import { import {
Stat, Stat,
StatLabel, StatLabel,
StatNumber, StatNumber,
StatHelpText, StatHelpText,
StatArrow, StatArrow,
StatGroup, StatGroup,
} from "@chakra-ui/react" } from "@chakra-ui/react";
import React from 'react' import React from "react";
import { motion } from 'framer-motion' import { motion } from "framer-motion";
const container = { const container = {
hidden: { opacity: 1, scale: 0 }, hidden: { opacity: 1, scale: 0 },
visible: { visible: {
opacity: 1, opacity: 1,
scale: 1, scale: 1,
transition: { transition: {
delayChildren: 0.4, delayChildren: 0.4,
staggerChildren: 0.3 staggerChildren: 0.3,
} },
} },
} };
const item = { const item = {
hidden: { y: 20, opacity: 0 }, hidden: { y: 20, opacity: 0 },
visible: { visible: {
y: 0, y: 0,
opacity: 1 opacity: 1,
} },
} };
const MotionStatGroup = motion(StatGroup) const MotionStatGroup = motion(StatGroup);
const MotionStat = motion(Stat) const MotionStat = motion(Stat);
function StatCard() { function StatCard() {
return ( return (
<MotionStatGroup display='flex' flexDirection='column' style={{ gap: '10px' }} variants={container}> <MotionStatGroup
<MotionStat background='gray.900' width={300} height={150} p='5' borderRadius='15px' flexShrink={1} variants={item}> display="flex"
<StatLabel>User Growth</StatLabel> flexDirection="column"
<StatNumber>77</StatNumber> style={{ gap: "10px" }}
<StatHelpText> variants={container}
<StatArrow type="increase" /> >
11.36% <MotionStat
</StatHelpText> background="gray.900"
</MotionStat> width={300}
height={150}
p="5"
borderRadius="15px"
flexShrink={1}
variants={item}
>
<StatLabel>User Growth</StatLabel>
<StatNumber>77</StatNumber>
<StatHelpText>
<StatArrow type="increase" />
11.36%
</StatHelpText>
</MotionStat>
<MotionStat background='gray.900' width={300} height={150} p='5' borderRadius='15px' flexShrink={1} variants={item}> <MotionStat
<StatLabel>Activity</StatLabel> background="gray.900"
<StatNumber>45 messages</StatNumber> width={300}
<StatHelpText> height={150}
<StatArrow type="decrease"/> p="5"
9.05% borderRadius="15px"
</StatHelpText> flexShrink={1}
</MotionStat> variants={item}
</MotionStatGroup> >
) <StatLabel>Activity</StatLabel>
<StatNumber>45 messages</StatNumber>
<StatHelpText>
<StatArrow type="decrease" />
9.05%
</StatHelpText>
</MotionStat>
</MotionStatGroup>
);
} }
export default StatCard export default StatCard;

310
components/Testimonials/Testimonials.js
View file

@ -1,169 +1,167 @@
import { import {
Avatar, Avatar,
Box, Box,
chakra, chakra,
Container, Container,
Flex, Flex,
Icon, Icon,
SimpleGrid, SimpleGrid,
useColorModeValue, useColorModeValue,
} from '@chakra-ui/react'; } from "@chakra-ui/react";
const testimonials = [ const testimonials = [
{ {
name: 'John Doe', name: "John Doe",
role: 'Chief Marketing Officer', role: "Chief Marketing Officer",
content: content: "Remarkable",
'Remarkable', avatar:
avatar: "https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80",
'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80', },
}, {
{ name: "John Doe",
name: 'John Doe', role: "Chief Marketing Officer",
role: 'Chief Marketing Officer', content: "Remarkable",
content: avatar:
'Remarkable', "https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80",
avatar: },
'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80', {
}, name: "John Doe",
{ role: "Chief Marketing Officer",
name: 'John Doe', content: "Remarkable",
role: 'Chief Marketing Officer', avatar:
content: "https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80",
'Remarkable', },
avatar: {
'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80', name: "John Doe",
}, role: "Chief Marketing Officer",
{ content: "Remarkable",
name: 'John Doe', avatar:
role: 'Chief Marketing Officer', "https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80",
content: },
'Remarkable',
avatar:
'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80',
},
]; ];
const backgrounds = [ const backgrounds = [
`url("data:image/svg+xml, %3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'560\' height=\'185\' viewBox=\'0 0 560 185\' fill=\'none\'%3E%3Cellipse cx=\'102.633\' cy=\'61.0737\' rx=\'102.633\' ry=\'61.0737\' fill=\'%23ED64A6\' /%3E%3Cellipse cx=\'399.573\' cy=\'123.926\' rx=\'102.633\' ry=\'61.0737\' fill=\'%23F56565\' /%3E%3Cellipse cx=\'366.192\' cy=\'73.2292\' rx=\'193.808\' ry=\'73.2292\' fill=\'%2338B2AC\' /%3E%3Cellipse cx=\'222.705\' cy=\'110.585\' rx=\'193.808\' ry=\'73.2292\' fill=\'%23ED8936\' /%3E%3C/svg%3E")`, `url("data:image/svg+xml, %3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'560\' height=\'185\' viewBox=\'0 0 560 185\' fill=\'none\'%3E%3Cellipse cx=\'102.633\' cy=\'61.0737\' rx=\'102.633\' ry=\'61.0737\' fill=\'%23ED64A6\' /%3E%3Cellipse cx=\'399.573\' cy=\'123.926\' rx=\'102.633\' ry=\'61.0737\' fill=\'%23F56565\' /%3E%3Cellipse cx=\'366.192\' cy=\'73.2292\' rx=\'193.808\' ry=\'73.2292\' fill=\'%2338B2AC\' /%3E%3Cellipse cx=\'222.705\' cy=\'110.585\' rx=\'193.808\' ry=\'73.2292\' fill=\'%23ED8936\' /%3E%3C/svg%3E")`,
`url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='185' viewBox='0 0 560 185' fill='none'%3E%3Cellipse cx='457.367' cy='123.926' rx='102.633' ry='61.0737' transform='rotate(-180 457.367 123.926)' fill='%23ED8936'/%3E%3Cellipse cx='160.427' cy='61.0737' rx='102.633' ry='61.0737' transform='rotate(-180 160.427 61.0737)' fill='%2348BB78'/%3E%3Cellipse cx='193.808' cy='111.771' rx='193.808' ry='73.2292' transform='rotate(-180 193.808 111.771)' fill='%230BC5EA'/%3E%3Cellipse cx='337.295' cy='74.415' rx='193.808' ry='73.2292' transform='rotate(-180 337.295 74.415)' fill='%23ED64A6'/%3E%3C/svg%3E")`, `url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='185' viewBox='0 0 560 185' fill='none'%3E%3Cellipse cx='457.367' cy='123.926' rx='102.633' ry='61.0737' transform='rotate(-180 457.367 123.926)' fill='%23ED8936'/%3E%3Cellipse cx='160.427' cy='61.0737' rx='102.633' ry='61.0737' transform='rotate(-180 160.427 61.0737)' fill='%2348BB78'/%3E%3Cellipse cx='193.808' cy='111.771' rx='193.808' ry='73.2292' transform='rotate(-180 193.808 111.771)' fill='%230BC5EA'/%3E%3Cellipse cx='337.295' cy='74.415' rx='193.808' ry='73.2292' transform='rotate(-180 337.295 74.415)' fill='%23ED64A6'/%3E%3C/svg%3E")`,
`url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='185' viewBox='0 0 560 185' fill='none'%3E%3Cellipse cx='102.633' cy='61.0737' rx='102.633' ry='61.0737' fill='%23ED8936'/%3E%3Cellipse cx='399.573' cy='123.926' rx='102.633' ry='61.0737' fill='%2348BB78'/%3E%3Cellipse cx='366.192' cy='73.2292' rx='193.808' ry='73.2292' fill='%230BC5EA'/%3E%3Cellipse cx='222.705' cy='110.585' rx='193.808' ry='73.2292' fill='%23ED64A6'/%3E%3C/svg%3E")`, `url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='185' viewBox='0 0 560 185' fill='none'%3E%3Cellipse cx='102.633' cy='61.0737' rx='102.633' ry='61.0737' fill='%23ED8936'/%3E%3Cellipse cx='399.573' cy='123.926' rx='102.633' ry='61.0737' fill='%2348BB78'/%3E%3Cellipse cx='366.192' cy='73.2292' rx='193.808' ry='73.2292' fill='%230BC5EA'/%3E%3Cellipse cx='222.705' cy='110.585' rx='193.808' ry='73.2292' fill='%23ED64A6'/%3E%3C/svg%3E")`,
`url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='185' viewBox='0 0 560 185' fill='none'%3E%3Cellipse cx='457.367' cy='123.926' rx='102.633' ry='61.0737' transform='rotate(-180 457.367 123.926)' fill='%23ECC94B'/%3E%3Cellipse cx='160.427' cy='61.0737' rx='102.633' ry='61.0737' transform='rotate(-180 160.427 61.0737)' fill='%239F7AEA'/%3E%3Cellipse cx='193.808' cy='111.771' rx='193.808' ry='73.2292' transform='rotate(-180 193.808 111.771)' fill='%234299E1'/%3E%3Cellipse cx='337.295' cy='74.415' rx='193.808' ry='73.2292' transform='rotate(-180 337.295 74.415)' fill='%2348BB78'/%3E%3C/svg%3E")`, `url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='185' viewBox='0 0 560 185' fill='none'%3E%3Cellipse cx='457.367' cy='123.926' rx='102.633' ry='61.0737' transform='rotate(-180 457.367 123.926)' fill='%23ECC94B'/%3E%3Cellipse cx='160.427' cy='61.0737' rx='102.633' ry='61.0737' transform='rotate(-180 160.427 61.0737)' fill='%239F7AEA'/%3E%3Cellipse cx='193.808' cy='111.771' rx='193.808' ry='73.2292' transform='rotate(-180 193.808 111.771)' fill='%234299E1'/%3E%3Cellipse cx='337.295' cy='74.415' rx='193.808' ry='73.2292' transform='rotate(-180 337.295 74.415)' fill='%2348BB78'/%3E%3C/svg%3E")`,
]; ];
function TestmonialCard(props) { function TestmonialCard(props) {
const { name, role, content, avatar, index } = props; const { name, role, content, avatar, index } = props;
return ( return (
<Flex <Flex
_hover={{ backgroundColor: 'gray.700' }} _hover={{ backgroundColor: "gray.700" }}
boxShadow={'lg'} boxShadow={"lg"}
maxW={'640px'} maxW={"640px"}
direction={{ base: 'column-reverse', md: 'row' }} direction={{ base: "column-reverse", md: "row" }}
width={'full'} width={"full"}
rounded={'xl'} rounded={"xl"}
p={10} p={10}
justifyContent={'space-between'} justifyContent={"space-between"}
position={'relative'} position={"relative"}
bg={'gray.900'} bg={"gray.900"}
_after={{ _after={{
content: '""', content: '""',
position: 'absolute', position: "absolute",
height: '21px', height: "21px",
width: '29px', width: "29px",
left: '35px', left: "35px",
top: '-10px', top: "-10px",
backgroundSize: 'cover', backgroundSize: "cover",
}} }}
_before={{ _before={{
content: '""', content: '""',
position: 'absolute', position: "absolute",
zIndex: '-1', zIndex: "-1",
height: 'full', height: "full",
maxW: '640px', maxW: "640px",
width: 'full', width: "full",
filter: 'blur(40px)', filter: "blur(40px)",
transform: 'scale(0.98)', transform: "scale(0.98)",
backgroundRepeat: 'no-repeat', backgroundRepeat: "no-repeat",
backgroundSize: 'cover', backgroundSize: "cover",
top: 0, top: 0,
left: 0, left: 0,
backgroundImage: backgrounds[index % 4], backgroundImage: backgrounds[index % 4],
}}> }}
<Flex >
direction={'column'} <Flex
textAlign={'left'} direction={"column"}
justifyContent={'space-between'}> textAlign={"left"}
<chakra.p justifyContent={"space-between"}
fontWeight={'medium'} >
fontSize={'15px'} <chakra.p fontWeight={"medium"} fontSize={"15px"} pb={4}>
pb={4}> {content}
{content} </chakra.p>
</chakra.p> <chakra.p fontWeight={"bold"} fontSize={14}>
<chakra.p fontWeight={'bold'} fontSize={14}> {name}
{name} <chakra.span fontWeight={"medium"} color={"gray.500"}>
<chakra.span {" "}
fontWeight={'medium'} - {role}
color={'gray.500'}> </chakra.span>
{' '} </chakra.p>
- {role} </Flex>
</chakra.span> <Avatar
</chakra.p> src={avatar}
</Flex> height={"80px"}
<Avatar width={"80px"}
src={avatar} alignSelf={"center"}
height={'80px'} m={{ base: "0 0 35px 0", md: "0 0 0 50px" }}
width={'80px'} />
alignSelf={'center'} </Flex>
m={{ base: '0 0 35px 0', md: '0 0 0 50px' }} );
/>
</Flex>
);
} }
export default function GridBlurredBackdrop() { export default function GridBlurredBackdrop() {
return ( return (
<Flex <Flex
textAlign={'center'} textAlign={"center"}
pt={10} pt={10}
justifyContent={'center'} justifyContent={"center"}
direction={'column'} direction={"column"}
width={'full'}> width={"full"}
<Box width={{ base: 'full', sm: 'lg', lg: 'xl' }} margin={'auto'}> >
<chakra.h3 <Box width={{ base: "full", sm: "lg", lg: "xl" }} margin={"auto"}>
fontWeight={'bold'} <chakra.h3
fontSize={20} fontWeight={"bold"}
textTransform={'uppercase'} fontSize={20}
color={'purple.400'}> textTransform={"uppercase"}
Users love Cath color={"purple.400"}
</chakra.h3> >
<chakra.h1 Users love Cath
py={5} </chakra.h3>
fontSize={48} <chakra.h1
fontWeight={'bold'} py={5}
color={useColorModeValue('gray.700', 'gray.50')}> fontSize={48}
You're in good company fontWeight={"bold"}
</chakra.h1> color={useColorModeValue("gray.700", "gray.50")}
<chakra.h2 >
margin={'auto'} You're in good company
width={'70%'} </chakra.h1>
fontWeight={'medium'} <chakra.h2
color={useColorModeValue('gray.500', 'gray.400')}> margin={"auto"}
See why over{' '} width={"70%"}
<chakra.strong color={useColorModeValue('gray.700', 'gray.50')}> fontWeight={"medium"}
110000+ color={useColorModeValue("gray.500", "gray.400")}
</chakra.strong>{' '} >
users use Cath in their servers See why over{" "}
</chakra.h2> <chakra.strong color={useColorModeValue("gray.700", "gray.50")}>
</Box> 110000+
<SimpleGrid </chakra.strong>{" "}
columns={{ base: 1, xl: 2 }} users use Cath in their servers
spacing={'20'} </chakra.h2>
mt={16} </Box>
mx={'auto'}> <SimpleGrid
{testimonials.map((cardInfo, index) => ( columns={{ base: 1, xl: 2 }}
<TestmonialCard {...cardInfo} key={index} /> spacing={"20"}
))} mt={16}
</SimpleGrid> mx={"auto"}
</Flex> >
); {testimonials.map((cardInfo, index) => (
<TestmonialCard {...cardInfo} key={index} />
))}
</SimpleGrid>
</Flex>
);
} }

2
next.config.js
View file

@ -1,3 +1,3 @@
module.exports = { module.exports = {
reactStrictMode: true, reactStrictMode: true,
} };

13
package.json
View file

@ -1,7 +1,6 @@
{ {
"name": "cath-dashboard", "name": "cath-dashboard",
"version": "0.1.0", "version": "0.1.0",
"private": true,
"scripts": { "scripts": {
"dev": "next dev", "dev": "next dev",
"build": "next build", "build": "next build",
@ -15,17 +14,17 @@
"@emotion/styled": "^11", "@emotion/styled": "^11",
"@material-ui/core": "^4.11.4", "@material-ui/core": "^4.11.4",
"@material-ui/icons": "^4.11.2", "@material-ui/icons": "^4.11.2",
"axios": "^0.21.1", "axios": "^0.24.0",
"framer-motion": "^4", "framer-motion": "^4",
"mongodb": "^3.6.9", "mongodb": "^4.1.4",
"next": "11.0.0", "next": "^12.0.4",
"next-auth": "^3.27.0", "next-auth": "^3.27.0",
"react": "17.0.2", "react": "^17.0.2",
"react-dom": "17.0.2", "react-dom": "^17.0.2",
"react-icons": "^4.2.0" "react-icons": "^4.2.0"
}, },
"devDependencies": { "devDependencies": {
"eslint": "7.29.0", "eslint": "^8.2.0",
"eslint-config-next": "11.0.0" "eslint-config-next": "11.0.0"
} }
} }

14
pages/404.js
View file

@ -1,12 +1,12 @@
import Head from 'next/head' import Head from "next/head";
export default function Custom404() { export default function Custom404() {
return ( return (
<> <>
<Head> <Head>
<title>404</title> <title>404</title>
</Head> </Head>
<h1>404 - Page Not Found</h1> <h1>404 - Page Not Found</h1>
</> </>
) );
} }

49
pages/_app.js
View file

@ -1,15 +1,14 @@
import '../styles/globals.css' import "../styles/globals.css";
import Head from 'next/head' import Head from "next/head";
import { Provider, useSession } from 'next-auth/client' import { Provider, useSession } from "next-auth/client";
import { ChakraProvider } from "@chakra-ui/react" import { ChakraProvider } from "@chakra-ui/react";
import Header from '../components/Nav/Header' import Header from "../components/Nav/Header";
import theme from '../chakra_config/theme' import theme from "../chakra_config/theme";
import { ColorModeScript } from "@chakra-ui/react" import { ColorModeScript } from "@chakra-ui/react";
import Sidebar from '../components/Sidebar/Sidebar' import Sidebar from "../components/Sidebar/Sidebar";
function MyApp({ Component, pageProps }) { function MyApp({ Component, pageProps }) {
const [session, loading] = useSession();
const [session, loading] = useSession()
return ( return (
<Provider> <Provider>
@ -19,20 +18,24 @@ function MyApp({ Component, pageProps }) {
<link rel="icon" href="/logo.png" type="image/png" /> <link rel="icon" href="/logo.png" type="image/png" />
</Head> </Head>
<ColorModeScript initialColorMode={theme.config.initialColorMode} /> <ColorModeScript initialColorMode={theme.config.initialColorMode} />
{!session && <Sidebar> {!session && (
<div className='page-container'> <Sidebar>
<Component {...pageProps} /> <div className="page-container">
</div> <Component {...pageProps} />
</Sidebar>} </div>
{session && <> </Sidebar>
<Header/> )}
<div className='page-container'> {session && (
<Component {...pageProps} /> <>
</div> <Header />
</>} <div className="page-container">
<Component {...pageProps} />
</div>
</>
)}
</ChakraProvider> </ChakraProvider>
</Provider> </Provider>
) );
} }
export default MyApp export default MyApp;

26
pages/api/auth/[...nextauth].js
View file

@ -1,16 +1,16 @@
import NextAuth from 'next-auth' import NextAuth from "next-auth";
import Providers from 'next-auth/providers' import Providers from "next-auth/providers";
export default NextAuth({ export default NextAuth({
// Configure one or more authentication providers // Configure one or more authentication providers
providers: [ providers: [
Providers.Discord({ Providers.Discord({
clientId: process.env.DISCORD_ID, clientId: process.env.DISCORD_ID,
clientSecret: process.env.DISCORD_SECRET clientSecret: process.env.DISCORD_SECRET,
}), }),
// ...add more providers here // ...add more providers here
], ],
// A database is optional, but required to persist accounts in a database // A database is optional, but required to persist accounts in a database
database: process.env.DATABASE_URL, database: process.env.DATABASE_URL,
}) });

5
pages/api/hello.js
View file

@ -1,5 +0,0 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
export default function handler(req, res) {
res.status(200).json({ name: 'John Doe' })
}

164
pages/controlpanel/commands.js
View file

@ -1,98 +1,104 @@
import React from 'react'; import React from "react";
import { import {
Table, Table,
Thead, Thead,
Tbody, Tbody,
Tr, Tr,
Th, Th,
Td, Td,
TableCaption, TableCaption,
Switch, Switch,
Text Text,
} from "@chakra-ui/react" } from "@chakra-ui/react";
import Head from 'next/head' import Head from "next/head";
import { useSession } from 'next-auth/client' import { useSession } from "next-auth/client";
import axios from 'axios' import axios from "axios";
import { FaBullseye } from 'react-icons/fa'; import { FaBullseye } from "react-icons/fa";
function Controller({ initialState }) { function Controller({ initialState }) {
const [online, setOnline] = React.useState(initialState) const [online, setOnline] = React.useState(initialState);
return ( return (
<Switch <Switch
size="lg" size="lg"
colorScheme={'teal'} colorScheme={"teal"}
isChecked={online} isChecked={online}
value={online} value={online}
onChange={() => { setOnline(!online) }} onChange={() => {
/> setOnline(!online);
) }}
/>
);
} }
function processOnline(status) { function processOnline(status) {
console.log(status) console.log(status);
if (status == 'online') { return true } if (status == "online") {
if (status == 'offline') { return false } return true;
if (status == 'maintenance') { return false } }
if (status == "offline") {
return false;
}
if (status == "maintenance") {
return false;
}
} }
function Commands() { function Commands() {
const [session, loading] = useSession() const [session, loading] = useSession();
const [categories, setCategories] = React.useState([
{ name: "Help", commands: [{ name: "Help", online: true }] },
]);
const [categories, setCategories] = React.useState( React.useEffect(() => {
[ axios
{ name: 'Help', commands: [ .get("https://api.cath.gq/api/v1/client/commands")
{name: 'Help', online: true} .then(res => setCategories(res.data));
] }, }, []);
]
)
React.useEffect(() => { return (
axios.get('https://cath.night0721.repl.co/api/commands') <>
.then(res => setCategories(res.data)) {session && (
}, [])
return (
<> <>
{session && <Head>
<title>Cath Commands</title>
</Head>
<Table variant="simple">
<TableCaption>Command Controls</TableCaption>
<Thead>
<Tr>
<Th>Command</Th>
<Th>Enabled</Th>
</Tr>
</Thead>
<Tbody>
{categories.map((category, idx) => (
<> <>
<Head> <Text fontSize="3xl">{category.name}</Text>
<title>Cath Commands</title> {category.commands.map((command, commandIdx) => (
</Head> <Tr key={commandIdx}>
<Table variant="simple"> <Td>{command.name}</Td>
<TableCaption>Command Controls</TableCaption> <Td>
<Thead> <Controller
<Tr> initialState={processOnline(command.status)}
<Th>Command</Th> />
<Th>Enabled</Th> </Td>
</Tr> </Tr>
</Thead> ))}
<Tbody>
{categories.map((category, idx) => (
<>
<Text fontSize='3xl'>{category.name}</Text>
{category.commands.map((command, commandIdx) => (
<Tr key={commandIdx}>
<Td>{command.name}</Td>
<Td>
<Controller initialState={processOnline(command.status)} />
</Td>
</Tr>
))}
</>
))}
</Tbody>
</Table>
</> </>
} {!session && <> ))}
<h1>Seems like you&apos;re not logged in. Log in to get started!</h1> </Tbody>
</> </Table>
}
</> </>
); )}{" "}
{!session && (
<>
<h1>Seems like you&apos;re not logged in. Log in to get started!</h1>
</>
)}
</>
);
} }
export default Commands export default Commands;

117
pages/controlpanel/index.js
View file

@ -1,58 +1,81 @@
import React from 'react' import React from "react";
import Card from '../../components/Card' import Card from "../../components/Card";
import Head from 'next/head' import Head from "next/head";
import { useSession } from 'next-auth/client' import { useSession } from "next-auth/client";
import { Flex, Text, Spacer } from "@chakra-ui/react" import { Flex, Text, Spacer } from "@chakra-ui/react";
import {motion} from 'framer-motion' import { motion } from "framer-motion";
const container = { const container = {
hidden: { opacity: 1, scale: 0 }, hidden: { opacity: 1, scale: 0 },
visible: { visible: {
opacity: 1, opacity: 1,
scale: 1, scale: 1,
transition: { transition: {
delayChildren: 0.3, delayChildren: 0.3,
staggerChildren: 0.2 staggerChildren: 0.2,
} },
} },
} };
const item = { const item = {
hidden: { y: 20, opacity: 0 }, hidden: { y: 20, opacity: 0 },
visible: { visible: {
y: 0, y: 0,
opacity: 1 opacity: 1,
} },
} };
function Index() { function Index() {
const [session, loading] = useSession();
const [session, loading] = useSession() return (
<>
return ( {!session && (
<> <>
{!session && <> <h1>Seems like you&apos;re not logged in. Log in to get started!</h1>
<h1>Seems like you&apos;re not logged in. Log in to get started!</h1>
</>
}
{session && <>
<Head>
<title>Cath Control Panel</title>
</Head>
<Text fontSize='4xl' marginBottom='15'>Control Panel</Text>
<motion.div variants={container} initial="hidden" animate="visible" exit={{opacity: 0}}>
<Flex direction='column'>
<Card title='Commands' desc='Control your commands' link='/controlpanel/commands' variants={item}/>
<Spacer />
<Card title='Commands' desc='Control your commands' link='/controlpanel/commands' variants={item}/>
<Spacer />
<Card title='Commands' desc='Control your commands' link='/controlpanel/commands' variants={item}/>
</Flex>
</motion.div>
</>
}
</> </>
) )}
{session && (
<>
<Head>
<title>Cath Control Panel</title>
</Head>
<Text fontSize="4xl" marginBottom="15">
Control Panel
</Text>
<motion.div
variants={container}
initial="hidden"
animate="visible"
exit={{ opacity: 0 }}
>
<Flex direction="column">
<Card
title="Commands"
desc="Control your commands"
link="/controlpanel/commands"
variants={item}
/>
<Spacer />
<Card
title="Commands"
desc="Control your commands"
link="/controlpanel/commands"
variants={item}
/>
<Spacer />
<Card
title="Commands"
desc="Control your commands"
link="/controlpanel/commands"
variants={item}
/>
</Flex>
</motion.div>
</>
)}
</>
);
} }
export default Index export default Index;

111
pages/index.js
View file

@ -1,17 +1,16 @@
import Card from '../components/Card' import Card from "../components/Card";
import { useSession } from 'next-auth/client' import { useSession } from "next-auth/client";
import { Text } from "@chakra-ui/react" import { Text } from "@chakra-ui/react";
import Hero from '../components/Hero/Hero' import Hero from "../components/Hero/Hero";
import { CTA } from '../components/CTA' import { CTA } from "../components/CTA";
import { Features } from '../components/Features/Features' import { Features } from "../components/Features/Features";
import { Footer } from '../components/Footer/Footer' import { Footer } from "../components/Footer/Footer";
import { motion } from 'framer-motion' import { motion } from "framer-motion";
import StatCard from '../components/StatCard' import StatCard from "../components/StatCard";
import Testimonials from '../components/Testimonials/Testimonials' import Testimonials from "../components/Testimonials/Testimonials";
import AuthButton from '../components/AuthButton' import AuthButton from "../components/AuthButton";
export default function Home() { export default function Home() {
const container = { const container = {
hidden: { opacity: 1, scale: 0 }, hidden: { opacity: 1, scale: 0 },
visible: { visible: {
@ -19,38 +18,68 @@ export default function Home() {
scale: 1, scale: 1,
transition: { transition: {
delayChildren: 0.4, delayChildren: 0.4,
staggerChildren: 0.3 staggerChildren: 0.3,
} },
} },
} };
const [session, loading] = useSession();
const [session, loading] = useSession()
return ( return (
<> <>
{!session && <> {!session && (
<Hero/> <>
<Features /> <Hero />
<Testimonials/> <Features />
<CTA /> <Testimonials />
<Footer /> <CTA />
</> <Footer />
} </>
{session && <> )}
<Text fontSize='4xl'>Welcome {session.user.name}!</Text> {session && (
<motion.div className='grid' variants={container} initial="hidden" animate="visible" exit={{ opacity: 0 }}> <>
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/> <Text fontSize="4xl">Welcome {session.user.name}!</Text>
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/> <motion.div
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/> className="grid"
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/> variants={container}
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/> initial="hidden"
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/> animate="visible"
<StatCard/> exit={{ opacity: 0 }}
</motion.div> >
</> <Card
} title="commands"
desc="lorem ipsum dolor sit amet"
link="/controlpanel/commands"
/>
<Card
title="commands"
desc="lorem ipsum dolor sit amet"
link="/controlpanel/commands"
/>
<Card
title="commands"
desc="lorem ipsum dolor sit amet"
link="/controlpanel/commands"
/>
<Card
title="commands"
desc="lorem ipsum dolor sit amet"
link="/controlpanel/commands"
/>
<Card
title="commands"
desc="lorem ipsum dolor sit amet"
link="/controlpanel/commands"
/>
<Card
title="commands"
desc="lorem ipsum dolor sit amet"
link="/controlpanel/commands"
/>
<StatCard />
</motion.div>
</>
)}
</> </>
) );
} }

4911
yarn.lock
View file

File diff suppressed because it is too large Load diff