navbar improvements and refactored news

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>

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>
+	);
+};

src/components/NewsCard.tsx

@@ -0,0 +1,66 @@
+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 | null;
+	author?: string | null;
+}
+
+export const NewsCard = ({ date, html, header, image, id, author, ...props }: NewsCardProps) => {
+	const { newsBgColor, textColor } = useColors();
+
+	return (
+		<HStack color={textColor} bgColor={newsBgColor} gap={10} borderRadius="md" padding={5} align="start" {...props}>
+			<Link href={`/news/${id}`}>
+				<Image
+					src={image ?? "https://archive.org/download/placeholder-image/placeholder-image.jpg"}
+					maxW="200px"
+					alt="news image"
+					borderRadius="md"
+				/>
+			</Link>
+			<VStack align="start" maxW="100%">
+				<Heading size="md">{header}</Heading>
+				<Text color={textColor} opacity="0.6" fontSize="xs">
+					By {author ?? "admin"}
+				</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>
+	);
+};

src/hooks/useColors.ts

@@ -7,6 +7,7 @@ export interface UseColorsReturnType {
 	hoverColor: string;
 	linkColor: string;
 	inputBgColor: string;
+	newsBgColor: string;
 }
 
 export const useColors = (): UseColorsReturnType => {
@@ -16,6 +17,7 @@ export const useColors = (): UseColorsReturnType => {
 	const hoverColor = useColorModeValue("violet.100", "gray.700");
 	const linkColor = useColorModeValue("violet.400", "violet.200");
 	const inputBgColor = useColorModeValue("violet.100", "violet.100");
+	const newsBgColor = useColorModeValue("gray.200", "gray.700");
 
-	return { textColor, bgColor, hoverColor, linkColor, inputBgColor, btnTextColor };
+	return { textColor, bgColor, hoverColor, linkColor, inputBgColor, btnTextColor, newsBgColor };
 };

src/layout/TopBar/index.tsx

@@ -1,15 +1,15 @@
-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";
 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" />

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,18 @@ 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}
+						header={post.title}
+						author={post.playerNick}
+						date={post.createdAt}
+						html={post.content}
+					/>
 				))}
 			</Content.Body>
 		</Content>

src/server/routers/news.ts

@@ -4,7 +4,16 @@ import prisma from "../../prisma";
 
 export const newsRouter = router({
 	all: procedure.query(async () => {
-		const news = await prisma.aac_news.findMany();
+		const news = await prisma.aac_news.findMany({
+			select: {
+				id: true,
+				title: true,
+				content: true,
+				playerNick: true,
+				imageUrl: true,
+				createdAt: true,
+			},
+		});
 		return news;
 	}),
 	single: procedure.input(z.object({ id: z.number() })).query(async ({ input }) => {