diff --git a/src/components/DropdownButton.tsx b/src/components/DropdownButton.tsx index bb6ee45..7f5fe4a 100644 --- a/src/components/DropdownButton.tsx +++ b/src/components/DropdownButton.tsx @@ -1,8 +1,7 @@ -import Link from "next/link"; -import React from "react"; import { useRouter } from "next/router"; -import { IoChevronDown } from "react-icons/io5"; -import { Menu, MenuButton, MenuList, MenuItem, Button } from "@chakra-ui/react"; +import { Menu, MenuButton, MenuList, Button, useDisclosure, MenuItem } from "@chakra-ui/react"; +import { IoChevronDown, IoChevronUp } from "react-icons/io5"; +import Link from "next/link"; export interface DropdownButtonProps { hasMenu?: boolean; @@ -13,22 +12,22 @@ export interface DropdownButtonProps { const DropdownButton = ({ hasMenu = false, text, href, list }: DropdownButtonProps) => { const router = useRouter(); + const { isOpen, onOpen, onClose } = useDisclosure(); const isActive = hasMenu ? list?.some((item) => router.asPath.startsWith(item.url)) : router.asPath === href; if (hasMenu) { return ( - + } - fontWeight="normal" + rightIcon={isOpen ? : } + fontWeight={"normal"} _hover={{ bgColor: "rgba(255, 255, 255, 0.3)" }} - _active={{ bgColor: " rgba(255, 255, 255, 0.3)" }} + _active={{ bgColor: "rgba(255, 255, 255, 0.3)" }} _focus={{ outline: 0 }} > {text} @@ -49,26 +48,24 @@ const DropdownButton = ({ hasMenu = false, text, href, list }: DropdownButtonPro ); - } else if (href) { - return ( - - - - ); } + + return ( + + + + ); }; export default DropdownButton; diff --git a/src/components/NewsPanel.tsx b/src/components/NewsPanel.tsx index 44ebec1..a21141f 100644 --- a/src/components/NewsPanel.tsx +++ b/src/components/NewsPanel.tsx @@ -13,7 +13,7 @@ export interface NewsPanelProps extends FlexProps { isLoading?: boolean; } -const NewsPanel = ({ header = "Loading...", date, identifier, children, isLoading = false, borderRadius = "md", ...props }: NewsPanelProps) => { +const NewsPanel = ({ header = "Loading...", date, identifier, children, isLoading = false, borderRadius = "none", ...props }: NewsPanelProps) => { return ( diff --git a/src/components/Panel.tsx b/src/components/Panel.tsx index 86501df..476a8b7 100644 --- a/src/components/Panel.tsx +++ b/src/components/Panel.tsx @@ -12,41 +12,35 @@ export interface PanelProps extends FlexProps { isLoading?: boolean; } -const Panel = ({ - header = "Loading...", - date, - identifier, - children, - isLoading = false, - borderRadius = "md", - padding = "10px", - ...props -}: PanelProps) => { +const Panel = ({ header, date, identifier, children, isLoading = false, borderRadius = "none", padding = "10px", ...props }: PanelProps) => { return ( - - - {header} - {date && ( - - - {formatDate(date)} - - - )} - - + {header && ( + + + {header} + {date && ( + + + {formatDate(date)} + + + )} + + + )} {isLoading ? : children} ); diff --git a/src/layout/Footer.tsx b/src/layout/Footer.tsx deleted file mode 100644 index 5c0bacd..0000000 --- a/src/layout/Footer.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from "react"; -import { Box } from "@chakra-ui/react"; - -const Footer = () => { - return ( - - Copyright © 2021-2025 Shibaac - - ); -}; - -export default Footer; diff --git a/src/layout/NavBar/DesktopNavBar.tsx b/src/layout/NavBar/DesktopNavBar.tsx deleted file mode 100644 index d1afbfc..0000000 --- a/src/layout/NavBar/DesktopNavBar.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { useRouter } from "next/router"; -import { Flex, Spacer, Box } from "@chakra-ui/react"; -import DropdownButton from "@component/DropdownButton"; -import TextInput from "@component/TextInput"; -import { User } from "@lib/session"; -import { NavigationItems } from "./index"; - -export interface DesktopNavigationProps { - user?: User; - navigationItems: NavigationItems[]; -} - -export const DesktopNavigation = ({ user, navigationItems }: DesktopNavigationProps) => { - const router = useRouter(); - - return ( - - {navigationItems.map((item) => ( - - ))} - - -
{ - event.preventDefault(); - const form = event.currentTarget; - const searchValue = (form.elements.namedItem("search") as any)?.value; - if (searchValue) { - router.push(`/character/${searchValue}`); - form.reset(); - } - }} - > - - -
- - - {user ? ( - - ) : ( - <> - - - - )} - - ); -}; diff --git a/src/layout/NavBar/MobileNavBar.tsx b/src/layout/NavBar/MobileNavBar.tsx deleted file mode 100644 index 3ebc116..0000000 --- a/src/layout/NavBar/MobileNavBar.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { Flex, Spacer, Menu, MenuButton, MenuList, MenuItem, MenuGroup, IconButton, Link } from "@chakra-ui/react"; -import DropdownButton from "@component/DropdownButton"; -import { RxHamburgerMenu } from "react-icons/rx"; -import { User } from "@lib/session"; -import { NavigationItems } from "./index"; - -export interface MobileNavigationProps { - user?: User; - navigationItems: NavigationItems[]; -} - -export const MobileNavigation = ({ user, navigationItems }: MobileNavigationProps) => { - return ( - - - } - variant="outline" - _hover={{}} - color={"white"} - _active={{ bgColor: "white", color: "black" }} - alignSelf={"center"} - marginLeft={1} - /> - - {navigationItems.map((item) => { - return item.hasMenu ? ( - - {item.menuItems!.map((subItem) => { - return {subItem.text}; - })} - - ) : ( - - {item.text} - - ); - })} - - - - - {user ? ( - - ) : ( - <> - - - - )} - - ); -}; diff --git a/src/layout/NavBar/index.tsx b/src/layout/NavBar/index.tsx deleted file mode 100644 index 0387224..0000000 --- a/src/layout/NavBar/index.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React from "react"; -import { useBreakpointValue } from "@chakra-ui/react"; -import { trpc } from "@util/trpc"; -import { DesktopNavigation } from "./DesktopNavBar"; -import { MobileNavigation } from "./MobileNavBar"; - -export interface NavigationItems { - text: string; - href?: string; - hasMenu?: boolean; - menuItems?: { text: string; url: string }[]; -} - -const navigationItems: NavigationItems[] = [ - { text: "Home", href: "/" }, - { - hasMenu: true, - menuItems: [ - { text: "Highscores", url: "/community/highscores" }, - // { text: "Guilds", url: "/community/guilds" }, - // { text: "Houses", url: "/community/houses" }, - ], - text: "Community", - }, - { - hasMenu: true, - menuItems: [ - // { text: "Server Information", url: "/serverinfo" }, - { text: "Downloads", url: "/downloads" }, - ], - text: "Library", - }, - // { text: "Donate", href: "/donate" }, - // { text: "Store", href: "/shop" }, -]; - -const NavBar = () => { - const user = trpc.me.me.useQuery().data; - - const NavComponent = useBreakpointValue( - { - base: MobileNavigation, - md: DesktopNavigation, - }, - { - fallback: "md", - }, - ); - - if (!NavComponent) return null; - - return ; -}; - -export default NavBar; diff --git a/src/layout/TopBar/TopBarSeparator.tsx b/src/layout/TopBar/TopBarSeparator.tsx index 8d2a5b8..9e82ed2 100644 --- a/src/layout/TopBar/TopBarSeparator.tsx +++ b/src/layout/TopBar/TopBarSeparator.tsx @@ -1,5 +1,7 @@ -import { Box } from "@chakra-ui/react"; +import { Box, BoxProps } from "@chakra-ui/react"; -export const TopBarSeparator = () => { - return ; +interface TopBarSeparatorProps extends BoxProps {} + +export const TopBarSeparator = ({ ...props }: TopBarSeparatorProps) => { + return ; }; diff --git a/src/layout/TopBar/index.tsx b/src/layout/TopBar/index.tsx index 96f9ff0..1499d3d 100644 --- a/src/layout/TopBar/index.tsx +++ b/src/layout/TopBar/index.tsx @@ -1,20 +1,68 @@ -import { Flex, Text } from "@chakra-ui/react"; +import { Flex, Text, Image, HStack, Spacer } from "@chakra-ui/react"; import { TopBarItem } from "./TopBarItem"; import { trpc } from "@util/trpc"; import Link from "@component/Link"; import { TopBarSeparator } from "./TopBarSeparator"; -import { FaDiscord } from "react-icons/fa"; +import { FaDiscord, FaGithub } from "react-icons/fa"; import { TbBrandYoutubeFilled } from "react-icons/tb"; -import { FaGithub } from "react-icons/fa"; +import TextInput from "@component/TextInput"; +import DropdownButton from "@component/DropdownButton"; +import { useRouter } from "next/router"; + +export interface NavigationItems { + text: string; + href?: string; + hasMenu?: boolean; + menuItems?: { text: string; url: string }[]; +} + +const navigationItems: NavigationItems[] = [ + { text: "News", href: "/" }, + { + hasMenu: true, + menuItems: [ + { text: "Highscores", url: "/community/highscores" }, + // { text: "Guilds", url: "/community/guilds" }, + // { text: "Houses", url: "/community/houses" }, + ], + text: "Community", + }, + { + hasMenu: true, + menuItems: [ + // { text: "Server Information", url: "/serverinfo" }, + { text: "Downloads", url: "/downloads" }, + ], + text: "Library", + }, + // { text: "Donate", href: "/donate" }, + // { text: "Store", href: "/shop" }, +]; export const TopBar = () => { + const user = trpc.me.me.useQuery().data; const status = trpc.status.status.useQuery().data; + const router = useRouter(); return ( - - - - + + + + + shibaac + + Shibaac + + + + + {navigationItems.map((item) => ( + + + + ))} + + {/* {status?.onlineCount ?? "..."} @@ -23,30 +71,63 @@ export const TopBar = () => { players online - - + */} + {/* Download Client - - - - - - - - - - - - - - - + */} + {/* */} + {/* */} + + {user ? ( + + ) : ( + <> + + + + )} - - + + + +
{ + event.preventDefault(); + const form = event.currentTarget; + const searchValue = (form.elements.namedItem("search") as any)?.value; + if (searchValue) { + router.push(`/character/${searchValue}`); + form.reset(); + } + }} + > + + +
+ + + {/* TODO: move to component */} + + + + + + + + + + + ); }; diff --git a/src/layout/index.tsx b/src/layout/index.tsx index 8df4138..b2b8391 100644 --- a/src/layout/index.tsx +++ b/src/layout/index.tsx @@ -1,27 +1,31 @@ import React, { PropsWithChildren } from "react"; import Head from "./Head"; -import NavBar from "./NavBar"; import SideBar from "./SideBar"; -import Footer from "./Footer"; -import { Box, Image, Flex } from "@chakra-ui/react"; +import { Flex, VStack, Text } from "@chakra-ui/react"; import { TopBar } from "./TopBar"; const Layout = ({ children }: PropsWithChildren) => { return ( <> - - - shibaac - - - - {children} -