Initial commit
This commit is contained in:
190
components/Navigation.tsx
Normal file
190
components/Navigation.tsx
Normal file
@ -0,0 +1,190 @@
|
||||
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;
|
||||
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.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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user