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

syntax changes

Browse source
This commit is contained in:
night0721 2022-01-09 05:38:17 +08:00
parent 3f27eb643e
commit a06dcd0453
18 changed files with 328 additions and 292 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
components/Card.js
View file

@ -2,9 +2,7 @@ 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: {
@ -12,8 +10,7 @@ const item = {
opacity: 1, opacity: 1,
}, },
}; };
export default function Card({ title, desc, link }) {
function Card({ title, desc, link }) {
return ( return (
<Link href={link}> <Link href={link}>
<MotionFlex <MotionFlex
@ -36,5 +33,3 @@ function Card({ title, desc, link }) {
</Link> </Link>
); );
} }
export default Card;

36
components/Features/Feature.js
View file

@ -1,18 +1,20 @@
import { Box, Stack, Text, useColorModeValue as mode } from '@chakra-ui/react' import { Box, Stack, Text, useColorModeValue as mode } from "@chakra-ui/react";
import * as React from 'react' import * as React from "react";
export const Feature = props => {
export const Feature = (props) => { const { title, children, icon } = props;
const { title, children, icon } = props return (
return ( <Stack
<Stack spacing={{ base: '3', md: '6' }} direction={{ base: 'column', md: 'row' }}> spacing={{ base: "3", md: "6" }}
<Box fontSize="6xl">{icon}</Box> direction={{ base: "column", md: "row" }}
<Stack spacing="1"> >
<Text fontWeight="extrabold" fontSize="lg"> <Box fontSize="6xl">{icon}</Box>
{title} <Stack spacing="1">
</Text> <Text fontWeight="extrabold" fontSize="lg">
<Box color={mode('gray.600', 'gray.400')}>{children}</Box> {title}
</Stack> </Text>
</Stack> <Box color={mode("gray.600", "gray.400")}>{children}</Box>
) </Stack>
} </Stack>
);
};

54
components/Features/Features.js
View file

@ -1,23 +1,35 @@
import { Box, SimpleGrid } from '@chakra-ui/react' import { Box, SimpleGrid } from "@chakra-ui/react";
import * as React from 'react' import * as React from "react";
import { FcDoughnutChart, FcMultipleDevices, FcPrivacy, FcTimeline } from 'react-icons/fc' import {
import { Feature } from './Feature' FcDoughnutChart,
FcMultipleDevices,
FcPrivacy,
FcTimeline,
} from "react-icons/fc";
import { Feature } from "./Feature";
export const Features = () => ( export const Features = () => (
<Box as="section" maxW="5xl" mx="auto" py="12" px={{ base: '6', md: '8' }}> <Box as="section" maxW="5xl" mx="auto" py="12" px={{ base: "6", md: "8" }}>
<SimpleGrid columns={{ base: 1, md: 2 }} spacingX="10" spacingY={{ base: '8', md: '14' }}> <SimpleGrid
<Feature title="Secure by default" icon={<FcPrivacy />}> columns={{ base: 1, md: 2 }}
Cath will never leak any of your information. Ever. All your data is stored securely on our side. spacingX="10"
</Feature> spacingY={{ base: "8", md: "14" }}
<Feature title="Always up to date" icon={<FcTimeline />}> >
Cath is constantly being updated and worked on. Bugs and features, you name them, we do them. <Feature title="Secure by default" icon={<FcPrivacy />}>
</Feature> Cath will never leak any of your information. Ever. All your data is
<Feature title="Incredible statistics" icon={<FcDoughnutChart />}> stored securely on our side.
Amazing server statistics that make tracking your server growth a breeze. </Feature>
</Feature> <Feature title="Always up to date" icon={<FcTimeline />}>
<Feature title="For everyone" icon={<FcMultipleDevices />}> Cath is constantly being updated and worked on. Bugs and features, you
No matter who you are, Cath is sure to have a purpose for you. name them, we do them.
</Feature> </Feature>
</SimpleGrid> <Feature title="Incredible statistics" icon={<FcDoughnutChart />}>
</Box> Amazing server statistics that make tracking your server growth a
) breeze.
</Feature>
<Feature title="For everyone" icon={<FcMultipleDevices />}>
No matter who you are, Cath is sure to have a purpose for you.
</Feature>
</SimpleGrid>
</Box>
);

14
components/Footer/Copyright.js
View file

@ -1,8 +1,8 @@
import { Text, TextProps } from '@chakra-ui/layout' import { Text, TextProps } from "@chakra-ui/layout";
import * as React from 'react' import * as React from "react";
export const Copyright = (props) => ( export const Copyright = props => (
<Text fontSize="sm" {...props}> <Text fontSize="sm" {...props}>
&copy; {new Date().getFullYear()} Cath. All rights reserved. &copy; {new Date().getFullYear()} Cath. All rights reserved.
</Text> </Text>
) );

33
components/Footer/Footer.js
View file

@ -1,15 +1,22 @@
import { Box, Stack } from '@chakra-ui/react' import { Box, Stack } from "@chakra-ui/react";
import * as React from 'react' import * as React from "react";
import { Copyright } from './Copyright' import { Copyright } from "./Copyright";
import { SocialMediaLinks } from './SocialMediaLinks' import { SocialMediaLinks } from "./SocialMediaLinks";
export const Footer = () => ( export const Footer = () => (
<Box as="footer" role="contentinfo" mx="auto" maxW="7xl" py="12" px={{ base: '4', md: '8' }}> <Box
<Stack> as="footer"
<Stack direction="row" spacing="4" align="center" justify="space-between"> role="contentinfo"
<SocialMediaLinks /> mx="auto"
</Stack> maxW="7xl"
<Copyright alignSelf={{ base: 'center', sm: 'start' }} /> py="12"
</Stack> px={{ base: "4", md: "8" }}
</Box> >
) <Stack>
<Stack direction="row" spacing="4" align="center" justify="space-between">
<SocialMediaLinks />
</Stack>
<Copyright alignSelf={{ base: "center", sm: "start" }} />
</Stack>
</Box>
);

22
components/Footer/SocialMediaLinks.js
View file

@ -1,9 +1,15 @@
import { ButtonGroup, ButtonGroupProps, IconButton } from '@chakra-ui/react' import { ButtonGroup, ButtonGroupProps, IconButton } from "@chakra-ui/react";
import * as React from 'react' import * as React from "react";
import { FaGithub } from 'react-icons/fa' import { FaGithub } from "react-icons/fa";
export const SocialMediaLinks = (props) => ( export const SocialMediaLinks = props => (
<ButtonGroup variant="ghost" color="gray.600" {...props}> <ButtonGroup variant="ghost" color="gray.600" {...props}>
<IconButton as="a" href="https://github.com/night0721/cath.gq" aria-label="GitHub" icon={<FaGithub fontSize="20px" />} target='_empty'/> <IconButton
</ButtonGroup> as="a"
) href="https://github.com/night0721/cath.gq"
aria-label="GitHub"
icon={<FaGithub fontSize="20px" />}
target="_empty"
/>
</ButtonGroup>
);

195
components/Hero/Hero.js
View file

@ -1,103 +1,108 @@
import React from "react"; import React from "react";
import { import {
chakra, chakra,
Box, Box,
useColorModeValue, useColorModeValue,
Button, Button,
Stack, Stack,
Image, Image,
Text, Text,
Icon, Icon,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { signIn } from 'next-auth/client' import { signIn } from "next-auth/client";
const Hero = () => { const Hero = () => {
return ( return (
<Box px={8} py={24} mx="auto"> <Box px={8} py={24} mx="auto">
<Box <Box
w={{ base: "full", md: 11 / 12, xl: 9 / 12 }} w={{ base: "full", md: 11 / 12, xl: 9 / 12 }}
mx="auto" mx="auto"
textAlign={{ base: "left", md: "center" }} textAlign={{ base: "left", md: "center" }}
> >
<chakra.h1 <chakra.h1
mb={6} mb={6}
fontSize={{ base: "4xl", md: "6xl" }} fontSize={{ base: "4xl", md: "6xl" }}
fontWeight="bold" fontWeight="bold"
lineHeight="none" lineHeight="none"
letterSpacing={{ base: "normal", md: "tight" }} letterSpacing={{ base: "normal", md: "tight" }}
color={useColorModeValue("gray.900", 'gray.100')} color={useColorModeValue("gray.900", "gray.100")}
> >
Your favorite{" "} Your favorite{" "}
<Text <Text
display={{ base: "block", lg: "inline" }} display={{ base: "block", lg: "inline" }}
w="full" w="full"
bgClip="text" bgClip="text"
bgGradient="linear(to-r, rgba(0,76,213,1) 0%, rgba(0,99,255,1) 50%, rgba(0,183,255,1) 100%)" bgGradient="linear(to-r, rgba(0,76,213,1) 0%, rgba(0,99,255,1) 50%, rgba(0,183,255,1) 100%)"
fontWeight="extrabold" fontWeight="extrabold"
> >
CODM CODM
</Text>{" "} </Text>{" "}
bot. bot.
</chakra.h1> </chakra.h1>
<chakra.p <chakra.p
px={{ base: 0, lg: 24 }} px={{ base: 0, lg: 24 }}
mb={6} mb={6}
fontSize={{ base: "lg", md: "xl" }} fontSize={{ base: "lg", md: "xl" }}
color={useColorModeValue("gray.600", 'gray.300')} color={useColorModeValue("gray.600", "gray.300")}
> >
Your favorite CODM bot. Cath.exe is packed to the brim with commands for moderation, stats and of course, CODM. Your favorite CODM bot. Cath.exe is packed to the brim with commands
</chakra.p> for moderation, stats and of course, CODM.
<Stack </chakra.p>
direction={{ base: "column", sm: "row" }} <Stack
mb={{ base: 4, md: 8 }} direction={{ base: "column", sm: "row" }}
spacing={2} mb={{ base: 4, md: 8 }}
justifyContent={{ sm: "left", md: "center" }} spacing={2}
> justifyContent={{ sm: "left", md: "center" }}
<Button >
as="a" <Button
variant="solid" as="a"
colorScheme="blue" variant="solid"
display="inline-flex" colorScheme="blue"
alignItems="center" display="inline-flex"
justifyContent="center" alignItems="center"
w={{ base: "full", sm: "auto" }} justifyContent="center"
mb={{ base: 2, sm: 0 }} w={{ base: "full", sm: "auto" }}
href={"https://discord.com/api/oauth2/authorize?client_id=800966959268364288&permissions=4231314550&scope=bot%20applications.commands"} mb={{ base: 2, sm: 0 }}
size="lg" href={
> "https://discord.com/api/oauth2/authorize?client_id=800966959268364288&permissions=4231314550&scope=bot%20applications.commands"
Invite Cath }
<Icon boxSize={4} ml={1} viewBox="0 0 20 20" fill="currentColor"> size="lg"
<path >
fillRule="evenodd" Invite Cath
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" <Icon boxSize={4} ml={1} viewBox="0 0 20 20" fill="currentColor">
clipRule="evenodd" <path
/> fillRule="evenodd"
</Icon> d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
</Button> clipRule="evenodd"
<Button />
as="a" </Icon>
colorScheme="gray" </Button>
display="inline-flex" <Button
alignItems="center" as="a"
justifyContent="center" colorScheme="gray"
w={{ base: "full", sm: "auto" }} display="inline-flex"
mb={{ base: 2, sm: 0 }} alignItems="center"
onClick={() => { signIn() }} justifyContent="center"
size="lg" w={{ base: "full", sm: "auto" }}
> mb={{ base: 2, sm: 0 }}
Sign Up onClick={() => {
<Icon boxSize={4} ml={1} viewBox="0 0 20 20" fill="currentColor"> signIn();
<path }}
fillRule="evenodd" size="lg"
d="M6.672 1.911a1 1 0 10-1.932.518l.259.966a1 1 0 001.932-.518l-.26-.966zM2.429 4.74a1 1 0 10-.517 1.932l.966.259a1 1 0 00.517-1.932l-.966-.26zm8.814-.569a1 1 0 00-1.415-1.414l-.707.707a1 1 0 101.415 1.415l.707-.708zm-7.071 7.072l.707-.707A1 1 0 003.465 9.12l-.708.707a1 1 0 001.415 1.415zm3.2-5.171a1 1 0 00-1.3 1.3l4 10a1 1 0 001.823.075l1.38-2.759 3.018 3.02a1 1 0 001.414-1.415l-3.019-3.02 2.76-1.379a1 1 0 00-.076-1.822l-10-4z" >
clipRule="evenodd" Sign Up
/> <Icon boxSize={4} ml={1} viewBox="0 0 20 20" fill="currentColor">
</Icon> <path
</Button> fillRule="evenodd"
</Stack> d="M6.672 1.911a1 1 0 10-1.932.518l.259.966a1 1 0 001.932-.518l-.26-.966zM2.429 4.74a1 1 0 10-.517 1.932l.966.259a1 1 0 00.517-1.932l-.966-.26zm8.814-.569a1 1 0 00-1.415-1.414l-.707.707a1 1 0 101.415 1.415l.707-.708zm-7.071 7.072l.707-.707A1 1 0 003.465 9.12l-.708.707a1 1 0 001.415 1.415zm3.2-5.171a1 1 0 00-1.3 1.3l4 10a1 1 0 001.823.075l1.38-2.759 3.018 3.02a1 1 0 001.414-1.415l-3.019-3.02 2.76-1.379a1 1 0 00-.076-1.822l-10-4z"
</Box> clipRule="evenodd"
</Box> />
); </Icon>
</Button>
</Stack>
</Box>
</Box>
);
}; };
export default Hero; export default Hero;

195
components/Nav/Header.js
View file

@ -14,70 +14,83 @@ import {
useColorModeValue, useColorModeValue,
useBreakpointValue, useBreakpointValue,
useDisclosure, useDisclosure,
} from '@chakra-ui/react'; } from "@chakra-ui/react";
import { import {
HamburgerIcon, HamburgerIcon,
CloseIcon, CloseIcon,
ChevronDownIcon, ChevronDownIcon,
ChevronRightIcon, ChevronRightIcon,
} from '@chakra-ui/icons'; } from "@chakra-ui/icons";
import AuthButton from '../AuthButton' import AuthButton from "../AuthButton";
import { signIn, signOut, useSession } from 'next-auth/client'; import { signIn, signOut, useSession } from "next-auth/client";
export default function WithSubnavigation() { export default function WithSubnavigation() {
const { isOpen, onToggle } = useDisclosure(); const { isOpen, onToggle } = useDisclosure();
const [session, loading] = useSession() const [session, loading] = useSession();
return ( return (
<Box> <Box>
<Flex <Flex
bg={useColorModeValue('white', 'gray.800')} bg={useColorModeValue("white", "gray.800")}
color={useColorModeValue('gray.600', 'white')} color={useColorModeValue("gray.600", "white")}
minH={'60px'} minH={"60px"}
py={{ base: 2 }} py={{ base: 2 }}
px={{ base: 4 }} px={{ base: 4 }}
borderBottom={1} borderBottom={1}
borderStyle={'solid'} borderStyle={"solid"}
borderColor={useColorModeValue('gray.200', 'gray.900')} borderColor={useColorModeValue("gray.200", "gray.900")}
align={'center'}> align={"center"}
>
<Flex <Flex
flex={{ base: 1, md: 'auto' }} flex={{ base: 1, md: "auto" }}
ml={{ base: -2 }} ml={{ base: -2 }}
display={{ base: 'flex', md: 'none' }}> display={{ base: "flex", md: "none" }}
>
<IconButton <IconButton
onClick={onToggle} onClick={onToggle}
icon={ icon={
isOpen ? <CloseIcon w={3} h={3} /> : <HamburgerIcon w={5} h={5} /> isOpen ? <CloseIcon w={3} h={3} /> : <HamburgerIcon w={5} h={5} />
} }
variant={'ghost'} variant={"ghost"}
aria-label={'Toggle Navigation'} aria-label={"Toggle Navigation"}
/> />
</Flex> </Flex>
<Flex flex={{ base: 1 }} justify={{ base: 'center', md: 'start' }}> <Flex flex={{ base: 1 }} justify={{ base: "center", md: "start" }}>
<Text <Text
textAlign={useBreakpointValue({ base: 'center', md: 'left' })} textAlign={useBreakpointValue({ base: "center", md: "left" })}
fontFamily={'heading'} fontFamily={"heading"}
color={useColorModeValue('gray.800', 'white')}> color={useColorModeValue("gray.800", "white")}
>
Cath.exe Cath.exe
</Text> </Text>
<Flex display={{ base: 'none', md: 'flex' }} ml={10}> <Flex display={{ base: "none", md: "flex" }} ml={10}>
<DesktopNav /> <DesktopNav />
</Flex> </Flex>
</Flex> </Flex>
<Stack <Stack
flex={{ base: 1, md: 0 }} flex={{ base: 1, md: 0 }}
justify={'flex-end'} justify={"flex-end"}
direction={'row'} direction={"row"}
spacing={6}> spacing={6}
>
<Button <Button
as={'a'} as={"a"}
fontSize={'sm'} fontSize={"sm"}
fontWeight={400} fontWeight={400}
variant={'link'} variant={"link"}
onClick={session ? ()=>{signOut()} : ()=>{signIn()}}> onClick={
{session ? 'Sign Out' : 'Sign In'} session
? () => {
signOut();
}
: () => {
signIn();
}
}
>
{session ? "Sign Out" : "Sign In"}
</Button> </Button>
</Stack> </Stack>
</Flex> </Flex>
@ -90,26 +103,27 @@ export default function WithSubnavigation() {
} }
const DesktopNav = () => { const DesktopNav = () => {
const linkColor = useColorModeValue('gray.600', 'gray.200'); const linkColor = useColorModeValue("gray.600", "gray.200");
const linkHoverColor = useColorModeValue('gray.800', 'white'); const linkHoverColor = useColorModeValue("gray.800", "white");
const popoverContentBgColor = useColorModeValue('white', 'gray.800'); const popoverContentBgColor = useColorModeValue("white", "gray.800");
return ( return (
<Stack direction={'row'} spacing={4}> <Stack direction={"row"} spacing={4}>
{NAV_ITEMS.map((navItem) => ( {NAV_ITEMS.map(navItem => (
<Box key={navItem.label}> <Box key={navItem.label}>
<Popover trigger={'hover'} placement={'bottom-start'}> <Popover trigger={"hover"} placement={"bottom-start"}>
<PopoverTrigger> <PopoverTrigger>
<Link <Link
p={2} p={2}
href={navItem.href ?? '#'} href={navItem.href ?? "#"}
fontSize={'sm'} fontSize={"sm"}
fontWeight={500} fontWeight={500}
color={linkColor} color={linkColor}
_hover={{ _hover={{
textDecoration: 'none', textDecoration: "none",
color: linkHoverColor, color: linkHoverColor,
}}> }}
>
{navItem.label} {navItem.label}
</Link> </Link>
</PopoverTrigger> </PopoverTrigger>
@ -117,13 +131,14 @@ const DesktopNav = () => {
{navItem.children && ( {navItem.children && (
<PopoverContent <PopoverContent
border={0} border={0}
boxShadow={'xl'} boxShadow={"xl"}
bg={popoverContentBgColor} bg={popoverContentBgColor}
p={4} p={4}
rounded={'xl'} rounded={"xl"}
minW={'sm'}> minW={"sm"}
>
<Stack> <Stack>
{navItem.children.map((child) => ( {navItem.children.map(child => (
<DesktopSubNav key={child.label} {...child} /> <DesktopSubNav key={child.label} {...child} />
))} ))}
</Stack> </Stack>
@ -140,30 +155,33 @@ const DesktopSubNav = ({ label, href, subLabel }) => {
return ( return (
<Link <Link
href={href} href={href}
role={'group'} role={"group"}
display={'block'} display={"block"}
p={2} p={2}
rounded={'md'} rounded={"md"}
_hover={{ bg: useColorModeValue('teal.50', 'gray.900') }}> _hover={{ bg: useColorModeValue("teal.50", "gray.900") }}
<Stack direction={'row'} align={'center'}> >
<Stack direction={"row"} align={"center"}>
<Box> <Box>
<Text <Text
transition={'all .3s ease'} transition={"all .3s ease"}
_groupHover={{ color: 'teal.200' }} _groupHover={{ color: "teal.200" }}
fontWeight={500}> fontWeight={500}
>
{label} {label}
</Text> </Text>
<Text fontSize={'sm'}>{subLabel}</Text> <Text fontSize={"sm"}>{subLabel}</Text>
</Box> </Box>
<Flex <Flex
transition={'all .3s ease'} transition={"all .3s ease"}
transform={'translateX(-10px)'} transform={"translateX(-10px)"}
opacity={0} opacity={0}
_groupHover={{ opacity: '100%', transform: 'translateX(0)' }} _groupHover={{ opacity: "100%", transform: "translateX(0)" }}
justify={'flex-end'} justify={"flex-end"}
align={'center'} align={"center"}
flex={1}> flex={1}
<Icon color={'teal.200'} w={5} h={5} as={ChevronRightIcon} /> >
<Icon color={"teal.200"} w={5} h={5} as={ChevronRightIcon} />
</Flex> </Flex>
</Stack> </Stack>
</Link> </Link>
@ -173,10 +191,11 @@ const DesktopSubNav = ({ label, href, subLabel }) => {
const MobileNav = () => { const MobileNav = () => {
return ( return (
<Stack <Stack
bg={useColorModeValue('white', 'gray.800')} bg={useColorModeValue("white", "gray.800")}
p={4} p={4}
display={{ md: 'none' }}> display={{ md: "none" }}
{NAV_ITEMS.map((navItem) => ( >
{NAV_ITEMS.map(navItem => (
<MobileNavItem key={navItem.label} {...navItem} /> <MobileNavItem key={navItem.label} {...navItem} />
))} ))}
</Stack> </Stack>
@ -191,38 +210,41 @@ const MobileNavItem = ({ label, children, href }) => {
<Flex <Flex
py={2} py={2}
as={Link} as={Link}
href={href ?? '#'} href={href ?? "#"}
justify={'space-between'} justify={"space-between"}
align={'center'} align={"center"}
_hover={{ _hover={{
textDecoration: 'none', textDecoration: "none",
}}> }}
>
<Text <Text
fontWeight={600} fontWeight={600}
color={useColorModeValue('gray.600', 'gray.200')}> color={useColorModeValue("gray.600", "gray.200")}
>
{label} {label}
</Text> </Text>
{children && ( {children && (
<Icon <Icon
as={ChevronDownIcon} as={ChevronDownIcon}
transition={'all .25s ease-in-out'} transition={"all .25s ease-in-out"}
transform={isOpen ? 'rotate(180deg)' : ''} transform={isOpen ? "rotate(180deg)" : ""}
w={6} w={6}
h={6} h={6}
/> />
)} )}
</Flex> </Flex>
<Collapse in={isOpen} animateOpacity style={{ marginTop: '0!important' }}> <Collapse in={isOpen} animateOpacity style={{ marginTop: "0!important" }}>
<Stack <Stack
mt={2} mt={2}
pl={4} pl={4}
borderLeft={1} borderLeft={1}
borderStyle={'solid'} borderStyle={"solid"}
borderColor={useColorModeValue('gray.200', 'gray.700')} borderColor={useColorModeValue("gray.200", "gray.700")}
align={'start'}> align={"start"}
>
{children && {children &&
children.map((child) => ( children.map(child => (
<Link key={child.label} py={2} href={child.href}> <Link key={child.label} py={2} href={child.href}>
{child.label} {child.label}
</Link> </Link>
@ -233,29 +255,28 @@ const MobileNavItem = ({ label, children, href }) => {
); );
}; };
const NAV_ITEMS = [ const NAV_ITEMS = [
{ {
label: 'Home', label: "Home",
href: '/', href: "/",
}, },
{ {
label: 'Control Panel', label: "Control Panel",
children: [ children: [
{ {
label: 'Main', label: "Main",
subLabel: 'Control Everything', subLabel: "Control Everything",
href: '/controlpanel', href: "/controlpanel",
}, },
{ {
label: 'Commands', label: "Commands",
subLabel: 'Control Caths commands', subLabel: "Control Caths commands",
href: '/controlpanel/commands', href: "/controlpanel/commands",
}, },
], ],
}, },
{ {
label: 'Coming soon...', label: "Coming soon...",
href: '#', href: "#",
}, },
]; ];

16
components/Nav/Logo.js
View file

@ -2,11 +2,11 @@ import React from "react";
import { Box, Text } from "@chakra-ui/react"; import { Box, Text } from "@chakra-ui/react";
export default function Logo(props) { export default function Logo(props) {
return ( return (
<Box {...props}> <Box {...props}>
<Text fontSize="lg" fontWeight="bold"> <Text fontSize="lg" fontWeight="bold">
Logo Logo
</Text> </Text>
</Box> </Box>
); );
} }

3
pages/404.js
View file

@ -1,12 +1,11 @@
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> <pre>404 - Page Not Found</pre>
</> </>
); );
} }

4
pages/_app.js
View file

@ -7,7 +7,7 @@ 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 }) { export default function MyApp({ Component, pageProps }) {
const [session, loading] = useSession(); const [session, loading] = useSession();
return ( return (
@ -37,5 +37,3 @@ function MyApp({ Component, pageProps }) {
</Provider> </Provider>
); );
} }
export default MyApp;

12
pages/controlpanel/commands.js
View file

@ -33,15 +33,9 @@ function Controller({ initialState }) {
function processOnline(status) { function processOnline(status) {
console.log(status); console.log(status);
if (status == "online") { if (status == "online") return true;
return true; if (status == "offline") return false;
} if (status == "maintenance") return false;
if (status == "offline") {
return false;
}
if (status == "maintenance") {
return false;
}
} }
function Commands() { function Commands() {

1
pages/index.js
View file

@ -24,7 +24,6 @@ export default function Home() {
}; };
const [session, loading] = useSession(); const [session, loading] = useSession();
return ( return (
<> <>
{!session && ( {!session && (

BIN
public/favicon.ico
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 15 KiB

4
public/vercel.svg
View file

@ -1,4 +0,0 @@
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.1 KiB

0
styles/Home.module.css
View file

14
styles/HomeCard.module.css
View file

@ -1,10 +1,12 @@
.home-card { .home-card {
width: 300px; width: 300px;
height: 150px; height: 150px;
background: #1f1b24; background: #1f1b24;
border: 1px solid blue; border: 1px solid blue;
} }
.title {} /* .title {
}
.desc {} .desc {
} */

10
styles/globals.css
View file

@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@600&family=Poppins:wght@500&display=swap'); @import url("https://fonts.googleapis.com/css2?family=Epilogue:wght@600&family=Poppins:wght@500&display=swap");
* { * {
color: #fff; color: #fff;
@ -8,8 +8,8 @@ html,
body { body {
padding: 0; padding: 0;
margin: 0; margin: 0;
font-family: 'Epilogue',-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, font-family: "Epilogue", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
background: #1a202c; background: #1a202c;
} }
@ -22,7 +22,7 @@ body {
.page-container { .page-container {
padding: 2px; padding: 2px;
margin: 2px; margin: 2px;
} }
} }
a { a {
@ -45,4 +45,4 @@ a {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, 350px); grid-template-columns: repeat(auto-fill, 350px);
grid-gap: 10px; grid-gap: 10px;
} }