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 { Text, Flex, Button } from "@chakra-ui/react";
import { motion } from "framer-motion";
const MotionFlex = motion(Flex);
const item = {
hidden: { y: 20, opacity: 0 },
visible: {
@ -12,8 +10,7 @@ const item = {
opacity: 1,
},
};
function Card({ title, desc, link }) {
export default function Card({ title, desc, link }) {
return (
<Link href={link}>
<MotionFlex
@ -36,5 +33,3 @@ function Card({ title, desc, link }) {
</Link>
);
}
export default Card;

20
components/Features/Feature.js
View file

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

32
components/Features/Features.js
View file

@ -1,23 +1,35 @@
import { Box, SimpleGrid } from '@chakra-ui/react'
import * as React from 'react'
import { FcDoughnutChart, FcMultipleDevices, FcPrivacy, FcTimeline } from 'react-icons/fc'
import { Feature } from './Feature'
import { Box, SimpleGrid } from "@chakra-ui/react";
import * as React from "react";
import {
FcDoughnutChart,
FcMultipleDevices,
FcPrivacy,
FcTimeline,
} from "react-icons/fc";
import { Feature } from "./Feature";
export const Features = () => (
<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' }}>
<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" }}
>
<Feature title="Secure by default" icon={<FcPrivacy />}>
Cath will never leak any of your information. Ever. All your data is stored securely on our side.
Cath will never leak any of your information. Ever. All your data is
stored securely on our side.
</Feature>
<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.
Cath is constantly being updated and worked on. Bugs and features, you
name them, we do them.
</Feature>
<Feature title="Incredible statistics" icon={<FcDoughnutChart />}>
Amazing server statistics that make tracking your server growth a breeze.
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>
)
);

8
components/Footer/Copyright.js
View file

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

21
components/Footer/Footer.js
View file

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

18
components/Footer/SocialMediaLinks.js
View file

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

17
components/Hero/Hero.js
View file

@ -9,7 +9,7 @@ import {
Text,
Icon,
} from "@chakra-ui/react";
import { signIn } from 'next-auth/client'
import { signIn } from "next-auth/client";
const Hero = () => {
return (
@ -25,7 +25,7 @@ const Hero = () => {
fontWeight="bold"
lineHeight="none"
letterSpacing={{ base: "normal", md: "tight" }}
color={useColorModeValue("gray.900", 'gray.100')}
color={useColorModeValue("gray.900", "gray.100")}
>
Your favorite{" "}
<Text
@ -43,9 +43,10 @@ const Hero = () => {
px={{ base: 0, lg: 24 }}
mb={6}
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
for moderation, stats and of course, CODM.
</chakra.p>
<Stack
direction={{ base: "column", sm: "row" }}
@ -62,7 +63,9 @@ const Hero = () => {
justifyContent="center"
w={{ base: "full", sm: "auto" }}
mb={{ base: 2, sm: 0 }}
href={"https://discord.com/api/oauth2/authorize?client_id=800966959268364288&permissions=4231314550&scope=bot%20applications.commands"}
href={
"https://discord.com/api/oauth2/authorize?client_id=800966959268364288&permissions=4231314550&scope=bot%20applications.commands"
}
size="lg"
>
Invite Cath
@ -82,7 +85,9 @@ const Hero = () => {
justifyContent="center"
w={{ base: "full", sm: "auto" }}
mb={{ base: 2, sm: 0 }}
onClick={() => { signIn() }}
onClick={() => {
signIn();
}}
size="lg"
>
Sign Up

193
components/Nav/Header.js
View file

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

3
pages/404.js
View file

@ -1,12 +1,11 @@
import Head from "next/head";
export default function Custom404() {
return (
<>
<Head>
<title>404</title>
</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 Sidebar from "../components/Sidebar/Sidebar";
function MyApp({ Component, pageProps }) {
export default function MyApp({ Component, pageProps }) {
const [session, loading] = useSession();
return (
@ -37,5 +37,3 @@ function MyApp({ Component, pageProps }) {
</Provider>
);
}
export default MyApp;

12
pages/controlpanel/commands.js
View file

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

1
pages/index.js
View file

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

6
styles/HomeCard.module.css
View file

@ -5,6 +5,8 @@
border: 1px solid blue;
}
.title {}
/* .title {
}
.desc {}
.desc {
} */

6
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;
@ -8,8 +8,8 @@ html,
body {
padding: 0;
margin: 0;
font-family: 'Epilogue',-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-family: "Epilogue", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
background: #1a202c;
}