Remove broken navigation links

nekiro · Dec 2, 2024 · d60f848 · d60f848
1 parent b6bfc50
commit d60f848
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 28 deletions.
diff --git a/src/components/NewsPanel.tsx b/src/components/NewsPanel.tsx
@@ -0,0 +1,38 @@
+import React, { ReactNode } from "react";
+import Loader from "./Loader";
+import { Flex, Box, Text, Grid, FlexProps } from "@chakra-ui/react";
+import { IoMdTime } from "react-icons/io";
+import { formatDate } from "@lib/.";
+import { HiNewspaper } from "react-icons/hi2";
+
+export interface NewsPanelProps extends FlexProps {
+	header?: string;
+	date?: string | null;
+	identifier?: string | null;
+	children?: ReactNode;
+	isLoading?: boolean;
+}
+
+const NewsPanel = ({ header = "Loading...", date, identifier, children, isLoading = false, borderRadius = "md", ...props }: NewsPanelProps) => {
+	return (
+		<Flex key={identifier} width="100%" flexDirection="column" color="black" bgColor="#fff" borderRadius={borderRadius} {...props}>
+			<Flex bg="#f5f5f5" borderBottomWidth="1px" borderTopWidth="1px" borderColor="#ddd" borderRadius={borderRadius}>
+				<Grid margin="10px" width="100%" templateColumns="1fr auto">
+					<Flex flexDirection="row" alignItems="center" gap="5px">
+						<HiNewspaper />
+						<Text>{header}</Text>
+					</Flex>
+					{date && (
+						<Box display="flex" alignItems="center" justifyContent="flex-end">
+							<IoMdTime />
+							<Text>{formatDate(date)}</Text>
+						</Box>
+					)}
+				</Grid>
+			</Flex>
+			<Box padding="10px">{isLoading ? <Loader /> : children}</Box>
+		</Flex>
+	);
+};
+
+export default NewsPanel;
diff --git a/src/components/Panel.tsx b/src/components/Panel.tsx
@@ -12,7 +12,16 @@ export interface PanelProps extends FlexProps {
 	isLoading?: boolean;
 }
 
-const Panel = ({ header = "Loading...", date, identifier, children, isLoading = false, ...props }: PanelProps) => {
+const Panel = ({
+	header = "Loading...",
+	date,
+	identifier,
+	children,
+	isLoading = false,
+	borderRadius = "md",
+	padding = "10px",
+	...props
+}: PanelProps) => {
 	return (
 		<Flex
 			key={identifier}
@@ -21,12 +30,11 @@ const Panel = ({ header = "Loading...", date, identifier, children, isLoading =
 			color="black"
 			border="1px"
 			borderColor="#ddd"
-			mb="20px"
 			bgColor="#fff"
-			borderRadius="md"
+			borderRadius={borderRadius}
 			{...props}
 		>
-			<Flex bg="#f5f5f5" border="1px" borderColor="#ddd" borderRadius="md">
+			<Flex bg="#f5f5f5" border="1px" borderColor="#ddd" borderRadius={borderRadius}>
 				<Grid margin="10px" width="100%" templateColumns="1fr auto">
 					<Text>{header}</Text>
 					{date && (
@@ -38,7 +46,7 @@ const Panel = ({ header = "Loading...", date, identifier, children, isLoading =
 					)}
 				</Grid>
 			</Flex>
-			<Box padding="10px">{isLoading ? <Loader /> : children}</Box>
+			<Box padding={padding}>{isLoading ? <Loader /> : children}</Box>
 		</Flex>
 	);
 };

diff --git a/src/layout/Footer.tsx b/src/layout/Footer.tsx
@@ -3,7 +3,7 @@ import { Box } from "@chakra-ui/react";
 
 const Footer = () => {
 	return (
-		<Box bgColor="#f5f5f5" border="1px" borderRadius="md" padding="10px" textAlign="center">
+		<Box bgColor="#f5f5f5" borderRadius="md" padding="10px" mt="10px" textAlign="center">
 			Copyright © 2021-2025 Shibaac
 		</Box>
 	);

diff --git a/src/layout/NavBar/index.tsx b/src/layout/NavBar/index.tsx
@@ -17,21 +17,21 @@ const navigationItems: NavigationItems[] = [
 		hasMenu: true,
 		menuItems: [
 			{ text: "Highscores", url: "/community/highscores" },
-			{ text: "Guilds", url: "/community/guilds" },
-			{ text: "Houses", url: "/community/houses" },
+			// { text: "Guilds", url: "/community/guilds" },
+			// { text: "Houses", url: "/community/houses" },
 		],
 		text: "Community",
 	},
 	{
 		hasMenu: true,
 		menuItems: [
-			{ text: "Server Information", url: "/serverinfo" },
+			// { text: "Server Information", url: "/serverinfo" },
 			{ text: "Downloads", url: "/downloads" },
 		],
 		text: "Library",
 	},
-	{ text: "Donate", href: "/donate" },
-	{ text: "Store", href: "/shop" },
+	// { text: "Donate", href: "/donate" },
+	// { text: "Store", href: "/shop" },
 ];
 
 const NavBar = () => {

diff --git a/src/layout/index.tsx b/src/layout/index.tsx
@@ -5,6 +5,7 @@ import SideBar from "./SideBar";
 import Footer from "./Footer";
 import { Box, Image, Flex } from "@chakra-ui/react";
 import { TopBar } from "./TopBar";
+import Panel from "@component/Panel";
 
 const Layout = ({ children }: PropsWithChildren) => {
 	return (
@@ -15,10 +16,10 @@ const Layout = ({ children }: PropsWithChildren) => {
 				<Image width="230px" marginLeft="auto" marginRight="auto" marginBottom="15px" marginTop="15px" src="/images/header.png" alt="shibaac" />
 				<NavBar />
 				<Flex flexDirection={{ base: "column", md: "row" }}>
-					<Box flexGrow="1" marginRight={{ base: 0, md: "3em" }} order={{ base: 2, md: 1 }}>
-						{children}
+					<Panel header="News" flexGrow="1" padding={0} marginRight={{ base: 0, md: "3em" }} order={{ base: 2, md: 1 }}>
+						<Box mt="10px">{children}</Box>
 						<Footer />
-					</Box>
+					</Panel>
 					<SideBar order={{ base: 1, md: 2 }} />
 				</Flex>
 			</Box>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,28 +1,21 @@
 import sanitize from "sanitize-html";
-import Panel from "../components/Panel";
+import NewsPanel from "../components/NewsPanel";
 import React from "react";
 import { trpc } from "@util/trpc";
+import { Flex } from "@chakra-ui/react";
 
 export default function Index() {
 	const news = trpc.news.all.useQuery();
 
-	if (!news.data || news.error) {
-		if (news.error) {
-			// TODO: properly handle errors
-			console.error(news.error);
-		}
-		return <Panel isLoading={true} />;
-	}
-
 	// TODO: paginate?
 
 	return (
-		<>
-			{news.data.map((post) => (
-				<Panel key={`news-${post.id}`} header={post.title} date={post.createdAt}>
+		<Flex flexDir="column" gap="10px">
+			{news.data?.map((post) => (
+				<NewsPanel borderRadius="none" key={`news-${post.id}`} header={post.title} date={post.createdAt}>
 					<div dangerouslySetInnerHTML={{ __html: sanitize(post.content) }} />
-				</Panel>
+				</NewsPanel>
 			))}
-		</>
+		</Flex>
 	);
 }