Compare commits
2 Commits
68199bd7ef
...
456ba7e05d
Author | SHA1 | Date | |
---|---|---|---|
456ba7e05d | |||
c114660b9f |
2
.dockerignore
Normal file
2
.dockerignore
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
dist/
|
||||||
|
node_modules/
|
@ -4,6 +4,7 @@ import {
|
|||||||
Button,
|
Button,
|
||||||
Center,
|
Center,
|
||||||
Flex,
|
Flex,
|
||||||
|
IconButton,
|
||||||
Link,
|
Link,
|
||||||
Menu,
|
Menu,
|
||||||
MenuButton,
|
MenuButton,
|
||||||
@ -17,14 +18,15 @@ import {
|
|||||||
} from "@chakra-ui/react";
|
} from "@chakra-ui/react";
|
||||||
import { Link as ReactRouterLink } from "react-router-dom";
|
import { Link as ReactRouterLink } from "react-router-dom";
|
||||||
|
|
||||||
import { MoonIcon, SunIcon } from "@chakra-ui/icons";
|
import { HamburgerIcon, MoonIcon, SunIcon } from "@chakra-ui/icons";
|
||||||
|
import { IoGolfOutline, IoHomeOutline, IoStatsChartOutline } from "react-icons/io5";
|
||||||
import { createAvatar } from "@dicebear/core";
|
import { createAvatar } from "@dicebear/core";
|
||||||
import { shapes } from "@dicebear/collection";
|
import { shapes } from "@dicebear/collection";
|
||||||
|
|
||||||
import { useProfileQuery } from "../app/services/user";
|
import { useProfileQuery } from "../app/services/user";
|
||||||
|
|
||||||
export default function Header() {
|
export default function Header() {
|
||||||
const { colorMode, toggleColorMode } = useColorMode();
|
const { toggleColorMode } = useColorMode();
|
||||||
const { data: profile, isError } = useProfileQuery(0);
|
const { data: profile, isError } = useProfileQuery(0);
|
||||||
|
|
||||||
const avatar = createAvatar(shapes, { seed: (!isError && profile?.body.email) || "default" });
|
const avatar = createAvatar(shapes, { seed: (!isError && profile?.body.email) || "default" });
|
||||||
@ -68,7 +70,7 @@ export default function Header() {
|
|||||||
</Menu>
|
</Menu>
|
||||||
);
|
);
|
||||||
|
|
||||||
const switchTheme = <Button onClick={toggleColorMode}>{colorMode === "light" ? <MoonIcon /> : <SunIcon />}</Button>;
|
const switchTheme = <Button onClick={toggleColorMode}>{useColorModeValue(<MoonIcon />, <SunIcon />)}</Button>;
|
||||||
|
|
||||||
const logo = (
|
const logo = (
|
||||||
<Box>
|
<Box>
|
||||||
@ -80,17 +82,35 @@ export default function Header() {
|
|||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const navMenu = (
|
||||||
|
<Menu>
|
||||||
|
<MenuButton as={IconButton} aria-label="Options" icon={<HamburgerIcon />} variant="outline" />
|
||||||
|
<MenuList>
|
||||||
|
<MenuItem icon={<IoHomeOutline />} as={ReactRouterLink} to={"/home"}>
|
||||||
|
Home
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem icon={<IoGolfOutline />} as={ReactRouterLink} to={"/problem"}>
|
||||||
|
Problem
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem icon={<IoStatsChartOutline />} as={ReactRouterLink} to={"/profile"}>
|
||||||
|
Profile
|
||||||
|
</MenuItem>
|
||||||
|
</MenuList>
|
||||||
|
</Menu>
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box as="nav" role="navigation" w="100%" bg={useColorModeValue("gray.100", "gray.900")} px={4}>
|
<Box as="nav" role="navigation" w="100%" bg={useColorModeValue("gray.100", "gray.900")} px={4}>
|
||||||
<Flex h={16} alignItems="center" justifyContent="space-between">
|
<Flex h={16} alignItems="center" justifyContent="space-between">
|
||||||
{logo}
|
<Stack direction="row" spacing={4} align="center" justify="center">
|
||||||
|
{logo}
|
||||||
|
{navMenu}
|
||||||
|
</Stack>
|
||||||
|
|
||||||
<Flex alignItems="center">
|
<Stack direction="row" spacing={4} align="center" justify="center">
|
||||||
<Stack direction="row" spacing={4}>
|
{switchTheme}
|
||||||
{switchTheme}
|
{menu}
|
||||||
{menu}
|
</Stack>
|
||||||
</Stack>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
</Flex>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
import { Heading } from "@chakra-ui/react";
|
import { Center, Heading } from "@chakra-ui/react";
|
||||||
|
|
||||||
export default function HomePage() {
|
export default function HomePage() {
|
||||||
return (
|
return (
|
||||||
<>
|
<Center h="40vh">
|
||||||
<Heading>Hello World!</Heading>
|
<Heading>Woo Online Judge</Heading>
|
||||||
</>
|
</Center>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user