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

??

Browse source
This commit is contained in:
NK 2023-03-03 16:48:43 +00:00
parent 35f273b3ea
commit cf3dc1e7dd
34 changed files with 1529 additions and 1529 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
.eslintrc
View file

@ -1,7 +1,7 @@
{ {
"extends": ["next", "next/core-web-vitals"], "extends": ["next", "next/core-web-vitals"],
"rules": { "rules": {
"react/no-unescaped-entities": "off", "react/no-unescaped-entities": "off",
"@next/next/no-page-custom-font": "off" "@next/next/no-page-custom-font": "off"
} }
} }

40
.github/ISSUE_TEMPLATE/feature_request.md vendored
View file

@ -1,20 +1,20 @@
--- ---
name: Feature request name: Feature request
about: Suggest an idea for this project about: Suggest an idea for this project
title: '' title: ''
labels: '' labels: ''
assignees: '' assignees: ''
--- ---
**Is your feature request related to a problem? Please describe.** **Is your feature request related to a problem? Please describe.**
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
**Describe the solution you'd like** **Describe the solution you'd like**
A clear and concise description of what you want to happen. A clear and concise description of what you want to happen.
**Describe alternatives you've considered** **Describe alternatives you've considered**
A clear and concise description of any alternative solutions or features you've considered. A clear and concise description of any alternative solutions or features you've considered.
**Additional context** **Additional context**
Add any other context or screenshots about the feature request here. Add any other context or screenshots about the feature request here.

28
.github/workflows/yarn.yml vendored
View file

@ -1,14 +1,14 @@
name: CI name: CI
on: [push] on: [push]
jobs: jobs:
build: build:
name: Build Test name: Build Test
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v2
- uses: borales/actions-yarn@v2.3.0 - uses: borales/actions-yarn@v2.3.0
with: with:
cmd: install # will run `yarn install` command cmd: install # will run `yarn install` command
- uses: borales/actions-yarn@v2.3.0 - uses: borales/actions-yarn@v2.3.0
with: with:
cmd: build # will run `yarn build` command cmd: build # will run `yarn build` command

74
.gitignore vendored
View file

@ -1,37 +1,37 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies # dependencies
/node_modules /node_modules
package-lock.json package-lock.json
yarn.lock yarn.lock
/.pnp /.pnp
.pnp.js .pnp.js
# testing # testing
/coverage /coverage
# next.js # next.js
/.next/ /.next/
/out/ /out/
# production # production
/build /build
# misc # misc
.DS_Store .DS_Store
*.pem *.pem
# debug # debug
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
# local env files # local env files
.env .env
.env.local .env.local
.env.development.local .env.development.local
.env.test.local .env.test.local
.env.production.local .env.production.local
# vercel # vercel
.vercel .vercel

4
.vscode/settings.json vendored
View file

@ -1,3 +1,3 @@
{ {
"git.ignoreLimitWarning": true "git.ignoreLimitWarning": true
} }

18
CONTRIBUTING.md
View file

@ -1,9 +1,9 @@
# Contributing # Contributing
When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change. When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change.
Please note we have a code of conduct, please follow it in all your interactions with the project. Please note we have a code of conduct, please follow it in all your interactions with the project.
## Pull request process ## Pull request process
To contribute to the repository, first make create an issue describing what you will be doing, then fork the repository, make your appropriate changes, then commit. Afterwards, you can make a pull request and (if it passes tests) we will merge it into the main branch To contribute to the repository, first make create an issue describing what you will be doing, then fork the repository, make your appropriate changes, then commit. Afterwards, you can make a pull request and (if it passes tests) we will merge it into the main branch

42
LICENSE
View file

@ -1,21 +1,21 @@
MIT License MIT License
Copyright (c) 2021 Night Kaly Copyright (c) 2021 Night Kaly
Permission is hereby granted, free of charge, to any person obtaining a copy Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions: furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software. copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE. SOFTWARE.

124
README.md
View file

@ -1,62 +1,62 @@
# Cath.gq # Cath.gq
Cath.gq is the dashboard for its parent project, [Cath.exe](https://github.com/night0721/cath.exe) Cath.gq is the dashboard for its parent project, [Cath.exe](https://github.com/night0721/cath.exe)
## Bugs And Feature Requests ## Bugs And Feature Requests
If there is a bug you would wish to report, open a new **issue** and label it as **bug**; these will be high priority changes! If there is a feature you would like to see implemented, open a new **issue** and mark it as an **enhancement**; we'll make sure to get to these! If there is a bug you would wish to report, open a new **issue** and label it as **bug**; these will be high priority changes! If there is a feature you would like to see implemented, open a new **issue** and mark it as an **enhancement**; we'll make sure to get to these!
## Run Locally ## Run Locally
Clone the project Clone the project
```bash ```bash
git clone https://github.com/night0721/cath.gq.git git clone https://github.com/night0721/cath.gq.git
``` ```
Go to the project directory Go to the project directory
```bash ```bash
cd cath.gq cd cath.gq
``` ```
Install dependencies Install dependencies
```bash ```bash
yarn install yarn install
``` ```
Configure environment variables Configure environment variables
.env example .env example
``` ```
DISCORD_ID= DISCORD_ID=
DISCORD_SECRET= DISCORD_SECRET=
DATABASE_URL= DATABASE_URL=
``` ```
Start the server Start the server
```bash ```bash
npm run dev npm run dev
``` ```
## License ## License
[MIT](https://choosealicense.com/licenses/mit/) [MIT](https://choosealicense.com/licenses/mit/)
## Demo ## Demo
[Live](https://cath.gq) [Live](https://cath.gq)
## Authors ## Authors
- [@qt-coder](https://www.github.com/qt-coder) - [@qt-coder](https://www.github.com/qt-coder)

14
chakra_config/theme.js
View file

@ -1,7 +1,7 @@
import { extendTheme, ThemeConfig } from "@chakra-ui/react"; import { extendTheme, ThemeConfig } from "@chakra-ui/react";
const config = { const config = {
initialColorMode: "dark", initialColorMode: "dark",
useSystemColorMode: false, useSystemColorMode: false,
}; };
const theme = extendTheme({ config }); const theme = extendTheme({ config });
export default theme; export default theme;

94
components/AuthButton.js
View file

@ -1,47 +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>
</> </>
)} )}
</> </>
); );
} }

62
components/CTA.js
View file

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

70
components/Card.js
View file

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

40
components/Features/Feature.js
View file

@ -1,20 +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" }} spacing={{ base: "3", md: "6" }}
direction={{ base: "column", md: "row" }} direction={{ base: "column", md: "row" }}
> >
<Box fontSize="6xl">{icon}</Box> <Box fontSize="6xl">{icon}</Box>
<Stack spacing="1"> <Stack spacing="1">
<Text fontWeight="extrabold" fontSize="lg"> <Text fontWeight="extrabold" fontSize="lg">
{title} {title}
</Text> </Text>
<Box color={mode("gray.600", "gray.400")}>{children}</Box> <Box color={mode("gray.600", "gray.400")}>{children}</Box>
</Stack> </Stack>
</Stack> </Stack>
); );
}; };

70
components/Features/Features.js
View file

@ -1,35 +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 { import {
FcDoughnutChart, FcDoughnutChart,
FcMultipleDevices, FcMultipleDevices,
FcPrivacy, FcPrivacy,
FcTimeline, FcTimeline,
} from "react-icons/fc"; } from "react-icons/fc";
import { Feature } from "./Feature"; 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 <SimpleGrid
columns={{ base: 1, md: 2 }} columns={{ base: 1, md: 2 }}
spacingX="10" spacingX="10"
spacingY={{ base: "8", md: "14" }} spacingY={{ base: "8", md: "14" }}
> >
<Feature title="Secure by default" icon={<FcPrivacy />}> <Feature title="Secure by default" icon={<FcPrivacy />}>
Cath will never leak any of your information. Ever. All your data is Cath will never leak any of your information. Ever. All your data is
stored securely on our side. stored securely on our side.
</Feature> </Feature>
<Feature title="Always up to date" icon={<FcTimeline />}> <Feature title="Always up to date" icon={<FcTimeline />}>
Cath is constantly being updated and worked on. Bugs and features, you Cath is constantly being updated and worked on. Bugs and features, you
name them, we do them. name them, we do them.
</Feature> </Feature>
<Feature title="Incredible statistics" icon={<FcDoughnutChart />}> <Feature title="Incredible statistics" icon={<FcDoughnutChart />}>
Amazing server statistics that make tracking your server growth a Amazing server statistics that make tracking your server growth a
breeze. breeze.
</Feature> </Feature>
<Feature title="For everyone" icon={<FcMultipleDevices />}> <Feature title="For everyone" icon={<FcMultipleDevices />}>
No matter who you are, Cath is sure to have a purpose for you. No matter who you are, Cath is sure to have a purpose for you.
</Feature> </Feature>
</SimpleGrid> </SimpleGrid>
</Box> </Box>
); );

16
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>
); );

44
components/Footer/Footer.js
View file

@ -1,22 +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 <Box
as="footer" as="footer"
role="contentinfo" role="contentinfo"
mx="auto" mx="auto"
maxW="7xl" maxW="7xl"
py="12" py="12"
px={{ base: "4", md: "8" }} px={{ base: "4", md: "8" }}
> >
<Stack> <Stack>
<Stack direction="row" spacing="4" align="center" justify="space-between"> <Stack direction="row" spacing="4" align="center" justify="space-between">
<SocialMediaLinks /> <SocialMediaLinks />
</Stack> </Stack>
<Copyright alignSelf={{ base: "center", sm: "start" }} /> <Copyright alignSelf={{ base: "center", sm: "start" }} />
</Stack> </Stack>
</Box> </Box>
); );

30
components/Footer/SocialMediaLinks.js
View file

@ -1,15 +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 <IconButton
as="a" as="a"
href="https://github.com/night0721/cath.gq" href="https://github.com/night0721/cath.gq"
aria-label="GitHub" aria-label="GitHub"
icon={<FaGithub fontSize="20px" />} icon={<FaGithub fontSize="20px" />}
target="_empty" target="_empty"
/> />
</ButtonGroup> </ButtonGroup>
); );

216
components/Hero/Hero.js
View file

@ -1,108 +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 Your favorite CODM bot. Cath.exe is packed to the brim with commands
for moderation, stats and of course, CODM. for moderation, stats and of course, CODM.
</chakra.p> </chakra.p>
<Stack <Stack
direction={{ base: "column", sm: "row" }} direction={{ base: "column", sm: "row" }}
mb={{ base: 4, md: 8 }} mb={{ base: 4, md: 8 }}
spacing={2} spacing={2}
justifyContent={{ sm: "left", md: "center" }} justifyContent={{ sm: "left", md: "center" }}
> >
<Button <Button
as="a" as="a"
variant="solid" variant="solid"
colorScheme="blue" colorScheme="blue"
display="inline-flex" display="inline-flex"
alignItems="center" alignItems="center"
justifyContent="center" justifyContent="center"
w={{ base: "full", sm: "auto" }} w={{ base: "full", sm: "auto" }}
mb={{ base: 2, sm: 0 }} mb={{ base: 2, sm: 0 }}
href={ href={
"https://discord.com/api/oauth2/authorize?client_id=800966959268364288&permissions=4231314550&scope=bot%20applications.commands" "https://discord.com/api/oauth2/authorize?client_id=800966959268364288&permissions=4231314550&scope=bot%20applications.commands"
} }
size="lg" size="lg"
> >
Invite Cath Invite Cath
<Icon boxSize={4} ml={1} viewBox="0 0 20 20" fill="currentColor"> <Icon boxSize={4} ml={1} viewBox="0 0 20 20" fill="currentColor">
<path <path
fillRule="evenodd" fillRule="evenodd"
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" 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"
clipRule="evenodd" clipRule="evenodd"
/> />
</Icon> </Icon>
</Button> </Button>
<Button <Button
as="a" as="a"
colorScheme="gray" colorScheme="gray"
display="inline-flex" display="inline-flex"
alignItems="center" alignItems="center"
justifyContent="center" justifyContent="center"
w={{ base: "full", sm: "auto" }} w={{ base: "full", sm: "auto" }}
mb={{ base: 2, sm: 0 }} mb={{ base: 2, sm: 0 }}
onClick={() => { onClick={() => {
signIn(); signIn();
}} }}
size="lg" size="lg"
> >
Sign Up Sign Up
<Icon boxSize={4} ml={1} viewBox="0 0 20 20" fill="currentColor"> <Icon boxSize={4} ml={1} viewBox="0 0 20 20" fill="currentColor">
<path <path
fillRule="evenodd" fillRule="evenodd"
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" 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" clipRule="evenodd"
/> />
</Icon> </Icon>
</Button> </Button>
</Stack> </Stack>
</Box> </Box>
</Box> </Box>
); );
}; };
export default Hero; export default Hero;

564
components/Nav/Header.js
View file

@ -1,282 +1,282 @@
import { import {
Box, Box,
Flex, Flex,
Text, Text,
IconButton, IconButton,
Button, Button,
Stack, Stack,
Collapse, Collapse,
Icon, Icon,
Link, Link,
Popover, Popover,
PopoverTrigger, PopoverTrigger,
PopoverContent, PopoverContent,
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={ onClick={
session session
? () => { ? () => {
signOut(); signOut();
} }
: () => { : () => {
signIn(); signIn();
} }
} }
> >
{session ? "Sign Out" : "Sign In"} {session ? "Sign Out" : "Sign In"}
</Button> </Button>
</Stack> </Stack>
</Flex> </Flex>
<Collapse in={isOpen} animateOpacity> <Collapse in={isOpen} animateOpacity>
<MobileNav /> <MobileNav />
</Collapse> </Collapse>
</Box> </Box>
); );
} }
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>
{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>
</PopoverContent> </PopoverContent>
)} )}
</Popover> </Popover>
</Box> </Box>
))} ))}
</Stack> </Stack>
); );
}; };
const DesktopSubNav = ({ label, href, subLabel }) => { 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>
); );
}; };
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>
); );
}; };
const MobileNavItem = ({ label, children, href }) => { const MobileNavItem = ({ label, children, href }) => {
const { isOpen, onToggle } = useDisclosure(); const { isOpen, onToggle } = useDisclosure();
return ( return (
<Stack spacing={4} onClick={children && onToggle}> <Stack spacing={4} onClick={children && onToggle}>
<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>
))} ))}
</Stack> </Stack>
</Collapse> </Collapse>
</Stack> </Stack>
); );
}; };
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: "#",
}, },
]; ];

24
components/Nav/Logo.js
View file

@ -1,12 +1,12 @@
import React from "react"; 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>
); );
} }

360
components/Sidebar/Sidebar.js
View file

@ -1,180 +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 ( return (
<Flex <Flex
align="center" align="center"
px="4" px="4"
pl="4" pl="4"
py="3" py="3"
cursor="pointer" cursor="pointer"
color={useColorModeValue("inherit", "gray.400")} color={useColorModeValue("inherit", "gray.400")}
_hover={{ _hover={{
bg: useColorModeValue("gray.100", "gray.900"), bg: useColorModeValue("gray.100", "gray.900"),
color: useColorModeValue("gray.900", "gray.200"), color: useColorModeValue("gray.900", "gray.200"),
}} }}
role="group" role="group"
fontWeight="semibold" fontWeight="semibold"
transition=".15s ease" transition=".15s ease"
{...rest} {...rest}
> >
{icon && ( {icon && (
<Icon <Icon
mr="2" mr="2"
boxSize="4" boxSize="4"
_groupHover={{ _groupHover={{
color: "gray.600", color: "gray.600",
}} }}
as={icon} as={icon}
/> />
)} )}
{children} {children}
</Flex> </Flex>
); );
}; };
const SidebarContent = props => ( const SidebarContent = props => (
<Box <Box
as="nav" as="nav"
pos="fixed" pos="fixed"
top="0" top="0"
left="0" left="0"
zIndex="sticky" zIndex="sticky"
h="full" h="full"
pb="10" pb="10"
overflowX="hidden" overflowX="hidden"
overflowY="auto" overflowY="auto"
bg={useColorModeValue("white", "gray.800")} bg={useColorModeValue("white", "gray.800")}
borderColor={useColorModeValue("inherit", "gray.700")} borderColor={useColorModeValue("inherit", "gray.700")}
borderRightWidth="1px" borderRightWidth="1px"
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"
ml="2" ml="2"
color={useColorModeValue("brand.500", "white")} color={useColorModeValue("brand.500", "white")}
fontWeight="semibold" fontWeight="semibold"
> >
Cath.exe Cath.exe
</Text> </Text>
</Flex> </Flex>
</Link> </Link>
<Flex <Flex
direction="column" direction="column"
as="nav" as="nav"
fontSize="sm" fontSize="sm"
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}>
Control Panel Control Panel
<Icon <Icon
as={MdKeyboardArrowRight} as={MdKeyboardArrowRight}
ml="auto" ml="auto"
transform={integrations.isOpen && "rotate(90deg)"} transform={integrations.isOpen && "rotate(90deg)"}
/> />
</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>
); );
return ( return (
<Box <Box
as="section" as="section"
bg={useColorModeValue("gray.50", "gray.700")} bg={useColorModeValue("gray.50", "gray.700")}
minH="100vh" minH="100vh"
> >
<SidebarContent display={{ base: "none", md: "unset" }} /> <SidebarContent display={{ base: "none", md: "unset" }} />
<Drawer <Drawer
isOpen={sidebar.isOpen} isOpen={sidebar.isOpen}
onClose={sidebar.onClose} onClose={sidebar.onClose}
placement="left" placement="left"
> >
<DrawerOverlay /> <DrawerOverlay />
<DrawerContent> <DrawerContent>
<SidebarContent w="full" borderRight="none" /> <SidebarContent w="full" borderRight="none" />
</DrawerContent> </DrawerContent>
</Drawer> </Drawer>
<Box ml={{ base: 0, md: 60 }} transition=".3s ease"> <Box ml={{ base: 0, md: 60 }} transition=".3s ease">
<Flex <Flex
as="header" as="header"
align="center" align="center"
justify="space-between" justify="space-between"
w="full" w="full"
px="4" px="4"
bg={useColorModeValue("white", "gray.800")} bg={useColorModeValue("white", "gray.800")}
borderBottomWidth="1px" borderBottomWidth="1px"
borderColor={useColorModeValue("inherit", "gray.700")} borderColor={useColorModeValue("inherit", "gray.700")}
h="14" h="14"
> >
<IconButton <IconButton
aria-label="Menu" aria-label="Menu"
display={{ base: "inline-flex", md: "none" }} display={{ base: "inline-flex", md: "none" }}
onClick={sidebar.onOpen} onClick={sidebar.onOpen}
icon={<FiMenu />} icon={<FiMenu />}
size="sm" size="sm"
/> />
<Flex w="96"></Flex> <Flex w="96"></Flex>
<Flex align="center"> <Flex align="center">
<Icon color="gray.500" as={FaBell} cursor="pointer" /> <Icon color="gray.500" as={FaBell} cursor="pointer" />
<Avatar ml="4" size="sm" name="anubra266" src="" cursor="pointer" /> <Avatar 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>
</Box> </Box>
); );
} }

162
components/StatCard.js
View file

@ -1,81 +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 <MotionStatGroup
display="flex" display="flex"
flexDirection="column" flexDirection="column"
style={{ gap: "10px" }} style={{ gap: "10px" }}
variants={container} variants={container}
> >
<MotionStat <MotionStat
background="gray.900" background="gray.900"
width={300} width={300}
height={150} height={150}
p="5" p="5"
borderRadius="15px" borderRadius="15px"
flexShrink={1} flexShrink={1}
variants={item} variants={item}
> >
<StatLabel>User Growth</StatLabel> <StatLabel>User Growth</StatLabel>
<StatNumber>77</StatNumber> <StatNumber>77</StatNumber>
<StatHelpText> <StatHelpText>
<StatArrow type="increase" /> <StatArrow type="increase" />
11.36% 11.36%
</StatHelpText> </StatHelpText>
</MotionStat> </MotionStat>
<MotionStat <MotionStat
background="gray.900" background="gray.900"
width={300} width={300}
height={150} height={150}
p="5" p="5"
borderRadius="15px" borderRadius="15px"
flexShrink={1} flexShrink={1}
variants={item} 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;

334
components/Testimonials/Testimonials.js
View file

@ -1,167 +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: "Remarkable", content: "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: "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: "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: "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",
}, },
]; ];
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 <Flex
direction={"column"} direction={"column"}
textAlign={"left"} textAlign={"left"}
justifyContent={"space-between"} justifyContent={"space-between"}
> >
<chakra.p fontWeight={"medium"} fontSize={"15px"} pb={4}> <chakra.p fontWeight={"medium"} 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 fontWeight={"medium"} color={"gray.500"}> <chakra.span 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>
); );
} }
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{" "} See why over{" "}
<chakra.strong color={useColorModeValue("gray.700", "gray.50")}> <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} />
))} ))}
</SimpleGrid> </SimpleGrid>
</Flex> </Flex>
); );
} }

6
next.config.js
View file

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

22
pages/404.js
View file

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

32
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,
}); });

50
pages/api/skyblock.js
View file

@ -1,25 +1,25 @@
const {getItemNetworth} = require("skyhelper-networth"); const {getItemNetworth} = require("skyhelper-networth");
const nbt = require("prismarine-nbt"); const nbt = require("prismarine-nbt");
const parseNbt = require("util").promisify(nbt.parse); const parseNbt = require("util").promisify(nbt.parse);
async function decodeData(buffer) { async function decodeData(buffer) {
const parsedNbt = await parseNbt(Buffer.from(buffer, "base64")); const parsedNbt = await parseNbt(Buffer.from(buffer, "base64"));
return nbt.simplify(parsedNbt); return nbt.simplify(parsedNbt);
} }
let dat; let dat;
export default async function handler(req, res) { export default async function handler(req, res) {
if (req.method == "GET") { if (req.method == "GET") {
try { try {
dat = JSON.parse(req.body).ByteData; dat = JSON.parse(req.body).ByteData;
} catch (e) { } catch (e) {
dat = req.body.ByteData; dat = req.body.ByteData;
} }
if (dat == undefined) if (dat == undefined)
res.status(400).json({error: "ByteData is undefined"}); res.status(400).json({error: "ByteData is undefined"});
const data = await getItemNetworth((await decodeData(dat)).i[0], { const data = await getItemNetworth((await decodeData(dat)).i[0], {
cache: true, cache: true,
}); });
res.status(200).json(data); res.status(200).json(data);
} else { } else {
res.status(400).json({error: "This endpoint only accepts GET requests"}); res.status(400).json({error: "This endpoint only accepts GET requests"});
} }
} }

162
pages/controlpanel/index.js
View file

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

18
pages/discord.js
View file

@ -1,9 +1,9 @@
import {useRouter} from "next/router"; import {useRouter} from "next/router";
import {useEffect} from "react"; import {useEffect} from "react";
export default function Discord() { export default function Discord() {
const page = useRouter(); const page = useRouter();
useEffect(() => { useEffect(() => {
page.push("http://discord.gg/SbQHChmGcp"); page.push("http://discord.gg/SbQHChmGcp");
}, []); }, []);
return () => null; return () => null;
} }

18
pages/github.js
View file

@ -1,9 +1,9 @@
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useEffect } from "react"; import { useEffect } from "react";
export default function Github() { export default function Github() {
const page = useRouter(); const page = useRouter();
useEffect(() => { useEffect(() => {
page.push("http://github.com/night0721"); page.push("http://github.com/night0721");
}, []); }, []);
return () => null; return () => null;
} }

168
pages/index.js
View file

@ -1,84 +1,84 @@
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: {
opacity: 1, opacity: 1,
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> <Text fontSize="4xl">Welcome {session.user.name}!</Text>
<motion.div <motion.div
className="grid" className="grid"
variants={container} variants={container}
initial="hidden" initial="hidden"
animate="visible" animate="visible"
exit={{ opacity: 0 }} exit={{ opacity: 0 }}
> >
<Card <Card
title="commands" title="commands"
desc="lorem ipsum dolor sit amet" desc="lorem ipsum dolor sit amet"
link="/controlpanel/commands" link="/controlpanel/commands"
/> />
<Card <Card
title="commands" title="commands"
desc="lorem ipsum dolor sit amet" desc="lorem ipsum dolor sit amet"
link="/controlpanel/commands" link="/controlpanel/commands"
/> />
<Card <Card
title="commands" title="commands"
desc="lorem ipsum dolor sit amet" desc="lorem ipsum dolor sit amet"
link="/controlpanel/commands" link="/controlpanel/commands"
/> />
<Card <Card
title="commands" title="commands"
desc="lorem ipsum dolor sit amet" desc="lorem ipsum dolor sit amet"
link="/controlpanel/commands" link="/controlpanel/commands"
/> />
<Card <Card
title="commands" title="commands"
desc="lorem ipsum dolor sit amet" desc="lorem ipsum dolor sit amet"
link="/controlpanel/commands" link="/controlpanel/commands"
/> />
<Card <Card
title="commands" title="commands"
desc="lorem ipsum dolor sit amet" desc="lorem ipsum dolor sit amet"
link="/controlpanel/commands" link="/controlpanel/commands"
/> />
<StatCard /> <StatCard />
</motion.div> </motion.div>
</> </>
)} )}
</> </>
); );
} }

18
pages/yt.js
View file

@ -1,9 +1,9 @@
import {useRouter} from "next/router"; import {useRouter} from "next/router";
import {useEffect} from "react"; import {useEffect} from "react";
export default function Youtube() { export default function Youtube() {
const page = useRouter(); const page = useRouter();
useEffect(() => { useEffect(() => {
page.push("http://youtube.com/Kirito01"); page.push("http://youtube.com/Kirito01");
}, []); }, []);
return () => null; return () => null;
} }

24
styles/HomeCard.module.css
View file

@ -1,12 +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 {
} */ } */

96
styles/globals.css
View file

@ -1,48 +1,48 @@
@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;
} }
html, html,
body { body {
padding: 0; padding: 0;
margin: 0; margin: 0;
font-family: "Epilogue", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, font-family: "Epilogue", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Oxygen, 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;
} }
.page-container { .page-container {
padding: 2vw; padding: 2vw;
margin: 2vw; margin: 2vw;
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.page-container { .page-container {
padding: 2px; padding: 2px;
margin: 2px; margin: 2px;
} }
} }
a { a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
.flex { .flex {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.grid { .grid {
margin: 50px; margin: 50px;
margin-top: 50px; margin-top: 50px;
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, 350px); grid-template-columns: repeat(auto-fill, 350px);
grid-gap: 10px; grid-gap: 10px;
} }