Skip to content

Commit 7778674

Browse files
nekironekiro
committed
navbar improvements and refactored news
1 parent c4f4d44 commit 7778674

File tree

8 files changed

+117
-67
lines changed

8 files changed

+117
-67
lines changed

‎src/components/Label.tsx

+2-7
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,9 @@ export interface LabelProps extends TagProps {
77
margin?: string;
88
}
99

10-
const Label = ({
11-
colorScheme = "violet",
12-
fontSize = "md",
13-
margin = "4px",
14-
children,
15-
}: LabelProps) => {
10+
const Label = ({ colorScheme = "violet", fontSize = "md", margin = "4px", children, ...props }: LabelProps) => {
1611
return (
17-
<Tag variant="solid" colorScheme={colorScheme}>
12+
<Tag variant="solid" colorScheme={colorScheme} {...props}>
1813
<Box fontSize={fontSize} margin={margin}>
1914
{children}
2015
</Box>

‎src/components/Logo.tsx

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Text, Image } from "@chakra-ui/react";
2+
import { TopBarItem } from "@layout/TopBar/TopBarItem";
3+
import Link from "@component/Link";
4+
import Label from "./Label";
5+
6+
export const Logo = () => {
7+
return (
8+
<Link href="/" style={{ height: "100%", textDecoration: "none" }}>
9+
<TopBarItem paddingLeft={0} userSelect="none" pointerEvents="none">
10+
<Image height="35px" boxSize="35px" src="/images/header.png" alt="shibaac" />
11+
<Text fontSize="lg" color="white" ml="10px">
12+
Shibaac
13+
</Text>
14+
<Label fontSize="xs" margin="0" marginLeft={1}>
15+
Alpha
16+
</Label>
17+
</TopBarItem>
18+
</Link>
19+
);
20+
};

‎src/components/NewsCard.tsx

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { Text, VStack, StackProps, HStack, Image, Heading } from "@chakra-ui/react";
2+
import { IoMdTime } from "react-icons/io";
3+
import { formatDate } from "@lib/.";
4+
import { HiNewspaper } from "react-icons/hi2";
5+
import { useColors } from "@hook/useColors";
6+
import sanitize from "sanitize-html";
7+
import Link from "./Link";
8+
9+
const maxChars = 180;
10+
11+
export interface NewsCardProps extends StackProps {
12+
header?: string;
13+
date?: string | null;
14+
html: string;
15+
id: string;
16+
image?: string | null;
17+
author?: string | null;
18+
}
19+
20+
export const NewsCard = ({ date, html, header, image, id, author, ...props }: NewsCardProps) => {
21+
const { newsBgColor, textColor } = useColors();
22+
23+
return (
24+
<HStack color={textColor} bgColor={newsBgColor} gap={10} borderRadius="md" padding={5} align="start" {...props}>
25+
<Link href={`/news/${id}`}>
26+
<Image
27+
src={image ?? "https://archive.org/download/placeholder-image/placeholder-image.jpg"}
28+
maxW="200px"
29+
alt="news image"
30+
borderRadius="md"
31+
/>
32+
</Link>
33+
<VStack align="start" maxW="100%">
34+
<Heading size="md">{header}</Heading>
35+
<Text color={textColor} opacity="0.6" fontSize="xs">
36+
By {author ?? "admin"}
37+
</Text>
38+
<Text
39+
w="full"
40+
maxW="100%"
41+
marginTop={2}
42+
overflowWrap="break-word"
43+
whiteSpace="normal"
44+
wordBreak="break-word"
45+
fontSize="sm"
46+
dangerouslySetInnerHTML={{ __html: sanitize(html.length > maxChars ? html.slice(0, maxChars) + "..." : html) }}
47+
/>
48+
</VStack>
49+
{/* <Flex bgColor={bgColor} borderBottomWidth="1px" borderTopWidth="1px" borderColor="#ddd" borderRadius={borderRadius}>
50+
<Grid margin="10px" width="100%" templateColumns="1fr auto">
51+
<Flex flexDirection="row" alignItems="center" gap="5px">
52+
<HiNewspaper />
53+
<Text color={textColor}>{header}</Text>
54+
</Flex>
55+
{date && (
56+
<Box display="flex" alignItems="center" justifyContent="flex-end">
57+
<IoMdTime />
58+
<Text>{formatDate(date)}</Text>
59+
</Box>
60+
)}
61+
</Grid>
62+
</Flex>
63+
<Box padding="10px">{isLoading ? <Loader /> : children}</Box> */}
64+
</HStack>
65+
);
66+
};

‎src/components/NewsPanel.tsx

-41
This file was deleted.

‎src/hooks/useColors.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export interface UseColorsReturnType {
77
hoverColor: string;
88
linkColor: string;
99
inputBgColor: string;
10+
newsBgColor: string;
1011
}
1112

1213
export const useColors = (): UseColorsReturnType => {
@@ -16,6 +17,7 @@ export const useColors = (): UseColorsReturnType => {
1617
const hoverColor = useColorModeValue("violet.100", "gray.700");
1718
const linkColor = useColorModeValue("violet.400", "violet.200");
1819
const inputBgColor = useColorModeValue("violet.100", "violet.100");
20+
const newsBgColor = useColorModeValue("gray.200", "gray.700");
1921

20-
return { textColor, bgColor, hoverColor, linkColor, inputBgColor, btnTextColor };
22+
return { textColor, bgColor, hoverColor, linkColor, inputBgColor, btnTextColor, newsBgColor };
2123
};

‎src/layout/TopBar/index.tsx

+3-10
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
import { Text, Image, HStack, Spacer } from "@chakra-ui/react";
1+
import { Text, HStack, Spacer } from "@chakra-ui/react";
22
import { TopBarItem } from "./TopBarItem";
33
import { trpc } from "@util/trpc";
44
import Link from "@component/Link";
55
import { TopBarSeparator } from "./TopBarSeparator";
66
import { FaDiscord, FaGithub } from "react-icons/fa";
77
import { TbBrandYoutubeFilled } from "react-icons/tb";
88
import DropdownButton from "@component/DropdownButton";
9-
import { useRouter } from "next/router";
109
import { DarkModeButton } from "@component/DarkModeButton";
1110
import { NavBar } from "@component/NavBar";
1211
import { IoIosSearch } from "react-icons/io";
12+
import { Logo } from "@component/Logo";
1313

1414
export interface NavigationItems {
1515
text: string;
@@ -47,14 +47,7 @@ export const TopBar = () => {
4747
return (
4848
<NavBar justifyContent="flex-start" paddingX="14em">
4949
<HStack>
50-
<Link href="/" style={{ height: "100%", textDecoration: "none" }}>
51-
<TopBarItem paddingLeft={0} userSelect="none" pointerEvents="none">
52-
<Image height="35px" boxSize="35px" src="/images/header.png" alt="shibaac" />
53-
<Text fontSize="lg" color="white" ml="10px">
54-
Shibaac
55-
</Text>
56-
</TopBarItem>
57-
</Link>
50+
<Logo />
5851
<DarkModeButton aria-label="Toggle Dark Mode" />
5952
<Link href="/character" title="Search Character" color="white" _hover={{ color: "violet.300" }}>
6053
<IoIosSearch size="25px" />

‎src/pages/index.tsx

+13-7
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
import sanitize from "sanitize-html";
2-
import NewsPanel from "../components/NewsPanel";
3-
import React from "react";
1+
import { NewsCard } from "../components/NewsCard";
42
import { trpc } from "@util/trpc";
53
import { Content } from "@component/Content";
4+
import { Heading } from "@chakra-ui/react";
65

76
export default function Index() {
87
const news = trpc.news.all.useQuery();
@@ -11,11 +10,18 @@ export default function Index() {
1110

1211
return (
1312
<Content>
14-
<Content.Body>
13+
<Content.Body maxW="unset" gap={5}>
14+
<Heading size="lg">News</Heading>
1515
{news.data?.map((post) => (
16-
<NewsPanel borderRadius="none" key={`news-${post.id}`} header={post.title} date={post.createdAt}>
17-
<div dangerouslySetInnerHTML={{ __html: sanitize(post.content) }} />
18-
</NewsPanel>
16+
<NewsCard
17+
key={`news-${post.id}`}
18+
id={String(post.id)}
19+
image={post.imageUrl}
20+
header={post.title}
21+
author={post.playerNick}
22+
date={post.createdAt}
23+
html={post.content}
24+
/>
1925
))}
2026
</Content.Body>
2127
</Content>

‎src/server/routers/news.ts

+10-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,16 @@ import prisma from "../../prisma";
44

55
export const newsRouter = router({
66
all: procedure.query(async () => {
7-
const news = await prisma.aac_news.findMany();
7+
const news = await prisma.aac_news.findMany({
8+
select: {
9+
id: true,
10+
title: true,
11+
content: true,
12+
playerNick: true,
13+
imageUrl: true,
14+
createdAt: true,
15+
},
16+
});
817
return news;
918
}),
1019
single: procedure.input(z.object({ id: z.number() })).query(async ({ input }) => {

0 commit comments

Comments
 (0)