Skip to content

Commit 8d9f8c0

Browse files
nekironekiro
committed
Add top bar
1 parent 180fcfa commit 8d9f8c0

File tree

5 files changed

+53
-33
lines changed

5 files changed

+53
-33
lines changed

‎src/layout/SideBar.tsx

-7
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,6 @@ const SideBar = (props: LayoutProps) => {
1414

1515
return (
1616
<Box minWidth="15em" {...props}>
17-
<Panel header="Server Status" isLoading={status.isLoading}>
18-
<Flex alignItems="center">
19-
{status.data?.online ? <Label colorScheme="green">ONLINE</Label> : <Label colorScheme="red">OFFLINE</Label>}
20-
<Link marginLeft="10px" href="/online" text={`${status.data?.onlineCount} players online`} />
21-
</Flex>
22-
</Panel>
23-
2417
<Panel header="Top 5 Level" isLoading={topPlayers.isLoading}>
2518
<StripedTable
2619
head={[{ text: "Name" }, { text: "Level" }]}

‎src/layout/TopBar/TopBarItem.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { BoxProps, Flex } from "@chakra-ui/react";
2+
3+
export interface TopBarItemProps extends BoxProps {
4+
children?: React.ReactNode;
5+
}
6+
7+
export const TopBarItem = ({ children, ...props }: TopBarItemProps) => {
8+
return (
9+
<Flex borderLeftWidth="1px" borderRightWidth="1px" borderColor="violet.400" paddingRight="15px" paddingLeft="15px" h="100%" {...props}>
10+
{children}
11+
</Flex>
12+
);
13+
};

‎src/layout/TopBar/index.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Flex, Text } from "@chakra-ui/react";
2+
import { TopBarItem } from "./TopBarItem";
3+
import { trpc } from "@util/trpc";
4+
5+
export const TopBar = () => {
6+
const status = trpc.status.status.useQuery().data;
7+
8+
return (
9+
<Flex justifyContent="center" bgColor="blackAlpha.600" h="40px" borderBottomWidth="1px" borderColor="violet.400">
10+
<Flex alignItems="center" flexDir="row" gap="5px">
11+
<TopBarItem alignItems="center" flexDirection="row">
12+
<Text fontSize="md" color={status?.online ? "green" : "red"}>
13+
{status?.onlineCount ?? "..."}
14+
</Text>
15+
<Text fontSize="md" ml="5px" color="white">
16+
players online
17+
</Text>
18+
</TopBarItem>
19+
</Flex>
20+
</Flex>
21+
);
22+
};

‎src/layout/index.tsx

+15-11
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,25 @@ import NavBar from "./NavBar";
44
import SideBar from "./SideBar";
55
import Footer from "./Footer";
66
import { Box, Image, Flex } from "@chakra-ui/react";
7+
import { TopBar } from "./TopBar";
78

89
const Layout = ({ children }: PropsWithChildren) => {
910
return (
10-
<Box w={{ base: "95%", md: "70%" }} marginX={"auto"} marginY={{ base: "1em", md: 0 }}>
11+
<>
12+
<TopBar />
1113
<Head />
12-
<Image width="230px" marginLeft="auto" marginRight="auto" marginBottom="15px" marginTop="15px" src="/images/header.png" alt="shibaac" />
13-
<NavBar />
14-
<Flex flexDirection={{ base: "column", md: "row" }}>
15-
<Box flexGrow="1" marginRight={{ base: 0, md: "3em" }} order={{ base: 2, md: 1 }}>
16-
{children}
17-
<Footer />
18-
</Box>
19-
<SideBar order={{ base: 1, md: 2 }} />
20-
</Flex>
21-
</Box>
14+
<Box w={{ base: "95%", md: "95%", xl: "65%", "2xl": "35%" }} marginX={"auto"} marginY={{ base: "1em", md: 0 }}>
15+
<Image width="230px" marginLeft="auto" marginRight="auto" marginBottom="15px" marginTop="15px" src="/images/header.png" alt="shibaac" />
16+
<NavBar />
17+
<Flex flexDirection={{ base: "column", md: "row" }}>
18+
<Box flexGrow="1" marginRight={{ base: 0, md: "3em" }} order={{ base: 2, md: 1 }}>
19+
{children}
20+
<Footer />
21+
</Box>
22+
<SideBar order={{ base: 1, md: 2 }} />
23+
</Flex>
24+
</Box>
25+
</>
2226
);
2327
};
2428

‎src/pages/community/guilds.tsx

+3-15
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,9 @@ import FormWrapper, { FormField } from "../../components/FormWrapper";
66
import { withSessionSsr } from "../../lib/session";
77
import { fetchApi } from "../../lib/request";
88
import Link from "next/link";
9-
import { ButtonType, ButtonColorType } from "../../components/Button";
10-
11-
import {
12-
Box,
13-
Flex,
14-
Button,
15-
Link as ChakraLink,
16-
Modal,
17-
ModalOverlay,
18-
ModalContent,
19-
ModalHeader,
20-
ModalCloseButton,
21-
ModalBody,
22-
Avatar,
23-
} from "@chakra-ui/react";
9+
import { ButtonType } from "../../components/Button";
10+
11+
import { Box, Flex, Button, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Avatar } from "@chakra-ui/react";
2412

2513
type Button = {
2614
type?: "submit" | "button" | "reset";

0 commit comments

Comments
 (0)