From db51348b0ba193ac4bd17a8ad5a15359f0ea3b2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcin=20Ja=C5=82ocha?= <nekiro.dev@gmail.com>
Date: Thu, 26 Dec 2024 19:27:17 +0100
Subject: [PATCH] navbar improvements and refactored news

---
 src/components/Label.tsx     |  9 ++---
 src/components/Logo.tsx      | 20 +++++++++++
 src/components/NewsCard.tsx  | 65 ++++++++++++++++++++++++++++++++++++
 src/components/NewsPanel.tsx | 41 -----------------------
 src/layout/TopBar/index.tsx  | 13 ++------
 src/pages/index.tsx          | 19 +++++++----
 6 files changed, 102 insertions(+), 65 deletions(-)
 create mode 100644 src/components/Logo.tsx
 create mode 100644 src/components/NewsCard.tsx
 delete mode 100644 src/components/NewsPanel.tsx

diff --git a/src/components/Label.tsx b/src/components/Label.tsx
index 88acc0e..3ab38ce 100644
--- a/src/components/Label.tsx
+++ b/src/components/Label.tsx
@@ -7,14 +7,9 @@ export interface LabelProps extends TagProps {
 	margin?: string;
 }
 
-const Label = ({
-	colorScheme = "violet",
-	fontSize = "md",
-	margin = "4px",
-	children,
-}: LabelProps) => {
+const Label = ({ colorScheme = "violet", fontSize = "md", margin = "4px", children, ...props }: LabelProps) => {
 	return (
-		<Tag variant="solid" colorScheme={colorScheme}>
+		<Tag variant="solid" colorScheme={colorScheme} {...props}>
 			<Box fontSize={fontSize} margin={margin}>
 				{children}
 			</Box>
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
new file mode 100644
index 0000000..545b283
--- /dev/null
+++ b/src/components/Logo.tsx
@@ -0,0 +1,20 @@
+import { Text, Image } from "@chakra-ui/react";
+import { TopBarItem } from "@layout/TopBar/TopBarItem";
+import Link from "@component/Link";
+import Label from "./Label";
+
+export const Logo = () => {
+	return (
+		<Link href="/" style={{ height: "100%", textDecoration: "none" }}>
+			<TopBarItem paddingLeft={0} userSelect="none" pointerEvents="none">
+				<Image height="35px" boxSize="35px" src="/images/header.png" alt="shibaac" />
+				<Text fontSize="lg" color="white" ml="10px">
+					Shibaac
+				</Text>
+				<Label fontSize="xs" margin="0" marginLeft={1}>
+					Alpha
+				</Label>
+			</TopBarItem>
+		</Link>
+	);
+};
diff --git a/src/components/NewsCard.tsx b/src/components/NewsCard.tsx
new file mode 100644
index 0000000..c3041df
--- /dev/null
+++ b/src/components/NewsCard.tsx
@@ -0,0 +1,65 @@
+import { Text, VStack, StackProps, HStack, Image, Heading } from "@chakra-ui/react";
+import { IoMdTime } from "react-icons/io";
+import { formatDate } from "@lib/.";
+import { HiNewspaper } from "react-icons/hi2";
+import { useColors } from "@hook/useColors";
+import sanitize from "sanitize-html";
+import Link from "./Link";
+
+const maxChars = 180;
+
+export interface NewsCardProps extends StackProps {
+	header?: string;
+	date?: string | null;
+	html: string;
+	id: string;
+	image?: string;
+}
+
+export const NewsCard = ({ date, html, header, image, id, ...props }: NewsCardProps) => {
+	const { bgColor, textColor } = useColors();
+
+	return (
+		<HStack color={textColor} bgColor={bgColor} gap={10} align="start" {...props}>
+			<Link href={`/news/${id}`}>
+				<Image
+					src={image ?? "https://archive.org/download/placeholder-image/placeholder-image.jpg"}
+					maxW="200px"
+					alt="Placeholder"
+					borderRadius="md"
+				/>
+			</Link>
+			<VStack align="start" maxW="100%">
+				<Heading size="md">{header}</Heading>
+				<Text color="whiteAlpha.600" fontSize="xs">
+					By author
+				</Text>
+				<Text
+					w="full"
+					maxW="100%"
+					marginTop={2}
+					overflowWrap="break-word"
+					whiteSpace="normal"
+					wordBreak="break-word"
+					fontSize="sm"
+					dangerouslySetInnerHTML={{ __html: sanitize(html.length > maxChars ? html.slice(0, maxChars) + "..." : html) }}
+				/>
+			</VStack>
+			{/* <Flex bgColor={bgColor} 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 color={textColor}>{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> */}
+		</HStack>
+	);
+};
diff --git a/src/components/NewsPanel.tsx b/src/components/NewsPanel.tsx
deleted file mode 100644
index 24d43ac..0000000
--- a/src/components/NewsPanel.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-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";
-import { useColors } from "@hook/useColors";
-
-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 = "none", ...props }: NewsPanelProps) => {
-	const { bgColor, textColor } = useColors();
-
-	return (
-		<Flex key={identifier} width="100%" flexDirection="column" color={textColor} bgColor={bgColor} borderRadius={borderRadius} {...props}>
-			<Flex bgColor={bgColor} 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 color={textColor}>{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/layout/TopBar/index.tsx b/src/layout/TopBar/index.tsx
index 8d758e4..4bdb3d8 100644
--- a/src/layout/TopBar/index.tsx
+++ b/src/layout/TopBar/index.tsx
@@ -1,4 +1,4 @@
-import { Text, Image, HStack, Spacer } from "@chakra-ui/react";
+import { Text, HStack, Spacer } from "@chakra-ui/react";
 import { TopBarItem } from "./TopBarItem";
 import { trpc } from "@util/trpc";
 import Link from "@component/Link";
@@ -6,10 +6,10 @@ import { TopBarSeparator } from "./TopBarSeparator";
 import { FaDiscord, FaGithub } from "react-icons/fa";
 import { TbBrandYoutubeFilled } from "react-icons/tb";
 import DropdownButton from "@component/DropdownButton";
-import { useRouter } from "next/router";
 import { DarkModeButton } from "@component/DarkModeButton";
 import { NavBar } from "@component/NavBar";
 import { IoIosSearch } from "react-icons/io";
+import { Logo } from "@component/Logo";
 
 export interface NavigationItems {
 	text: string;
@@ -47,14 +47,7 @@ export const TopBar = () => {
 	return (
 		<NavBar justifyContent="flex-start" paddingX="14em">
 			<HStack>
-				<Link href="/" style={{ height: "100%", textDecoration: "none" }}>
-					<TopBarItem paddingLeft={0} userSelect="none" pointerEvents="none">
-						<Image height="35px" boxSize="35px" src="/images/header.png" alt="shibaac" />
-						<Text fontSize="lg" color="white" ml="10px">
-							Shibaac
-						</Text>
-					</TopBarItem>
-				</Link>
+				<Logo />
 				<DarkModeButton aria-label="Toggle Dark Mode" />
 				<Link href="/character" title="Search Character" color="white" _hover={{ color: "violet.300" }}>
 					<IoIosSearch size="25px" />
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 16df2f7..a2f77cb 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,8 +1,7 @@
-import sanitize from "sanitize-html";
-import NewsPanel from "../components/NewsPanel";
-import React from "react";
+import { NewsCard } from "../components/NewsCard";
 import { trpc } from "@util/trpc";
 import { Content } from "@component/Content";
+import { Heading } from "@chakra-ui/react";
 
 export default function Index() {
 	const news = trpc.news.all.useQuery();
@@ -11,11 +10,17 @@ export default function Index() {
 
 	return (
 		<Content>
-			<Content.Body>
+			<Content.Body maxW="unset" gap={5}>
+				<Heading size="lg">News</Heading>
 				{news.data?.map((post) => (
-					<NewsPanel borderRadius="none" key={`news-${post.id}`} header={post.title} date={post.createdAt}>
-						<div dangerouslySetInnerHTML={{ __html: sanitize(post.content) }} />
-					</NewsPanel>
+					<NewsCard
+						key={`news-${post.id}`}
+						id={String(post.id)}
+						image={post.imageUrl ?? undefined}
+						header={post.title}
+						date={post.createdAt}
+						html={post.content}
+					/>
 				))}
 			</Content.Body>
 		</Content>