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

10
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

52
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 && <> <>
{!session && (
<>
<Button <Button
display={{ base: 'none', md: 'inline-flex' }} display={{ base: "none", md: "inline-flex" }}
fontSize={'sm'} fontSize={"sm"}
fontWeight={600} fontWeight={600}
color={'white'} color={"white"}
bg={'teal.400'} bg={"teal.400"}
href={'#'} href={"#"}
_hover={{ _hover={{
bg: 'teal.300', bg: "teal.300",
}} }}
onClick={()=>signIn()}> onClick={() => signIn()}
>
Sign In Sign In
</Button> </Button>
</>} </>
{session && <> )}
{session && (
<>
<Button <Button
display={{ base: 'none', md: 'inline-flex' }} display={{ base: "none", md: "inline-flex" }}
fontSize={'sm'} fontSize={"sm"}
fontWeight={600} fontWeight={600}
color={'white'} color={"white"}
bg={'teal.400'} bg={"teal.400"}
href={'#'} href={"#"}
_hover={{ _hover={{
bg: 'teal.300', bg: "teal.300",
}} }}
onClick={() => signOut()}> onClick={() => signOut()}
>
Sign Out Sign Out
</Button> </Button>
</>}
</> </>
)}
</>
);
} }

19
components/CTA.js
View file

@ -1,13 +1,13 @@
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">
@ -16,9 +16,16 @@ export const CTA = () => (
<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
mt="8"
as="a"
href="#"
size="lg"
colorScheme="teal"
fontWeight="bold"
>
Start For Free Start For Free
</Button> </Button>
</Box> </Box>
</Box> </Box>
) );

42
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}) { function Card({ title, desc, link }) {
return ( return (
<Link href={link}> <Link href={link}>
<MotionFlex direction='column' background='gray.900' width={300} height={150} p='5' borderRadius='15px' variants={item}> <MotionFlex
<Text fontSize='2xl'>{title}</Text> direction="column"
<Text fontSize='lg' style={{ marginBottom: '10px' }}>{desc}</Text> background="gray.900"
<Button colorScheme='teal' variant='outline'>Learn More</Button> 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> </MotionFlex>
</Link> </Link>
) );
} }
export default Card export default Card;

37
components/Sidebar/Sidebar.js
View file

@ -20,16 +20,16 @@ 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 ( return (
<Flex <Flex
@ -53,7 +53,7 @@ export default function Sidebar({children}) {
mr="2" mr="2"
boxSize="4" boxSize="4"
_groupHover={{ _groupHover={{
color: 'gray.600', color: "gray.600",
}} }}
as={icon} as={icon}
/> />
@ -63,7 +63,7 @@ export default function Sidebar({children}) {
); );
}; };
const SidebarContent = (props) => ( const SidebarContent = props => (
<Box <Box
as="nav" as="nav"
pos="fixed" pos="fixed"
@ -80,7 +80,7 @@ export default function Sidebar({children}) {
w="60" w="60"
{...props} {...props}
> >
<Link href='/'> <Link href="/">
<Flex px="4" py="5" align="center"> <Flex px="4" py="5" align="center">
<Text <Text
fontSize="2xl" fontSize="2xl"
@ -99,7 +99,7 @@ export default function Sidebar({children}) {
color="gray.600" color="gray.600"
aria-label="Main Navigation" aria-label="Main Navigation"
> >
<Link href='/'> <Link href="/">
<NavItem icon={MdHome}>Home</NavItem> <NavItem icon={MdHome}>Home</NavItem>
</Link> </Link>
<NavItem icon={HiCode} onClick={integrations.onToggle}> <NavItem icon={HiCode} onClick={integrations.onToggle}>
@ -111,19 +111,19 @@ export default function Sidebar({children}) {
/> />
</NavItem> </NavItem>
<Collapse in={integrations.isOpen}> <Collapse in={integrations.isOpen}>
<Link href='/controlpanel'> <Link href="/controlpanel">
<NavItem pl="12" py="2"> <NavItem pl="12" py="2">
Main Main
</NavItem> </NavItem>
</Link> </Link>
<Link href='controlpanel/commands'> <Link href="controlpanel/commands">
<NavItem pl="12" py="2"> <NavItem pl="12" py="2">
Commands Commands
</NavItem> </NavItem>
</Link> </Link>
</Collapse> </Collapse>
<NavItem icon={AiFillGift}>Coming Soon</NavItem> <NavItem icon={AiFillGift}>Coming Soon</NavItem>
<AuthButton/> <AuthButton />
</Flex> </Flex>
</Box> </Box>
); );
@ -163,22 +163,15 @@ export default function Sidebar({children}) {
icon={<FiMenu />} icon={<FiMenu />}
size="sm" size="sm"
/> />
<Flex w="96"> <Flex w="96"></Flex>
</Flex>
<Flex align="center"> <Flex align="center">
<Icon color="gray.500" as={FaBell} cursor="pointer" /> <Icon color="gray.500" as={FaBell} cursor="pointer" />
<Avatar <Avatar ml="4" size="sm" name="anubra266" src="" cursor="pointer" />
ml="4"
size="sm"
name="anubra266"
src=''
cursor="pointer"
/>
</Flex> </Flex>
</Flex> </Flex>
<Box as="main" p="4" background={'#1a202c'}> <Box as="main" p="4" background={"#1a202c"}>
{children} {children}
</Box> </Box>
</Box> </Box>

57
components/StatCard.js
View file

@ -5,10 +5,10 @@ import {
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 },
@ -17,26 +17,39 @@ const container = {
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"
flexDirection="column"
style={{ gap: "10px" }}
variants={container}
>
<MotionStat
background="gray.900"
width={300}
height={150}
p="5"
borderRadius="15px"
flexShrink={1}
variants={item}
>
<StatLabel>User Growth</StatLabel> <StatLabel>User Growth</StatLabel>
<StatNumber>77</StatNumber> <StatNumber>77</StatNumber>
<StatHelpText> <StatHelpText>
@ -45,16 +58,24 @@ function StatCard() {
</StatHelpText> </StatHelpText>
</MotionStat> </MotionStat>
<MotionStat background='gray.900' width={300} height={150} p='5' borderRadius='15px' flexShrink={1} variants={item}> <MotionStat
background="gray.900"
width={300}
height={150}
p="5"
borderRadius="15px"
flexShrink={1}
variants={item}
>
<StatLabel>Activity</StatLabel> <StatLabel>Activity</StatLabel>
<StatNumber>45 messages</StatNumber> <StatNumber>45 messages</StatNumber>
<StatHelpText> <StatHelpText>
<StatArrow type="decrease"/> <StatArrow type="decrease" />
9.05% 9.05%
</StatHelpText> </StatHelpText>
</MotionStat> </MotionStat>
</MotionStatGroup> </MotionStatGroup>
) );
} }
export default StatCard export default StatCard;

160
components/Testimonials/Testimonials.js
View file

@ -7,40 +7,36 @@ import {
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: 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: 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: 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",
}, },
]; ];
@ -55,66 +51,63 @@ 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 <Flex
direction={'column'} direction={"column"}
textAlign={'left'} textAlign={"left"}
justifyContent={'space-between'}> justifyContent={"space-between"}
<chakra.p >
fontWeight={'medium'} <chakra.p fontWeight={"medium"} fontSize={"15px"} pb={4}>
fontSize={'15px'}
pb={4}>
{content} {content}
</chakra.p> </chakra.p>
<chakra.p fontWeight={'bold'} fontSize={14}> <chakra.p fontWeight={"bold"} fontSize={14}>
{name} {name}
<chakra.span <chakra.span fontWeight={"medium"} color={"gray.500"}>
fontWeight={'medium'} {" "}
color={'gray.500'}>
{' '}
- {role} - {role}
</chakra.span> </chakra.span>
</chakra.p> </chakra.p>
</Flex> </Flex>
<Avatar <Avatar
src={avatar} src={avatar}
height={'80px'} height={"80px"}
width={'80px'} width={"80px"}
alignSelf={'center'} alignSelf={"center"}
m={{ base: '0 0 35px 0', md: '0 0 0 50px' }} m={{ base: "0 0 35px 0", md: "0 0 0 50px" }}
/> />
</Flex> </Flex>
); );
@ -123,43 +116,48 @@ function TestmonialCard(props) {
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'}> >
<Box width={{ base: "full", sm: "lg", lg: "xl" }} margin={"auto"}>
<chakra.h3 <chakra.h3
fontWeight={'bold'} fontWeight={"bold"}
fontSize={20} fontSize={20}
textTransform={'uppercase'} textTransform={"uppercase"}
color={'purple.400'}> color={"purple.400"}
>
Users love Cath Users love Cath
</chakra.h3> </chakra.h3>
<chakra.h1 <chakra.h1
py={5} py={5}
fontSize={48} fontSize={48}
fontWeight={'bold'} fontWeight={"bold"}
color={useColorModeValue('gray.700', 'gray.50')}> color={useColorModeValue("gray.700", "gray.50")}
>
You're in good company You're in good company
</chakra.h1> </chakra.h1>
<chakra.h2 <chakra.h2
margin={'auto'} margin={"auto"}
width={'70%'} width={"70%"}
fontWeight={'medium'} fontWeight={"medium"}
color={useColorModeValue('gray.500', 'gray.400')}> color={useColorModeValue("gray.500", "gray.400")}
See why over{' '} >
<chakra.strong color={useColorModeValue('gray.700', 'gray.50')}> See why over{" "}
<chakra.strong color={useColorModeValue("gray.700", "gray.50")}>
110000+ 110000+
</chakra.strong>{' '} </chakra.strong>{" "}
users use Cath in their servers users use Cath in their servers
</chakra.h2> </chakra.h2>
</Box> </Box>
<SimpleGrid <SimpleGrid
columns={{ base: 1, xl: 2 }} columns={{ base: 1, xl: 2 }}
spacing={'20'} spacing={"20"}
mt={16} mt={16}
mx={'auto'}> mx={"auto"}
>
{testimonials.map((cardInfo, index) => ( {testimonials.map((cardInfo, index) => (
<TestmonialCard {...cardInfo} key={index} /> <TestmonialCard {...cardInfo} key={index} />
))} ))}

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"
} }
} }

4
pages/404.js
View file

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

41
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>
<div className="page-container">
<Component {...pageProps} /> <Component {...pageProps} />
</div> </div>
</Sidebar>} </Sidebar>
{session && <> )}
<Header/> {session && (
<div className='page-container'> <>
<Header />
<div className="page-container">
<Component {...pageProps} /> <Component {...pageProps} />
</div> </div>
</>} </>
)}
</ChakraProvider> </ChakraProvider>
</Provider> </Provider>
) );
} }
export default MyApp export default MyApp;

8
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' })
}

76
pages/controlpanel/commands.js
View file

@ -1,4 +1,4 @@
import React from 'react'; import React from "react";
import { import {
Table, Table,
Thead, Thead,
@ -8,56 +8,58 @@ import {
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([
const [categories, setCategories] = React.useState( { name: "Help", commands: [{ name: "Help", online: true }] },
[ ]);
{ name: 'Help', commands: [
{name: 'Help', online: true}
] },
]
)
React.useEffect(() => { React.useEffect(() => {
axios.get('https://cath.night0721.repl.co/api/commands') axios
.then(res => setCategories(res.data)) .get("https://api.cath.gq/api/v1/client/commands")
}, []) .then(res => setCategories(res.data));
}, []);
return ( return (
<> <>
{session && {session && (
<> <>
<Head> <Head>
<title>Cath Commands</title> <title>Cath Commands</title>
@ -73,12 +75,14 @@ function Commands() {
<Tbody> <Tbody>
{categories.map((category, idx) => ( {categories.map((category, idx) => (
<> <>
<Text fontSize='3xl'>{category.name}</Text> <Text fontSize="3xl">{category.name}</Text>
{category.commands.map((command, commandIdx) => ( {category.commands.map((command, commandIdx) => (
<Tr key={commandIdx}> <Tr key={commandIdx}>
<Td>{command.name}</Td> <Td>{command.name}</Td>
<Td> <Td>
<Controller initialState={processOnline(command.status)} /> <Controller
initialState={processOnline(command.status)}
/>
</Td> </Td>
</Tr> </Tr>
))} ))}
@ -87,12 +91,14 @@ function Commands() {
</Tbody> </Tbody>
</Table> </Table>
</> </>
} {!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>
</> </>
} )}
</> </>
); );
} }
export default Commands export default Commands;

77
pages/controlpanel/index.js
View file

@ -1,9 +1,9 @@
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 },
@ -12,47 +12,70 @@ const container = {
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 && <> {session && (
<>
<Head> <Head>
<title>Cath Control Panel</title> <title>Cath Control Panel</title>
</Head> </Head>
<Text fontSize='4xl' marginBottom='15'>Control Panel</Text> <Text fontSize="4xl" marginBottom="15">
<motion.div variants={container} initial="hidden" animate="visible" exit={{opacity: 0}}> Control Panel
<Flex direction='column'> </Text>
<Card title='Commands' desc='Control your commands' link='/controlpanel/commands' variants={item}/> <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 /> <Spacer />
<Card title='Commands' desc='Control your commands' link='/controlpanel/commands' variants={item}/> <Card
title="Commands"
desc="Control your commands"
link="/controlpanel/commands"
variants={item}
/>
<Spacer /> <Spacer />
<Card title='Commands' desc='Control your commands' link='/controlpanel/commands' variants={item}/> <Card
title="Commands"
desc="Control your commands"
link="/controlpanel/commands"
variants={item}
/>
</Flex> </Flex>
</motion.div> </motion.div>
</> </>
} )}
</> </>
) );
} }
export default Index export default Index;

99
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/> <>
<Hero />
<Features /> <Features />
<Testimonials/> <Testimonials />
<CTA /> <CTA />
<Footer /> <Footer />
</> </>
} )}
{session && <> {session && (
<Text fontSize='4xl'>Welcome {session.user.name}!</Text> <>
<motion.div className='grid' variants={container} initial="hidden" animate="visible" exit={{ opacity: 0 }}> <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"
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/> exit={{ opacity: 0 }}
<StatCard/> >
<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> </motion.div>
</> </>
} )}
</> </>
) );
} }

4911
yarn.lock
View file

File diff suppressed because it is too large Load diff