import { Avatar, Box, Button, Center, CloseButton, Container, Drawer, DrawerContent, DrawerOverlay, Flex, HStack, Link, Spacer, Text, useBreakpointValue, useDisclosure, } from "@chakra-ui/react"; function getAvatarUrl(userData: { [k: string]: any }): string { const BASE = "https://cdn.discordapp.com/"; if (!userData.id) return ""; if (!userData.avatar) return BASE + `embed/avatars/${parseInt(userData.discriminator) % 5}.png`; return BASE + `avatars/${userData.id}/${userData.avatar}`; } export default function (props: { avatar?: string; discriminator?: string; email?: string; hide?: boolean; id?: string; permissions?: number; username?: string; }) { const isDesktop = useBreakpointValue({ base: false, lg: true }); const { isOpen, onClose, onOpen } = useDisclosure(); return ( <> <Box as="section" pb={{ base: "6" }}> <Box as="nav" boxSizing="unset"> <Container maxW="container.xl" py={{ base: "6" }}> <Container alignItems="center" display={isDesktop ? "none" : "flex"} justifyContent="space-between" p="0" w="calc(100vw - 6rem)" > <a href="/"> <img src="/files/logo192.png" alt="Car Crushers Logo" style={{ width: "36px" }} /> </a> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" onClick={onOpen} > <path fillRule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" /> </svg> </Container> <Flex alignSelf="center" display={isDesktop ? "flex" : "none"} gap="0.5rem" justifyContent="space-between" p="0" textAlign="center" > <a href="/" style={{ alignSelf: "center" }}> <img src="/files/logo192.png" width="32" alt="Car Crushers Logo" /> </a> <Spacer /> <Spacer /> <Center gap="1.25rem" whiteSpace="nowrap"> <Button variant="ghost"> <Link href="/about">About Us</Link> </Button> <Button variant="ghost"> <Link href="/team">Our Team</Link> </Button> <Button variant="ghost"> <Link href="/support">Support</Link> </Button> <Button variant="ghost"> <Link href="/mdn">Moderation</Link> </Button> </Center> <Spacer /> <Spacer /> {props.hide ? null : props.id ? ( <HStack spacing="3"> <Avatar display={props.id ? "flex" : "none"} src={getAvatarUrl(props)} /> <Text> {props.id ? `${props.username}#${props.discriminator}` : ""} </Text> <Button size="md" style={{ display: props.id ? "block" : "none" }} variant="ghost" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16" > <path fillRule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z" /> <path fillRule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z" /> </svg> </Button> </HStack> ) : ( <Button>Log In</Button> )} </Flex> </Container> </Box> </Box> <Drawer isOpen={isOpen} onClose={onClose} placement="left"> <DrawerOverlay /> <DrawerContent gap="1.5vh" p="1.5vh"> <CloseButton onClick={onClose} /> <hr /> <Link href="/about">About Us</Link> <Link href="/team">Our Team</Link> <Link href="/support">Support</Link> <Link href="/mdn">Moderation</Link> <hr /> <Flex alignItems="center" gap="1rem"> <Avatar display={props.id ? "" : "none"} src={getAvatarUrl(props)} /> <Text align="center" style={{ overflowWrap: "anywhere" }}> {props.id ? `${props.username}#${props.discriminator}` : ""} </Text> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16" style={{ cursor: "pointer", display: props.id ? "block" : "none", }} > <path fillRule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z" /> <path fillRule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z" /> </svg> </Flex> </DrawerContent> </Drawer> </> ); }