From a06dcd0453b7051937b956d93362cfa5fd4bf4b4 Mon Sep 17 00:00:00 2001 From: night0721 Date: Sun, 9 Jan 2022 05:38:17 +0800 Subject: [PATCH] syntax changes --- components/Card.js | 7 +- components/Features/Feature.js | 36 ++--- components/Features/Features.js | 54 ++++--- components/Footer/Copyright.js | 14 +- components/Footer/Footer.js | 33 +++-- components/Footer/SocialMediaLinks.js | 22 +-- components/Hero/Hero.js | 195 +++++++++++++------------- components/Nav/Header.js | 195 ++++++++++++++------------ components/Nav/Logo.js | 16 +-- pages/404.js | 3 +- pages/_app.js | 4 +- pages/controlpanel/commands.js | 12 +- pages/index.js | 1 - public/favicon.ico | Bin 15086 -> 0 bytes public/vercel.svg | 4 - styles/Home.module.css | 0 styles/HomeCard.module.css | 14 +- styles/globals.css | 10 +- 18 files changed, 328 insertions(+), 292 deletions(-) delete mode 100644 public/favicon.ico delete mode 100644 public/vercel.svg delete mode 100644 styles/Home.module.css diff --git a/components/Card.js b/components/Card.js index 25c8bbc..8a86091 100644 --- a/components/Card.js +++ b/components/Card.js @@ -2,9 +2,7 @@ import React from "react"; import Link from "next/link"; import { Text, Flex, Button } from "@chakra-ui/react"; import { motion } from "framer-motion"; - const MotionFlex = motion(Flex); - const item = { hidden: { y: 20, opacity: 0 }, visible: { @@ -12,8 +10,7 @@ const item = { opacity: 1, }, }; - -function Card({ title, desc, link }) { +export default function Card({ title, desc, link }) { return ( ); } - -export default Card; diff --git a/components/Features/Feature.js b/components/Features/Feature.js index f0464be..d15512b 100644 --- a/components/Features/Feature.js +++ b/components/Features/Feature.js @@ -1,18 +1,20 @@ -import { Box, Stack, Text, useColorModeValue as mode } from '@chakra-ui/react' -import * as React from 'react' +import { Box, Stack, Text, useColorModeValue as mode } from "@chakra-ui/react"; +import * as React from "react"; - -export const Feature = (props) => { - const { title, children, icon } = props - return ( - - {icon} - - - {title} - - {children} - - - ) -} \ No newline at end of file +export const Feature = props => { + const { title, children, icon } = props; + return ( + + {icon} + + + {title} + + {children} + + + ); +}; diff --git a/components/Features/Features.js b/components/Features/Features.js index 998c48f..39fcace 100644 --- a/components/Features/Features.js +++ b/components/Features/Features.js @@ -1,23 +1,35 @@ -import { Box, SimpleGrid } from '@chakra-ui/react' -import * as React from 'react' -import { FcDoughnutChart, FcMultipleDevices, FcPrivacy, FcTimeline } from 'react-icons/fc' -import { Feature } from './Feature' +import { Box, SimpleGrid } from "@chakra-ui/react"; +import * as React from "react"; +import { + FcDoughnutChart, + FcMultipleDevices, + FcPrivacy, + FcTimeline, +} from "react-icons/fc"; +import { Feature } from "./Feature"; export const Features = () => ( - - - }> - Cath will never leak any of your information. Ever. All your data is stored securely on our side. - - }> - Cath is constantly being updated and worked on. Bugs and features, you name them, we do them. - - }> - Amazing server statistics that make tracking your server growth a breeze. - - }> - No matter who you are, Cath is sure to have a purpose for you. - - - -) + + + }> + Cath will never leak any of your information. Ever. All your data is + stored securely on our side. + + }> + Cath is constantly being updated and worked on. Bugs and features, you + name them, we do them. + + }> + Amazing server statistics that make tracking your server growth a + breeze. + + }> + No matter who you are, Cath is sure to have a purpose for you. + + + +); diff --git a/components/Footer/Copyright.js b/components/Footer/Copyright.js index 2c9d08a..2f64f97 100644 --- a/components/Footer/Copyright.js +++ b/components/Footer/Copyright.js @@ -1,8 +1,8 @@ -import { Text, TextProps } from '@chakra-ui/layout' -import * as React from 'react' +import { Text, TextProps } from "@chakra-ui/layout"; +import * as React from "react"; -export const Copyright = (props) => ( - - © {new Date().getFullYear()} Cath. All rights reserved. - -) \ No newline at end of file +export const Copyright = props => ( + + © {new Date().getFullYear()} Cath. All rights reserved. + +); diff --git a/components/Footer/Footer.js b/components/Footer/Footer.js index e3325eb..50525f6 100644 --- a/components/Footer/Footer.js +++ b/components/Footer/Footer.js @@ -1,15 +1,22 @@ -import { Box, Stack } from '@chakra-ui/react' -import * as React from 'react' -import { Copyright } from './Copyright' -import { SocialMediaLinks } from './SocialMediaLinks' +import { Box, Stack } from "@chakra-ui/react"; +import * as React from "react"; +import { Copyright } from "./Copyright"; +import { SocialMediaLinks } from "./SocialMediaLinks"; export const Footer = () => ( - - - - - - - - -) \ No newline at end of file + + + + + + + + +); diff --git a/components/Footer/SocialMediaLinks.js b/components/Footer/SocialMediaLinks.js index 1cf5433..f8244f5 100644 --- a/components/Footer/SocialMediaLinks.js +++ b/components/Footer/SocialMediaLinks.js @@ -1,9 +1,15 @@ -import { ButtonGroup, ButtonGroupProps, IconButton } from '@chakra-ui/react' -import * as React from 'react' -import { FaGithub } from 'react-icons/fa' +import { ButtonGroup, ButtonGroupProps, IconButton } from "@chakra-ui/react"; +import * as React from "react"; +import { FaGithub } from "react-icons/fa"; -export const SocialMediaLinks = (props) => ( - - } target='_empty'/> - -) \ No newline at end of file +export const SocialMediaLinks = props => ( + + } + target="_empty" + /> + +); diff --git a/components/Hero/Hero.js b/components/Hero/Hero.js index 75884a7..485aa62 100644 --- a/components/Hero/Hero.js +++ b/components/Hero/Hero.js @@ -1,103 +1,108 @@ import React from "react"; import { - chakra, - Box, - useColorModeValue, - Button, - Stack, - Image, - Text, - Icon, + chakra, + Box, + useColorModeValue, + Button, + Stack, + Image, + Text, + Icon, } from "@chakra-ui/react"; -import { signIn } from 'next-auth/client' +import { signIn } from "next-auth/client"; const Hero = () => { - return ( - - - - Your favorite{" "} - - CODM - {" "} - bot. - - - Your favorite CODM bot. Cath.exe is packed to the brim with commands for moderation, stats and of course, CODM. - - - - - - - - ); + return ( + + + + Your favorite{" "} + + CODM + {" "} + bot. + + + Your favorite CODM bot. Cath.exe is packed to the brim with commands + for moderation, stats and of course, CODM. + + + + + + + + ); }; export default Hero; diff --git a/components/Nav/Header.js b/components/Nav/Header.js index 3f93a74..260838d 100644 --- a/components/Nav/Header.js +++ b/components/Nav/Header.js @@ -14,70 +14,83 @@ import { useColorModeValue, useBreakpointValue, useDisclosure, -} from '@chakra-ui/react'; +} from "@chakra-ui/react"; import { HamburgerIcon, CloseIcon, ChevronDownIcon, ChevronRightIcon, -} from '@chakra-ui/icons'; -import AuthButton from '../AuthButton' -import { signIn, signOut, useSession } from 'next-auth/client'; +} from "@chakra-ui/icons"; +import AuthButton from "../AuthButton"; +import { signIn, signOut, useSession } from "next-auth/client"; export default function WithSubnavigation() { const { isOpen, onToggle } = useDisclosure(); - const [session, loading] = useSession() + const [session, loading] = useSession(); return ( + borderStyle={"solid"} + borderColor={useColorModeValue("gray.200", "gray.900")} + align={"center"} + > + display={{ base: "flex", md: "none" }} + > : } - variant={'ghost'} - aria-label={'Toggle Navigation'} + variant={"ghost"} + aria-label={"Toggle Navigation"} /> - + + textAlign={useBreakpointValue({ base: "center", md: "left" })} + fontFamily={"heading"} + color={useColorModeValue("gray.800", "white")} + > Cath.exe - + + justify={"flex-end"} + direction={"row"} + spacing={6} + > @@ -90,26 +103,27 @@ export default function WithSubnavigation() { } const DesktopNav = () => { - const linkColor = useColorModeValue('gray.600', 'gray.200'); - const linkHoverColor = useColorModeValue('gray.800', 'white'); - const popoverContentBgColor = useColorModeValue('white', 'gray.800'); + const linkColor = useColorModeValue("gray.600", "gray.200"); + const linkHoverColor = useColorModeValue("gray.800", "white"); + const popoverContentBgColor = useColorModeValue("white", "gray.800"); return ( - - {NAV_ITEMS.map((navItem) => ( + + {NAV_ITEMS.map(navItem => ( - + + }} + > {navItem.label} @@ -117,13 +131,14 @@ const DesktopNav = () => { {navItem.children && ( + rounded={"xl"} + minW={"sm"} + > - {navItem.children.map((child) => ( + {navItem.children.map(child => ( ))} @@ -140,30 +155,33 @@ const DesktopSubNav = ({ label, href, subLabel }) => { return ( - + rounded={"md"} + _hover={{ bg: useColorModeValue("teal.50", "gray.900") }} + > + + transition={"all .3s ease"} + _groupHover={{ color: "teal.200" }} + fontWeight={500} + > {label} - {subLabel} + {subLabel} - + _groupHover={{ opacity: "100%", transform: "translateX(0)" }} + justify={"flex-end"} + align={"center"} + flex={1} + > + @@ -173,10 +191,11 @@ const DesktopSubNav = ({ label, href, subLabel }) => { const MobileNav = () => { return ( - {NAV_ITEMS.map((navItem) => ( + display={{ md: "none" }} + > + {NAV_ITEMS.map(navItem => ( ))} @@ -191,38 +210,41 @@ const MobileNavItem = ({ label, children, href }) => { + textDecoration: "none", + }} + > + color={useColorModeValue("gray.600", "gray.200")} + > {label} {children && ( )} - + + borderStyle={"solid"} + borderColor={useColorModeValue("gray.200", "gray.700")} + align={"start"} + > {children && - children.map((child) => ( + children.map(child => ( {child.label} @@ -233,29 +255,28 @@ const MobileNavItem = ({ label, children, href }) => { ); }; - const NAV_ITEMS = [ { - label: 'Home', - href: '/', + label: "Home", + href: "/", }, { - label: 'Control Panel', + label: "Control Panel", children: [ { - label: 'Main', - subLabel: 'Control Everything', - href: '/controlpanel', + label: "Main", + subLabel: "Control Everything", + href: "/controlpanel", }, { - label: 'Commands', - subLabel: 'Control Caths commands', - href: '/controlpanel/commands', + label: "Commands", + subLabel: "Control Caths commands", + href: "/controlpanel/commands", }, ], }, { - label: 'Coming soon...', - href: '#', + label: "Coming soon...", + href: "#", }, -]; \ No newline at end of file +]; diff --git a/components/Nav/Logo.js b/components/Nav/Logo.js index c738e37..5b8b1c4 100644 --- a/components/Nav/Logo.js +++ b/components/Nav/Logo.js @@ -2,11 +2,11 @@ import React from "react"; import { Box, Text } from "@chakra-ui/react"; export default function Logo(props) { - return ( - - - Logo - - - ); -} \ No newline at end of file + return ( + + + Logo + + + ); +} diff --git a/pages/404.js b/pages/404.js index 824b3f7..0f884cd 100644 --- a/pages/404.js +++ b/pages/404.js @@ -1,12 +1,11 @@ import Head from "next/head"; - export default function Custom404() { return ( <> 404 -

404 - Page Not Found

+ 
404 - Page Not Found
); } diff --git a/pages/_app.js b/pages/_app.js index bba2dd2..2d840b4 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -7,7 +7,7 @@ import theme from "../chakra_config/theme"; import { ColorModeScript } from "@chakra-ui/react"; import Sidebar from "../components/Sidebar/Sidebar"; -function MyApp({ Component, pageProps }) { +export default function MyApp({ Component, pageProps }) { const [session, loading] = useSession(); return ( @@ -37,5 +37,3 @@ function MyApp({ Component, pageProps }) { ); } - -export default MyApp; diff --git a/pages/controlpanel/commands.js b/pages/controlpanel/commands.js index 906dfa2..badce6b 100644 --- a/pages/controlpanel/commands.js +++ b/pages/controlpanel/commands.js @@ -33,15 +33,9 @@ function Controller({ initialState }) { function processOnline(status) { console.log(status); - if (status == "online") { - return true; - } - if (status == "offline") { - return false; - } - if (status == "maintenance") { - return false; - } + if (status == "online") return true; + if (status == "offline") return false; + if (status == "maintenance") return false; } function Commands() { diff --git a/pages/index.js b/pages/index.js index 6ef0da7..5d80598 100644 --- a/pages/index.js +++ b/pages/index.js @@ -24,7 +24,6 @@ export default function Home() { }; const [session, loading] = useSession(); - return ( <> {!session && ( diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index 4965832f2c9b0605eaa189b7c7fb11124d24e48a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 15086 zcmeHOOH5Q(7(R0cc?bh2AT>N@1PWL!LLfZKyG5c!MTHoP7_p!sBz0k$?pjS;^lmgJ zU6^i~bWuZYHL)9$wuvEKm~qo~(5=Lvx5&Hv;?X#m}i|`yaGY4gX+&b>tew;gcnRQA1kp zBbm04SRuuE{Hn+&1wk%&g;?wja_Is#1gKoFlI7f`Gt}X*-nsMO30b_J@)EFNhzd1QM zdH&qFb9PVqQOx@clvc#KAu}^GrN`q5oP(8>m4UOcp`k&xwzkTio*p?kI4BPtIwX%B zJN69cGsm=x90<;Wmh-bs>43F}ro$}Of@8)4KHndLiR$nW?*{Rl72JPUqRr3ta6e#A z%DTEbi9N}+xPtd1juj8;(CJt3r9NOgb>KTuK|z7!JB_KsFW3(pBN4oh&M&}Nb$Ee2 z$-arA6a)CdsPj`M#1DS>fqj#KF%0q?w50GN4YbmMZIoF{e1yTR=4ablqXHBB2!`wM z1M1ke9+<);|AI;f=2^F1;G6Wfpql?1d5D4rMr?#f(=hkoH)U`6Gb)#xDLjoKjp)1;Js@2Iy5yk zMXUqj+gyk1i0yLjWS|3sM2-1ECc;MAz<4t0P53%7se$$+5Ex`L5TQO_MMXXi04UDIU+3*7Ez&X|mj9cFYBXqM{M;mw_ zpw>azP*qjMyNSD4hh)XZt$gqf8f?eRSFX8VQ4Y+H3jAtvyTrXr`qHAD6`m;aYmH2zOhJC~_*AuT} zvUxC38|JYN94i(05R)dVKgUQF$}#cxV7xZ4FULqFCNX*Forhgp*yr6;DsIk=ub0Hv zpk2L{9Q&|uI^b<6@i(Y+iSxeO_n**4nRLc`P!3ld5jL=nZRw6;DEJ*1z6Pvg+eW|$lnnjO zjd|8>6l{i~UxI244CGn2kK@cJ|#ecwgSyt&HKA2)z zrOO{op^o*- - - \ No newline at end of file diff --git a/styles/Home.module.css b/styles/Home.module.css deleted file mode 100644 index e69de29..0000000 diff --git a/styles/HomeCard.module.css b/styles/HomeCard.module.css index 907ede2..5bf45a9 100644 --- a/styles/HomeCard.module.css +++ b/styles/HomeCard.module.css @@ -1,10 +1,12 @@ .home-card { - width: 300px; - height: 150px; - background: #1f1b24; - border: 1px solid blue; + width: 300px; + height: 150px; + background: #1f1b24; + border: 1px solid blue; } -.title {} +/* .title { +} -.desc {} \ No newline at end of file +.desc { +} */ diff --git a/styles/globals.css b/styles/globals.css index 0715235..b2619cb 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@600&family=Poppins:wght@500&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Epilogue:wght@600&family=Poppins:wght@500&display=swap"); * { color: #fff; @@ -8,8 +8,8 @@ html, body { padding: 0; margin: 0; - font-family: 'Epilogue',-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + font-family: "Epilogue", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, + Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; background: #1a202c; } @@ -22,7 +22,7 @@ body { .page-container { padding: 2px; margin: 2px; - } + } } a { @@ -45,4 +45,4 @@ a { display: grid; grid-template-columns: repeat(auto-fill, 350px); grid-gap: 10px; -} \ No newline at end of file +}