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"],
"rules": {
"react/no-unescaped-entities": "off",
"@next/next/no-page-custom-font": "off"
}
}
{
"extends": ["next", "next/core-web-vitals"],
"rules": {
"react/no-unescaped-entities": "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
about: Suggest an idea for this project
title: ''
labels: ''
assignees: ''
---
**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 [...]
**Describe the solution you'd like**
A clear and concise description of what you want to happen.
**Describe alternatives you've considered**
A clear and concise description of any alternative solutions or features you've considered.
**Additional context**
Add any other context or screenshots about the feature request here.
---
name: Feature request
about: Suggest an idea for this project
title: ''
labels: ''
assignees: ''
---
**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 [...]
**Describe the solution you'd like**
A clear and concise description of what you want to happen.
**Describe alternatives you've considered**
A clear and concise description of any alternative solutions or features you've considered.
**Additional context**
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
on: [push]
jobs:
build:
name: Build Test
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: borales/actions-yarn@v2.3.0
with:
cmd: install # will run `yarn install` command
- uses: borales/actions-yarn@v2.3.0
with:
cmd: build # will run `yarn build` command
name: CI
on: [push]
jobs:
build:
name: Build Test
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: borales/actions-yarn@v2.3.0
with:
cmd: install # will run `yarn install` command
- uses: borales/actions-yarn@v2.3.0
with:
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.
# dependencies
/node_modules
package-lock.json
yarn.lock
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
# vercel
.vercel
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
package-lock.json
yarn.lock
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
# 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
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.
## 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
# 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.
Please note we have a code of conduct, please follow it in all your interactions with the project.
## 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

42
LICENSE
View file

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

124
README.md
View file

@ -1,62 +1,62 @@
# Cath.gq
Cath.gq is the dashboard for its parent project, [Cath.exe](https://github.com/night0721/cath.exe)
## 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!
## Run Locally
Clone the project
```bash
git clone https://github.com/night0721/cath.gq.git
```
Go to the project directory
```bash
cd cath.gq
```
Install dependencies
```bash
yarn install
```
Configure environment variables
.env example
```
DISCORD_ID=
DISCORD_SECRET=
DATABASE_URL=
```
Start the server
```bash
npm run dev
```
## License
[MIT](https://choosealicense.com/licenses/mit/)
## Demo
[Live](https://cath.gq)
## Authors
- [@qt-coder](https://www.github.com/qt-coder)
# Cath.gq
Cath.gq is the dashboard for its parent project, [Cath.exe](https://github.com/night0721/cath.exe)
## 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!
## Run Locally
Clone the project
```bash
git clone https://github.com/night0721/cath.gq.git
```
Go to the project directory
```bash
cd cath.gq
```
Install dependencies
```bash
yarn install
```
Configure environment variables
.env example
```
DISCORD_ID=
DISCORD_SECRET=
DATABASE_URL=
```
Start the server
```bash
npm run dev
```
## License
[MIT](https://choosealicense.com/licenses/mit/)
## Demo
[Live](https://cath.gq)
## Authors
- [@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";
const config = {
initialColorMode: "dark",
useSystemColorMode: false,
};
const theme = extendTheme({ config });
export default theme;
import { extendTheme, ThemeConfig } from "@chakra-ui/react";
const config = {
initialColorMode: "dark",
useSystemColorMode: false,
};
const theme = extendTheme({ config });
export default theme;

94
components/AuthButton.js
View file

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

62
components/CTA.js
View file

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

70
components/Card.js
View file

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

40
components/Features/Feature.js
View file

@ -1,20 +1,20 @@
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;
return (
<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>
</Stack>
</Stack>
);
};
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;
return (
<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>
</Stack>
</Stack>
);
};

70
components/Features/Features.js
View file

@ -1,35 +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";
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" }}
>
<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.
</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.
</Feature>
<Feature title="Incredible statistics" icon={<FcDoughnutChart />}>
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>
);
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" }}
>
<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.
</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.
</Feature>
<Feature title="Incredible statistics" icon={<FcDoughnutChart />}>
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>
);

16
components/Footer/Copyright.js
View file

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

44
components/Footer/Footer.js
View file

@ -1,22 +1,22 @@
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" }}
>
<Stack>
<Stack direction="row" spacing="4" align="center" justify="space-between">
<SocialMediaLinks />
</Stack>
<Copyright alignSelf={{ base: "center", sm: "start" }} />
</Stack>
</Box>
);
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" }}
>
<Stack>
<Stack direction="row" spacing="4" align="center" justify="space-between">
<SocialMediaLinks />
</Stack>
<Copyright alignSelf={{ base: "center", sm: "start" }} />
</Stack>
</Box>
);

30
components/Footer/SocialMediaLinks.js
View file

@ -1,15 +1,15 @@
import { ButtonGroup, ButtonGroupProps, IconButton } from "@chakra-ui/react";
import * as React from "react";
import { FaGithub } from "react-icons/fa";
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"
/>
</ButtonGroup>
);
import { ButtonGroup, ButtonGroupProps, IconButton } from "@chakra-ui/react";
import * as React from "react";
import { FaGithub } from "react-icons/fa";
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"
/>
</ButtonGroup>
);

216
components/Hero/Hero.js
View file

@ -1,108 +1,108 @@
import React from "react";
import {
chakra,
Box,
useColorModeValue,
Button,
Stack,
Image,
Text,
Icon,
} from "@chakra-ui/react";
import { signIn } from "next-auth/client";
const Hero = () => {
return (
<Box px={8} py={24} mx="auto">
<Box
w={{ base: "full", md: 11 / 12, xl: 9 / 12 }}
mx="auto"
textAlign={{ base: "left", md: "center" }}
>
<chakra.h1
mb={6}
fontSize={{ base: "4xl", md: "6xl" }}
fontWeight="bold"
lineHeight="none"
letterSpacing={{ base: "normal", md: "tight" }}
color={useColorModeValue("gray.900", "gray.100")}
>
Your favorite{" "}
<Text
display={{ base: "block", lg: "inline" }}
w="full"
bgClip="text"
bgGradient="linear(to-r, rgba(0,76,213,1) 0%, rgba(0,99,255,1) 50%, rgba(0,183,255,1) 100%)"
fontWeight="extrabold"
>
CODM
</Text>{" "}
bot.
</chakra.h1>
<chakra.p
px={{ base: 0, lg: 24 }}
mb={6}
fontSize={{ base: "lg", md: "xl" }}
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.
</chakra.p>
<Stack
direction={{ base: "column", sm: "row" }}
mb={{ base: 4, md: 8 }}
spacing={2}
justifyContent={{ sm: "left", md: "center" }}
>
<Button
as="a"
variant="solid"
colorScheme="blue"
display="inline-flex"
alignItems="center"
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"
}
size="lg"
>
Invite Cath
<Icon boxSize={4} ml={1} viewBox="0 0 20 20" fill="currentColor">
<path
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"
clipRule="evenodd"
/>
</Icon>
</Button>
<Button
as="a"
colorScheme="gray"
display="inline-flex"
alignItems="center"
justifyContent="center"
w={{ base: "full", sm: "auto" }}
mb={{ base: 2, sm: 0 }}
onClick={() => {
signIn();
}}
size="lg"
>
Sign Up
<Icon boxSize={4} ml={1} viewBox="0 0 20 20" fill="currentColor">
<path
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"
clipRule="evenodd"
/>
</Icon>
</Button>
</Stack>
</Box>
</Box>
);
};
export default Hero;
import React from "react";
import {
chakra,
Box,
useColorModeValue,
Button,
Stack,
Image,
Text,
Icon,
} from "@chakra-ui/react";
import { signIn } from "next-auth/client";
const Hero = () => {
return (
<Box px={8} py={24} mx="auto">
<Box
w={{ base: "full", md: 11 / 12, xl: 9 / 12 }}
mx="auto"
textAlign={{ base: "left", md: "center" }}
>
<chakra.h1
mb={6}
fontSize={{ base: "4xl", md: "6xl" }}
fontWeight="bold"
lineHeight="none"
letterSpacing={{ base: "normal", md: "tight" }}
color={useColorModeValue("gray.900", "gray.100")}
>
Your favorite{" "}
<Text
display={{ base: "block", lg: "inline" }}
w="full"
bgClip="text"
bgGradient="linear(to-r, rgba(0,76,213,1) 0%, rgba(0,99,255,1) 50%, rgba(0,183,255,1) 100%)"
fontWeight="extrabold"
>
CODM
</Text>{" "}
bot.
</chakra.h1>
<chakra.p
px={{ base: 0, lg: 24 }}
mb={6}
fontSize={{ base: "lg", md: "xl" }}
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.
</chakra.p>
<Stack
direction={{ base: "column", sm: "row" }}
mb={{ base: 4, md: 8 }}
spacing={2}
justifyContent={{ sm: "left", md: "center" }}
>
<Button
as="a"
variant="solid"
colorScheme="blue"
display="inline-flex"
alignItems="center"
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"
}
size="lg"
>
Invite Cath
<Icon boxSize={4} ml={1} viewBox="0 0 20 20" fill="currentColor">
<path
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"
clipRule="evenodd"
/>
</Icon>
</Button>
<Button
as="a"
colorScheme="gray"
display="inline-flex"
alignItems="center"
justifyContent="center"
w={{ base: "full", sm: "auto" }}
mb={{ base: 2, sm: 0 }}
onClick={() => {
signIn();
}}
size="lg"
>
Sign Up
<Icon boxSize={4} ml={1} viewBox="0 0 20 20" fill="currentColor">
<path
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"
clipRule="evenodd"
/>
</Icon>
</Button>
</Stack>
</Box>
</Box>
);
};
export default Hero;

564
components/Nav/Header.js
View file

@ -1,282 +1,282 @@
import {
Box,
Flex,
Text,
IconButton,
Button,
Stack,
Collapse,
Icon,
Link,
Popover,
PopoverTrigger,
PopoverContent,
useColorModeValue,
useBreakpointValue,
useDisclosure,
} 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";
export default function WithSubnavigation() {
const { isOpen, onToggle } = useDisclosure();
const [session, loading] = useSession();
return (
<Box>
<Flex
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"}
>
<Flex
flex={{ base: 1, md: "auto" }}
ml={{ base: -2 }}
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"}
/>
</Flex>
<Flex flex={{ base: 1 }} justify={{ base: "center", md: "start" }}>
<Text
textAlign={useBreakpointValue({ base: "center", md: "left" })}
fontFamily={"heading"}
color={useColorModeValue("gray.800", "white")}
>
Cath.exe
</Text>
<Flex display={{ base: "none", md: "flex" }} ml={10}>
<DesktopNav />
</Flex>
</Flex>
<Stack
flex={{ base: 1, md: 0 }}
justify={"flex-end"}
direction={"row"}
spacing={6}
>
<Button
as={"a"}
fontSize={"sm"}
fontWeight={400}
variant={"link"}
onClick={
session
? () => {
signOut();
}
: () => {
signIn();
}
}
>
{session ? "Sign Out" : "Sign In"}
</Button>
</Stack>
</Flex>
<Collapse in={isOpen} animateOpacity>
<MobileNav />
</Collapse>
</Box>
);
}
const DesktopNav = () => {
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 => (
<Box key={navItem.label}>
<Popover trigger={"hover"} placement={"bottom-start"}>
<PopoverTrigger>
<Link
p={2}
href={navItem.href ?? "#"}
fontSize={"sm"}
fontWeight={500}
color={linkColor}
_hover={{
textDecoration: "none",
color: linkHoverColor,
}}
>
{navItem.label}
</Link>
</PopoverTrigger>
{navItem.children && (
<PopoverContent
border={0}
boxShadow={"xl"}
bg={popoverContentBgColor}
p={4}
rounded={"xl"}
minW={"sm"}
>
<Stack>
{navItem.children.map(child => (
<DesktopSubNav key={child.label} {...child} />
))}
</Stack>
</PopoverContent>
)}
</Popover>
</Box>
))}
</Stack>
);
};
const DesktopSubNav = ({ label, href, subLabel }) => {
return (
<Link
href={href}
role={"group"}
display={"block"}
p={2}
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}
>
{label}
</Text>
<Text fontSize={"sm"}>{subLabel}</Text>
</Box>
<Flex
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} />
</Flex>
</Stack>
</Link>
);
};
const MobileNav = () => {
return (
<Stack
bg={useColorModeValue("white", "gray.800")}
p={4}
display={{ md: "none" }}
>
{NAV_ITEMS.map(navItem => (
<MobileNavItem key={navItem.label} {...navItem} />
))}
</Stack>
);
};
const MobileNavItem = ({ label, children, href }) => {
const { isOpen, onToggle } = useDisclosure();
return (
<Stack spacing={4} onClick={children && onToggle}>
<Flex
py={2}
as={Link}
href={href ?? "#"}
justify={"space-between"}
align={"center"}
_hover={{
textDecoration: "none",
}}
>
<Text
fontWeight={600}
color={useColorModeValue("gray.600", "gray.200")}
>
{label}
</Text>
{children && (
<Icon
as={ChevronDownIcon}
transition={"all .25s ease-in-out"}
transform={isOpen ? "rotate(180deg)" : ""}
w={6}
h={6}
/>
)}
</Flex>
<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"}
>
{children &&
children.map(child => (
<Link key={child.label} py={2} href={child.href}>
{child.label}
</Link>
))}
</Stack>
</Collapse>
</Stack>
);
};
const NAV_ITEMS = [
{
label: "Home",
href: "/",
},
{
label: "Control Panel",
children: [
{
label: "Main",
subLabel: "Control Everything",
href: "/controlpanel",
},
{
label: "Commands",
subLabel: "Control Caths commands",
href: "/controlpanel/commands",
},
],
},
{
label: "Coming soon...",
href: "#",
},
];
import {
Box,
Flex,
Text,
IconButton,
Button,
Stack,
Collapse,
Icon,
Link,
Popover,
PopoverTrigger,
PopoverContent,
useColorModeValue,
useBreakpointValue,
useDisclosure,
} 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";
export default function WithSubnavigation() {
const { isOpen, onToggle } = useDisclosure();
const [session, loading] = useSession();
return (
<Box>
<Flex
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"}
>
<Flex
flex={{ base: 1, md: "auto" }}
ml={{ base: -2 }}
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"}
/>
</Flex>
<Flex flex={{ base: 1 }} justify={{ base: "center", md: "start" }}>
<Text
textAlign={useBreakpointValue({ base: "center", md: "left" })}
fontFamily={"heading"}
color={useColorModeValue("gray.800", "white")}
>
Cath.exe
</Text>
<Flex display={{ base: "none", md: "flex" }} ml={10}>
<DesktopNav />
</Flex>
</Flex>
<Stack
flex={{ base: 1, md: 0 }}
justify={"flex-end"}
direction={"row"}
spacing={6}
>
<Button
as={"a"}
fontSize={"sm"}
fontWeight={400}
variant={"link"}
onClick={
session
? () => {
signOut();
}
: () => {
signIn();
}
}
>
{session ? "Sign Out" : "Sign In"}
</Button>
</Stack>
</Flex>
<Collapse in={isOpen} animateOpacity>
<MobileNav />
</Collapse>
</Box>
);
}
const DesktopNav = () => {
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 => (
<Box key={navItem.label}>
<Popover trigger={"hover"} placement={"bottom-start"}>
<PopoverTrigger>
<Link
p={2}
href={navItem.href ?? "#"}
fontSize={"sm"}
fontWeight={500}
color={linkColor}
_hover={{
textDecoration: "none",
color: linkHoverColor,
}}
>
{navItem.label}
</Link>
</PopoverTrigger>
{navItem.children && (
<PopoverContent
border={0}
boxShadow={"xl"}
bg={popoverContentBgColor}
p={4}
rounded={"xl"}
minW={"sm"}
>
<Stack>
{navItem.children.map(child => (
<DesktopSubNav key={child.label} {...child} />
))}
</Stack>
</PopoverContent>
)}
</Popover>
</Box>
))}
</Stack>
);
};
const DesktopSubNav = ({ label, href, subLabel }) => {
return (
<Link
href={href}
role={"group"}
display={"block"}
p={2}
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}
>
{label}
</Text>
<Text fontSize={"sm"}>{subLabel}</Text>
</Box>
<Flex
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} />
</Flex>
</Stack>
</Link>
);
};
const MobileNav = () => {
return (
<Stack
bg={useColorModeValue("white", "gray.800")}
p={4}
display={{ md: "none" }}
>
{NAV_ITEMS.map(navItem => (
<MobileNavItem key={navItem.label} {...navItem} />
))}
</Stack>
);
};
const MobileNavItem = ({ label, children, href }) => {
const { isOpen, onToggle } = useDisclosure();
return (
<Stack spacing={4} onClick={children && onToggle}>
<Flex
py={2}
as={Link}
href={href ?? "#"}
justify={"space-between"}
align={"center"}
_hover={{
textDecoration: "none",
}}
>
<Text
fontWeight={600}
color={useColorModeValue("gray.600", "gray.200")}
>
{label}
</Text>
{children && (
<Icon
as={ChevronDownIcon}
transition={"all .25s ease-in-out"}
transform={isOpen ? "rotate(180deg)" : ""}
w={6}
h={6}
/>
)}
</Flex>
<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"}
>
{children &&
children.map(child => (
<Link key={child.label} py={2} href={child.href}>
{child.label}
</Link>
))}
</Stack>
</Collapse>
</Stack>
);
};
const NAV_ITEMS = [
{
label: "Home",
href: "/",
},
{
label: "Control Panel",
children: [
{
label: "Main",
subLabel: "Control Everything",
href: "/controlpanel",
},
{
label: "Commands",
subLabel: "Control Caths commands",
href: "/controlpanel/commands",
},
],
},
{
label: "Coming soon...",
href: "#",
},
];

24
components/Nav/Logo.js
View file

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

360
components/Sidebar/Sidebar.js
View file

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

162
components/StatCard.js
View file

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

334
components/Testimonials/Testimonials.js
View file

@ -1,167 +1,167 @@
import {
Avatar,
Box,
chakra,
Container,
Flex,
Icon,
SimpleGrid,
useColorModeValue,
} from "@chakra-ui/react";
const testimonials = [
{
name: "John Doe",
role: "Chief Marketing Officer",
content: "Remarkable",
avatar:
"https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80",
},
{
name: "John Doe",
role: "Chief Marketing Officer",
content: "Remarkable",
avatar:
"https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80",
},
{
name: "John Doe",
role: "Chief Marketing Officer",
content: "Remarkable",
avatar:
"https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80",
},
{
name: "John Doe",
role: "Chief Marketing Officer",
content: "Remarkable",
avatar:
"https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80",
},
];
const backgrounds = [
`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='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")`,
];
function TestmonialCard(props) {
const { name, role, content, avatar, index } = props;
return (
<Flex
_hover={{ backgroundColor: "gray.700" }}
boxShadow={"lg"}
maxW={"640px"}
direction={{ base: "column-reverse", md: "row" }}
width={"full"}
rounded={"xl"}
p={10}
justifyContent={"space-between"}
position={"relative"}
bg={"gray.900"}
_after={{
content: '""',
position: "absolute",
height: "21px",
width: "29px",
left: "35px",
top: "-10px",
backgroundSize: "cover",
}}
_before={{
content: '""',
position: "absolute",
zIndex: "-1",
height: "full",
maxW: "640px",
width: "full",
filter: "blur(40px)",
transform: "scale(0.98)",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
top: 0,
left: 0,
backgroundImage: backgrounds[index % 4],
}}
>
<Flex
direction={"column"}
textAlign={"left"}
justifyContent={"space-between"}
>
<chakra.p fontWeight={"medium"} fontSize={"15px"} pb={4}>
{content}
</chakra.p>
<chakra.p fontWeight={"bold"} fontSize={14}>
{name}
<chakra.span fontWeight={"medium"} color={"gray.500"}>
{" "}
- {role}
</chakra.span>
</chakra.p>
</Flex>
<Avatar
src={avatar}
height={"80px"}
width={"80px"}
alignSelf={"center"}
m={{ base: "0 0 35px 0", md: "0 0 0 50px" }}
/>
</Flex>
);
}
export default function GridBlurredBackdrop() {
return (
<Flex
textAlign={"center"}
pt={10}
justifyContent={"center"}
direction={"column"}
width={"full"}
>
<Box width={{ base: "full", sm: "lg", lg: "xl" }} margin={"auto"}>
<chakra.h3
fontWeight={"bold"}
fontSize={20}
textTransform={"uppercase"}
color={"purple.400"}
>
Users love Cath
</chakra.h3>
<chakra.h1
py={5}
fontSize={48}
fontWeight={"bold"}
color={useColorModeValue("gray.700", "gray.50")}
>
You're in good company
</chakra.h1>
<chakra.h2
margin={"auto"}
width={"70%"}
fontWeight={"medium"}
color={useColorModeValue("gray.500", "gray.400")}
>
See why over{" "}
<chakra.strong color={useColorModeValue("gray.700", "gray.50")}>
110000+
</chakra.strong>{" "}
users use Cath in their servers
</chakra.h2>
</Box>
<SimpleGrid
columns={{ base: 1, xl: 2 }}
spacing={"20"}
mt={16}
mx={"auto"}
>
{testimonials.map((cardInfo, index) => (
<TestmonialCard {...cardInfo} key={index} />
))}
</SimpleGrid>
</Flex>
);
}
import {
Avatar,
Box,
chakra,
Container,
Flex,
Icon,
SimpleGrid,
useColorModeValue,
} from "@chakra-ui/react";
const testimonials = [
{
name: "John Doe",
role: "Chief Marketing Officer",
content: "Remarkable",
avatar:
"https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80",
},
{
name: "John Doe",
role: "Chief Marketing Officer",
content: "Remarkable",
avatar:
"https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80",
},
{
name: "John Doe",
role: "Chief Marketing Officer",
content: "Remarkable",
avatar:
"https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80",
},
{
name: "John Doe",
role: "Chief Marketing Officer",
content: "Remarkable",
avatar:
"https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80",
},
];
const backgrounds = [
`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='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")`,
];
function TestmonialCard(props) {
const { name, role, content, avatar, index } = props;
return (
<Flex
_hover={{ backgroundColor: "gray.700" }}
boxShadow={"lg"}
maxW={"640px"}
direction={{ base: "column-reverse", md: "row" }}
width={"full"}
rounded={"xl"}
p={10}
justifyContent={"space-between"}
position={"relative"}
bg={"gray.900"}
_after={{
content: '""',
position: "absolute",
height: "21px",
width: "29px",
left: "35px",
top: "-10px",
backgroundSize: "cover",
}}
_before={{
content: '""',
position: "absolute",
zIndex: "-1",
height: "full",
maxW: "640px",
width: "full",
filter: "blur(40px)",
transform: "scale(0.98)",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
top: 0,
left: 0,
backgroundImage: backgrounds[index % 4],
}}
>
<Flex
direction={"column"}
textAlign={"left"}
justifyContent={"space-between"}
>
<chakra.p fontWeight={"medium"} fontSize={"15px"} pb={4}>
{content}
</chakra.p>
<chakra.p fontWeight={"bold"} fontSize={14}>
{name}
<chakra.span fontWeight={"medium"} color={"gray.500"}>
{" "}
- {role}
</chakra.span>
</chakra.p>
</Flex>
<Avatar
src={avatar}
height={"80px"}
width={"80px"}
alignSelf={"center"}
m={{ base: "0 0 35px 0", md: "0 0 0 50px" }}
/>
</Flex>
);
}
export default function GridBlurredBackdrop() {
return (
<Flex
textAlign={"center"}
pt={10}
justifyContent={"center"}
direction={"column"}
width={"full"}
>
<Box width={{ base: "full", sm: "lg", lg: "xl" }} margin={"auto"}>
<chakra.h3
fontWeight={"bold"}
fontSize={20}
textTransform={"uppercase"}
color={"purple.400"}
>
Users love Cath
</chakra.h3>
<chakra.h1
py={5}
fontSize={48}
fontWeight={"bold"}
color={useColorModeValue("gray.700", "gray.50")}
>
You're in good company
</chakra.h1>
<chakra.h2
margin={"auto"}
width={"70%"}
fontWeight={"medium"}
color={useColorModeValue("gray.500", "gray.400")}
>
See why over{" "}
<chakra.strong color={useColorModeValue("gray.700", "gray.50")}>
110000+
</chakra.strong>{" "}
users use Cath in their servers
</chakra.h2>
</Box>
<SimpleGrid
columns={{ base: 1, xl: 2 }}
spacing={"20"}
mt={16}
mx={"auto"}
>
{testimonials.map((cardInfo, index) => (
<TestmonialCard {...cardInfo} key={index} />
))}
</SimpleGrid>
</Flex>
);
}

6
next.config.js
View file

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

22
pages/404.js
View file

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

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

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

50
pages/api/skyblock.js
View file

@ -1,25 +1,25 @@
const {getItemNetworth} = require("skyhelper-networth");
const nbt = require("prismarine-nbt");
const parseNbt = require("util").promisify(nbt.parse);
async function decodeData(buffer) {
const parsedNbt = await parseNbt(Buffer.from(buffer, "base64"));
return nbt.simplify(parsedNbt);
}
let dat;
export default async function handler(req, res) {
if (req.method == "GET") {
try {
dat = JSON.parse(req.body).ByteData;
} catch (e) {
dat = req.body.ByteData;
}
if (dat == undefined)
res.status(400).json({error: "ByteData is undefined"});
const data = await getItemNetworth((await decodeData(dat)).i[0], {
cache: true,
});
res.status(200).json(data);
} else {
res.status(400).json({error: "This endpoint only accepts GET requests"});
}
}
const {getItemNetworth} = require("skyhelper-networth");
const nbt = require("prismarine-nbt");
const parseNbt = require("util").promisify(nbt.parse);
async function decodeData(buffer) {
const parsedNbt = await parseNbt(Buffer.from(buffer, "base64"));
return nbt.simplify(parsedNbt);
}
let dat;
export default async function handler(req, res) {
if (req.method == "GET") {
try {
dat = JSON.parse(req.body).ByteData;
} catch (e) {
dat = req.body.ByteData;
}
if (dat == undefined)
res.status(400).json({error: "ByteData is undefined"});
const data = await getItemNetworth((await decodeData(dat)).i[0], {
cache: true,
});
res.status(200).json(data);
} else {
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 Card from "../../components/Card";
import Head from "next/head";
import { useSession } from "next-auth/client";
import { Flex, Text, Spacer } from "@chakra-ui/react";
import { motion } from "framer-motion";
const container = {
hidden: { opacity: 1, scale: 0 },
visible: {
opacity: 1,
scale: 1,
transition: {
delayChildren: 0.3,
staggerChildren: 0.2,
},
},
};
const item = {
hidden: { y: 20, opacity: 0 },
visible: {
y: 0,
opacity: 1,
},
};
function Index() {
const [session, loading] = useSession();
return (
<>
{!session && (
<>
<h1>Seems like you&apos;re not logged in. Log in to get started!</h1>
</>
)}
{session && (
<>
<Head>
<title>Cath Control Panel</title>
</Head>
<Text fontSize="4xl" marginBottom="15">
Control Panel
</Text>
<motion.div
variants={container}
initial="hidden"
animate="visible"
exit={{ opacity: 0 }}
>
<Flex direction="column">
<Card
title="Commands"
desc="Control your commands"
link="/controlpanel/commands"
variants={item}
/>
<Spacer />
<Card
title="Commands"
desc="Control your commands"
link="/controlpanel/commands"
variants={item}
/>
<Spacer />
<Card
title="Commands"
desc="Control your commands"
link="/controlpanel/commands"
variants={item}
/>
</Flex>
</motion.div>
</>
)}
</>
);
}
export default Index;
import React from "react";
import Card from "../../components/Card";
import Head from "next/head";
import { useSession } from "next-auth/client";
import { Flex, Text, Spacer } from "@chakra-ui/react";
import { motion } from "framer-motion";
const container = {
hidden: { opacity: 1, scale: 0 },
visible: {
opacity: 1,
scale: 1,
transition: {
delayChildren: 0.3,
staggerChildren: 0.2,
},
},
};
const item = {
hidden: { y: 20, opacity: 0 },
visible: {
y: 0,
opacity: 1,
},
};
function Index() {
const [session, loading] = useSession();
return (
<>
{!session && (
<>
<h1>Seems like you&apos;re not logged in. Log in to get started!</h1>
</>
)}
{session && (
<>
<Head>
<title>Cath Control Panel</title>
</Head>
<Text fontSize="4xl" marginBottom="15">
Control Panel
</Text>
<motion.div
variants={container}
initial="hidden"
animate="visible"
exit={{ opacity: 0 }}
>
<Flex direction="column">
<Card
title="Commands"
desc="Control your commands"
link="/controlpanel/commands"
variants={item}
/>
<Spacer />
<Card
title="Commands"
desc="Control your commands"
link="/controlpanel/commands"
variants={item}
/>
<Spacer />
<Card
title="Commands"
desc="Control your commands"
link="/controlpanel/commands"
variants={item}
/>
</Flex>
</motion.div>
</>
)}
</>
);
}
export default Index;

18
pages/discord.js
View file

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

18
pages/github.js
View file

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

168
pages/index.js
View file

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

18
pages/yt.js
View file

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

24
styles/HomeCard.module.css
View file

@ -1,12 +1,12 @@
.home-card {
width: 300px;
height: 150px;
background: #1f1b24;
border: 1px solid blue;
}
/* .title {
}
.desc {
} */
.home-card {
width: 300px;
height: 150px;
background: #1f1b24;
border: 1px solid blue;
}
/* .title {
}
.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");
* {
color: #fff;
}
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;
background: #1a202c;
}
.page-container {
padding: 2vw;
margin: 2vw;
}
@media screen and (max-width: 600px) {
.page-container {
padding: 2px;
margin: 2px;
}
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
.flex {
display: flex;
justify-content: space-between;
}
.grid {
margin: 50px;
margin-top: 50px;
display: grid;
grid-template-columns: repeat(auto-fill, 350px);
grid-gap: 10px;
}
@import url("https://fonts.googleapis.com/css2?family=Epilogue:wght@600&family=Poppins:wght@500&display=swap");
* {
color: #fff;
}
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;
background: #1a202c;
}
.page-container {
padding: 2vw;
margin: 2vw;
}
@media screen and (max-width: 600px) {
.page-container {
padding: 2px;
margin: 2px;
}
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
.flex {
display: flex;
justify-content: space-between;
}
.grid {
margin: 50px;
margin-top: 50px;
display: grid;
grid-template-columns: repeat(auto-fill, 350px);
grid-gap: 10px;
}