formatted code
This commit is contained in:
night0721
parent
bf180cc46a
commit
bbab44277b
18 changed files with 784 additions and 5601 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -2,6 +2,8 @@
|
|||
|
||||
# dependencies
|
||||
/node_modules
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
import { extendTheme, ThemeConfig } from "@chakra-ui/react"
|
||||
// 2. Add your color mode config
|
||||
import { extendTheme, ThemeConfig } from "@chakra-ui/react";
|
||||
const config = {
|
||||
initialColorMode: "dark",
|
||||
useSystemColorMode: false,
|
||||
}
|
||||
// 3. extend the theme
|
||||
const theme = extendTheme({ config })
|
||||
export default theme
|
||||
initialColorMode: "dark",
|
||||
useSystemColorMode: false,
|
||||
};
|
||||
const theme = extendTheme({ config });
|
||||
export default theme;
|
||||
|
|
|
|||
|
|
@ -1,39 +1,47 @@
|
|||
import { signIn, signOut, useSession } from 'next-auth/client'
|
||||
import {Button} from '@chakra-ui/react'
|
||||
import { signIn, signOut, useSession } from "next-auth/client";
|
||||
import { Button } from "@chakra-ui/react";
|
||||
|
||||
export default function Page() {
|
||||
const [session, loading] = useSession()
|
||||
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>
|
||||
</>}
|
||||
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>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,24 +1,31 @@
|
|||
import { Box, Button, Heading, Text } from '@chakra-ui/react'
|
||||
import * as React from 'react'
|
||||
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 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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,28 +1,40 @@
|
|||
import React from 'react'
|
||||
import Link from 'next/link'
|
||||
import {Text, Flex, Button} from '@chakra-ui/react'
|
||||
import {motion} from 'framer-motion'
|
||||
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 MotionFlex = motion(Flex);
|
||||
|
||||
const item = {
|
||||
hidden: { y: 20, opacity: 0 },
|
||||
visible: {
|
||||
y: 0,
|
||||
opacity: 1
|
||||
}
|
||||
hidden: { y: 20, opacity: 0 },
|
||||
visible: {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
},
|
||||
};
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
export default Card
|
||||
export default Card;
|
||||
|
|
|
|||
|
|
@ -1,187 +1,180 @@
|
|||
import {
|
||||
Avatar,
|
||||
Box,
|
||||
Collapse,
|
||||
Drawer,
|
||||
DrawerContent,
|
||||
DrawerOverlay,
|
||||
Flex,
|
||||
Icon,
|
||||
IconButton,
|
||||
Input,
|
||||
InputGroup,
|
||||
InputLeftElement,
|
||||
Text,
|
||||
useColorModeValue,
|
||||
useDisclosure,
|
||||
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 AuthButton from "../AuthButton";
|
||||
import Link from "next/link";
|
||||
import React from "react";
|
||||
import {session} from 'next-auth/client'
|
||||
import { session } from "next-auth/client";
|
||||
|
||||
export default function Sidebar({children}) {
|
||||
const sidebar = useDisclosure();
|
||||
const integrations = useDisclosure();
|
||||
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>
|
||||
);
|
||||
const NavItem = props => {
|
||||
const { icon, children, ...rest } = props;
|
||||
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>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,60 +1,81 @@
|
|||
import {
|
||||
Stat,
|
||||
StatLabel,
|
||||
StatNumber,
|
||||
StatHelpText,
|
||||
StatArrow,
|
||||
StatGroup,
|
||||
} from "@chakra-ui/react"
|
||||
Stat,
|
||||
StatLabel,
|
||||
StatNumber,
|
||||
StatHelpText,
|
||||
StatArrow,
|
||||
StatGroup,
|
||||
} from "@chakra-ui/react";
|
||||
|
||||
import React from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
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
|
||||
}
|
||||
}
|
||||
hidden: { y: 20, opacity: 0 },
|
||||
visible: {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
},
|
||||
};
|
||||
|
||||
const MotionStatGroup = motion(StatGroup)
|
||||
const MotionStat = motion(Stat)
|
||||
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>
|
||||
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>
|
||||
)
|
||||
<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
|
||||
export default StatCard;
|
||||
|
|
|
|||
|
|
@ -1,169 +1,167 @@
|
|||
import {
|
||||
Avatar,
|
||||
Box,
|
||||
chakra,
|
||||
Container,
|
||||
Flex,
|
||||
Icon,
|
||||
SimpleGrid,
|
||||
useColorModeValue,
|
||||
} from '@chakra-ui/react';
|
||||
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',
|
||||
},
|
||||
{
|
||||
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")`,
|
||||
`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>
|
||||
);
|
||||
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>
|
||||
);
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
module.exports = {
|
||||
reactStrictMode: true,
|
||||
}
|
||||
};
|
||||
|
|
|
|||
13
package.json
13
package.json
|
|
@ -1,7 +1,6 @@
|
|||
{
|
||||
"name": "cath-dashboard",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
|
|
@ -15,17 +14,17 @@
|
|||
"@emotion/styled": "^11",
|
||||
"@material-ui/core": "^4.11.4",
|
||||
"@material-ui/icons": "^4.11.2",
|
||||
"axios": "^0.21.1",
|
||||
"axios": "^0.24.0",
|
||||
"framer-motion": "^4",
|
||||
"mongodb": "^3.6.9",
|
||||
"next": "11.0.0",
|
||||
"mongodb": "^4.1.4",
|
||||
"next": "^12.0.4",
|
||||
"next-auth": "^3.27.0",
|
||||
"react": "17.0.2",
|
||||
"react-dom": "17.0.2",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-icons": "^4.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "7.29.0",
|
||||
"eslint": "^8.2.0",
|
||||
"eslint-config-next": "11.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
14
pages/404.js
14
pages/404.js
|
|
@ -1,12 +1,12 @@
|
|||
import Head from 'next/head'
|
||||
import Head from "next/head";
|
||||
|
||||
export default function Custom404() {
|
||||
return (
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>404</title>
|
||||
</Head>
|
||||
<h1>404 - Page Not Found</h1>
|
||||
<Head>
|
||||
<title>404</title>
|
||||
</Head>
|
||||
<h1>404 - Page Not Found</h1>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
@ -1,15 +1,14 @@
|
|||
import '../styles/globals.css'
|
||||
import Head from 'next/head'
|
||||
import { Provider, useSession } from 'next-auth/client'
|
||||
import { ChakraProvider } from "@chakra-ui/react"
|
||||
import Header from '../components/Nav/Header'
|
||||
import theme from '../chakra_config/theme'
|
||||
import { ColorModeScript } from "@chakra-ui/react"
|
||||
import Sidebar from '../components/Sidebar/Sidebar'
|
||||
import "../styles/globals.css";
|
||||
import Head from "next/head";
|
||||
import { Provider, useSession } from "next-auth/client";
|
||||
import { ChakraProvider } from "@chakra-ui/react";
|
||||
import Header from "../components/Nav/Header";
|
||||
import theme from "../chakra_config/theme";
|
||||
import { ColorModeScript } from "@chakra-ui/react";
|
||||
import Sidebar from "../components/Sidebar/Sidebar";
|
||||
|
||||
function MyApp({ Component, pageProps }) {
|
||||
|
||||
const [session, loading] = useSession()
|
||||
const [session, loading] = useSession();
|
||||
|
||||
return (
|
||||
<Provider>
|
||||
|
|
@ -19,20 +18,24 @@ function MyApp({ Component, pageProps }) {
|
|||
<link rel="icon" href="/logo.png" type="image/png" />
|
||||
</Head>
|
||||
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
|
||||
{!session && <Sidebar>
|
||||
<div className='page-container'>
|
||||
<Component {...pageProps} />
|
||||
</div>
|
||||
</Sidebar>}
|
||||
{session && <>
|
||||
<Header/>
|
||||
<div className='page-container'>
|
||||
<Component {...pageProps} />
|
||||
</div>
|
||||
</>}
|
||||
{!session && (
|
||||
<Sidebar>
|
||||
<div className="page-container">
|
||||
<Component {...pageProps} />
|
||||
</div>
|
||||
</Sidebar>
|
||||
)}
|
||||
{session && (
|
||||
<>
|
||||
<Header />
|
||||
<div className="page-container">
|
||||
<Component {...pageProps} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</ChakraProvider>
|
||||
</Provider>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default MyApp
|
||||
export default MyApp;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
import NextAuth from 'next-auth'
|
||||
import Providers from 'next-auth/providers'
|
||||
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
|
||||
],
|
||||
// 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,
|
||||
})
|
||||
// A database is optional, but required to persist accounts in a database
|
||||
database: process.env.DATABASE_URL,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
|
||||
|
||||
export default function handler(req, res) {
|
||||
res.status(200).json({ name: 'John Doe' })
|
||||
}
|
||||
|
|
@ -1,98 +1,104 @@
|
|||
import React from 'react';
|
||||
import React from "react";
|
||||
import {
|
||||
Table,
|
||||
Thead,
|
||||
Tbody,
|
||||
Tr,
|
||||
Th,
|
||||
Td,
|
||||
TableCaption,
|
||||
Switch,
|
||||
Text
|
||||
} from "@chakra-ui/react"
|
||||
import Head from 'next/head'
|
||||
import { useSession } from 'next-auth/client'
|
||||
import axios from 'axios'
|
||||
import { FaBullseye } from 'react-icons/fa';
|
||||
|
||||
Table,
|
||||
Thead,
|
||||
Tbody,
|
||||
Tr,
|
||||
Th,
|
||||
Td,
|
||||
TableCaption,
|
||||
Switch,
|
||||
Text,
|
||||
} from "@chakra-ui/react";
|
||||
import Head from "next/head";
|
||||
import { useSession } from "next-auth/client";
|
||||
import axios from "axios";
|
||||
import { FaBullseye } from "react-icons/fa";
|
||||
|
||||
function Controller({ initialState }) {
|
||||
const [online, setOnline] = React.useState(initialState)
|
||||
const [online, setOnline] = React.useState(initialState);
|
||||
|
||||
return (
|
||||
<Switch
|
||||
size="lg"
|
||||
colorScheme={'teal'}
|
||||
isChecked={online}
|
||||
value={online}
|
||||
onChange={() => { setOnline(!online) }}
|
||||
/>
|
||||
)
|
||||
return (
|
||||
<Switch
|
||||
size="lg"
|
||||
colorScheme={"teal"}
|
||||
isChecked={online}
|
||||
value={online}
|
||||
onChange={() => {
|
||||
setOnline(!online);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function processOnline(status) {
|
||||
console.log(status)
|
||||
if (status == 'online') { return true }
|
||||
if (status == 'offline') { return false }
|
||||
if (status == 'maintenance') { return false }
|
||||
console.log(status);
|
||||
if (status == "online") {
|
||||
return true;
|
||||
}
|
||||
if (status == "offline") {
|
||||
return false;
|
||||
}
|
||||
if (status == "maintenance") {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function Commands() {
|
||||
const [session, loading] = useSession()
|
||||
const [session, loading] = useSession();
|
||||
|
||||
const [categories, setCategories] = React.useState([
|
||||
{ name: "Help", commands: [{ name: "Help", online: true }] },
|
||||
]);
|
||||
|
||||
const [categories, setCategories] = React.useState(
|
||||
[
|
||||
{ name: 'Help', commands: [
|
||||
{name: 'Help', online: true}
|
||||
] },
|
||||
]
|
||||
)
|
||||
React.useEffect(() => {
|
||||
axios
|
||||
.get("https://api.cath.gq/api/v1/client/commands")
|
||||
.then(res => setCategories(res.data));
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
axios.get('https://cath.night0721.repl.co/api/commands')
|
||||
.then(res => setCategories(res.data))
|
||||
}, [])
|
||||
|
||||
|
||||
return (
|
||||
return (
|
||||
<>
|
||||
{session && (
|
||||
<>
|
||||
{session &&
|
||||
<Head>
|
||||
<title>Cath Commands</title>
|
||||
</Head>
|
||||
<Table variant="simple">
|
||||
<TableCaption>Command Controls</TableCaption>
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th>Command</Th>
|
||||
<Th>Enabled</Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{categories.map((category, idx) => (
|
||||
<>
|
||||
<Head>
|
||||
<title>Cath Commands</title>
|
||||
</Head>
|
||||
<Table variant="simple">
|
||||
<TableCaption>Command Controls</TableCaption>
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th>Command</Th>
|
||||
<Th>Enabled</Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{categories.map((category, idx) => (
|
||||
<>
|
||||
<Text fontSize='3xl'>{category.name}</Text>
|
||||
{category.commands.map((command, commandIdx) => (
|
||||
<Tr key={commandIdx}>
|
||||
<Td>{command.name}</Td>
|
||||
<Td>
|
||||
<Controller initialState={processOnline(command.status)} />
|
||||
</Td>
|
||||
</Tr>
|
||||
))}
|
||||
</>
|
||||
))}
|
||||
</Tbody>
|
||||
</Table>
|
||||
<Text fontSize="3xl">{category.name}</Text>
|
||||
{category.commands.map((command, commandIdx) => (
|
||||
<Tr key={commandIdx}>
|
||||
<Td>{command.name}</Td>
|
||||
<Td>
|
||||
<Controller
|
||||
initialState={processOnline(command.status)}
|
||||
/>
|
||||
</Td>
|
||||
</Tr>
|
||||
))}
|
||||
</>
|
||||
} {!session && <>
|
||||
<h1>Seems like you're not logged in. Log in to get started!</h1>
|
||||
</>
|
||||
}
|
||||
))}
|
||||
</Tbody>
|
||||
</Table>
|
||||
</>
|
||||
);
|
||||
)}{" "}
|
||||
{!session && (
|
||||
<>
|
||||
<h1>Seems like you're not logged in. Log in to get started!</h1>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Commands
|
||||
export default Commands;
|
||||
|
|
|
|||
|
|
@ -1,58 +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'
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
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
|
||||
}
|
||||
}
|
||||
hidden: { y: 20, opacity: 0 },
|
||||
visible: {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
},
|
||||
};
|
||||
|
||||
function Index() {
|
||||
const [session, loading] = useSession();
|
||||
|
||||
const [session, loading] = useSession()
|
||||
|
||||
return (
|
||||
return (
|
||||
<>
|
||||
{!session && (
|
||||
<>
|
||||
{!session && <>
|
||||
<h1>Seems like you'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>
|
||||
</>
|
||||
}
|
||||
<h1>Seems like you'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
|
||||
export default Index;
|
||||
|
|
|
|||
111
pages/index.js
111
pages/index.js
|
|
@ -1,17 +1,16 @@
|
|||
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'
|
||||
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: {
|
||||
|
|
@ -19,38 +18,68 @@ export default function Home() {
|
|||
scale: 1,
|
||||
transition: {
|
||||
delayChildren: 0.4,
|
||||
staggerChildren: 0.3
|
||||
}
|
||||
}
|
||||
}
|
||||
staggerChildren: 0.3,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
const [session, loading] = useSession()
|
||||
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>
|
||||
</>
|
||||
}
|
||||
{!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>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue