neki/Enshi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tweaking at home page

Browse Source
This commit is contained in:
Max 2025-02-06 23:20:14 +03:00
parent c36e4a7f7d
commit f70582ce83
13 changed files with 328 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
enshi/.prettierrc
View File

@ -1,4 +1,7 @@
{ {
"tabWidth": 4, "tabWidth": 4,
"useTabs": false "useTabs": true,
"printWidth": 80,
"semi": true,
"quoteProps": "consistent"
} }

32
enshi/index.html
View File

@ -1,21 +1,21 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link <link
href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Enshi</title> <title>Enshi</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>
</html> </html>

95
enshi/package-lock.json generated
View File

@ -8,6 +8,7 @@
"name": "enshi", "name": "enshi",
"version": "0.1.8", "version": "0.1.8",
"dependencies": { "dependencies": {
"@radix-ui/react-aspect-ratio": "^1.1.2",
"@radix-ui/react-dialog": "^1.1.2", "@radix-ui/react-dialog": "^1.1.2",
"@radix-ui/react-form": "^0.1.0", "@radix-ui/react-form": "^0.1.0",
"@radix-ui/react-icons": "^1.3.2", "@radix-ui/react-icons": "^1.3.2",
@ -20,6 +21,7 @@
"@tanstack/react-query-devtools": "^5.61.0", "@tanstack/react-query-devtools": "^5.61.0",
"@types/quill": "^2.0.14", "@types/quill": "^2.0.14",
"axios": "^1.7.7", "axios": "^1.7.7",
"dayjs": "^1.11.13",
"html-react-parser": "^5.1.16", "html-react-parser": "^5.1.16",
"i18n": "^0.15.1", "i18n": "^0.15.1",
"i18next": "^23.14.0", "i18next": "^23.14.0",
@ -1296,12 +1298,12 @@
} }
}, },
"node_modules/@radix-ui/react-aspect-ratio": { "node_modules/@radix-ui/react-aspect-ratio": {
"version": "1.1.0", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.0.tgz", "resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.2.tgz",
"integrity": "sha512-dP87DM/Y7jFlPgUZTlhx6FF5CEzOiaxp2rBCKlaXlpH5Ip/9Fg5zZ9lDOQ5o/MOfUlf36eak14zoWYpgcgGoOg==", "integrity": "sha512-TaJxYoCpxJ7vfEkv2PTNox/6zzmpKXT6ewvCuf2tTOIVN45/Jahhlld29Yw4pciOXS2Xq91/rSGEdmEnUWZCqA==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@radix-ui/react-primitive": "2.0.0" "@radix-ui/react-primitive": "2.0.2"
}, },
"peerDependencies": { "peerDependencies": {
"@types/react": "*", "@types/react": "*",
@ -1318,6 +1320,62 @@
} }
} }
}, },
"node_modules/@radix-ui/react-aspect-ratio/node_modules/@radix-ui/react-compose-refs": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
"integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==",
"license": "MIT",
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-aspect-ratio/node_modules/@radix-ui/react-primitive": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz",
"integrity": "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-slot": "1.1.2"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-aspect-ratio/node_modules/@radix-ui/react-slot": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
"integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-compose-refs": "1.1.1"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-avatar": { "node_modules/@radix-ui/react-avatar": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.0.tgz", "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.0.tgz",
@ -2935,6 +2993,29 @@
} }
} }
}, },
"node_modules/@radix-ui/themes/node_modules/@radix-ui/react-aspect-ratio": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.0.tgz",
"integrity": "sha512-dP87DM/Y7jFlPgUZTlhx6FF5CEzOiaxp2rBCKlaXlpH5Ip/9Fg5zZ9lDOQ5o/MOfUlf36eak14zoWYpgcgGoOg==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-primitive": "2.0.0"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/themes/node_modules/@radix-ui/react-dialog": { "node_modules/@radix-ui/themes/node_modules/@radix-ui/react-dialog": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.1.tgz", "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.1.tgz",
@ -4216,6 +4297,12 @@
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/dayjs": {
"version": "1.11.13",
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
"integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
"license": "MIT"
},
"node_modules/debug": { "node_modules/debug": {
"version": "4.3.7", "version": "4.3.7",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",

2
enshi/package.json
View File

@ -11,6 +11,7 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@radix-ui/react-aspect-ratio": "^1.1.2",
"@radix-ui/react-dialog": "^1.1.2", "@radix-ui/react-dialog": "^1.1.2",
"@radix-ui/react-form": "^0.1.0", "@radix-ui/react-form": "^0.1.0",
"@radix-ui/react-icons": "^1.3.2", "@radix-ui/react-icons": "^1.3.2",
@ -23,6 +24,7 @@
"@tanstack/react-query-devtools": "^5.61.0", "@tanstack/react-query-devtools": "^5.61.0",
"@types/quill": "^2.0.14", "@types/quill": "^2.0.14",
"axios": "^1.7.7", "axios": "^1.7.7",
"dayjs": "^1.11.13",
"html-react-parser": "^5.1.16", "html-react-parser": "^5.1.16",
"i18n": "^0.15.1", "i18n": "^0.15.1",
"i18next": "^23.14.0", "i18next": "^23.14.0",

5
enshi/src/App.tsx
View File

@ -3,6 +3,8 @@ import "@radix-ui/themes/styles.css";
import { QueryClientProvider } from "@tanstack/react-query"; import { QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import "axios"; import "axios";
import dayjs from "dayjs";
import relativeTime from 'dayjs/plugin/relativeTime';
import { useAtomValue } from "jotai"; import { useAtomValue } from "jotai";
import { createBrowserRouter, RouterProvider } from "react-router-dom"; import { createBrowserRouter, RouterProvider } from "react-router-dom";
import queryClient from "./api/QueryClient/QueryClient"; import queryClient from "./api/QueryClient/QueryClient";
@ -11,6 +13,9 @@ import { themeAtom } from "./AtomStore/AtomStore";
import ToastProvider from "./Components/ToastProvider/ToastProvider"; import ToastProvider from "./Components/ToastProvider/ToastProvider";
import { routes } from "./routes/routes"; import { routes } from "./routes/routes";
dayjs.extend(relativeTime)
const router = createBrowserRouter(routes); const router = createBrowserRouter(routes);
export default function App() { export default function App() {

98
enshi/src/Components/ArticleViewer/ArticleViewer.tsx
View File

@ -12,65 +12,67 @@ import VoteButton, { DOWNVOTE, UPVOTE } from "./VoteButton/VoteButton";
import VoteCounter from "./VoteCounter/VoteCounter"; import VoteCounter from "./VoteCounter/VoteCounter";
type TArticleViewer = { type TArticleViewer = {
htmlToParse?: string; htmlToParse?: string;
}; };
export default function ArticleViewer(props: TArticleViewer) { export default function ArticleViewer(props: TArticleViewer) {
let queryParams = useParams(); let queryParams = useParams();
const user = useAtomValue(userAtom); const user = useAtomValue(userAtom);
const { data, isPending } = useQuery({ const { data, isPending } = useQuery({
queryKey: [`post_${queryParams["postId"]}`], queryKey: [`post_${queryParams["postId"]}`],
queryFn: async () => { queryFn: async () => {
const response = await axiosLocalhost.get( const response = await axiosLocalhost.get(
`posts/${queryParams["postId"]}` `posts/${queryParams["postId"]}`
); );
return response.data; return response.data;
}, },
gcTime: 0, gcTime: 0,
refetchOnMount: true, refetchOnMount: true,
}); });
if (isPending) return <SkeletonPostLoader />; if (isPending) return <SkeletonPostLoader />;
return ( return (
<ScrollArea className="p-0 mx-auto overflow-hidden ql-editor max-w-pc-width"> <ScrollArea className="p-0 mx-auto overflow-hidden ql-editor max-w-pc-width">
<Flex direction={"column"} className="overflow-hidden"> <Flex direction={"column"} className="overflow-hidden">
<Text className="mb-2" as="div" size={"9"}> <Text className="mb-2" as="div" size={"9"}>
{data.title} {data.title}
</Text> </Text>
<Flex <Flex
gap={"3"} gap={"3"}
className="items-center mt-4 mb-2 overflow-hidden align-baseline" className="items-center mt-4 mb-2 overflow-hidden align-baseline"
> >
<Flex gap={"1"}> <Flex gap={"1"}>
<VoteButton <VoteButton
vote={UPVOTE} vote={UPVOTE}
postId={queryParams["postId"] || ""} postId={queryParams["postId"] || ""}
/> />
<VoteCounter postId={queryParams["postId"] || ""} /> <VoteCounter postId={queryParams["postId"] || ""} />
<VoteButton <VoteButton
vote={DOWNVOTE} vote={DOWNVOTE}
postId={queryParams["postId"] || ""} postId={queryParams["postId"] || ""}
/> />
</Flex> </Flex>
<Box hidden={data.user_id != user?.id}> <Box hidden={data.user_id != user?.id}>
<ChangePostButton <ChangePostButton
postId={queryParams["postId"] || ""} postId={queryParams["postId"] || ""}
/> />
</Box> </Box>
{user ? <AddPostToBlogDialog /> : null} {user ? <AddPostToBlogDialog /> : null}
</Flex> </Flex>
</Flex> </Flex>
<Separator size={"4"} className="my-2" /> <Separator size={"4"} className="my-2" />
<Interweave content={data.content} /> <Text>
</ScrollArea> <Interweave content={data.content} />
); </Text>
</ScrollArea>
);
} }

4
enshi/src/Components/NavBar/NavigationMenu/NavigationMenu.tsx
View File

@ -9,8 +9,8 @@ export default function CustomNavigationMenu() {
return ( return (
<div className="flex-1"> <div className="flex-1">
<NavigationMenu.Root orientation="horizontal"> <NavigationMenu.Root orientation="horizontal" className="h-full">
<NavigationMenu.List className="flex items-center justify-start gap-8"> <NavigationMenu.List className="flex items-center justify-start h-full gap-8 my-auto">
<NavItem text={t("home")} to="/" /> <NavItem text={t("home")} to="/" />
<NavItem text={t("following")} to="/c" /> <NavItem text={t("following")} to="/c" />

36
enshi/src/Components/NavBar/RightButtonBar/ThemeChangeButton/ThemeChangeButton.tsx
View File

@ -4,20 +4,28 @@ import { useAtom } from "jotai";
import { themeAtom } from "../../../../AtomStore/AtomStore"; import { themeAtom } from "../../../../AtomStore/AtomStore";
export default function ThemeChangeButton() { export default function ThemeChangeButton() {
const [theme, setTheme] = useAtom(themeAtom); const [theme, setTheme] = useAtom(themeAtom);
const toggleTheme = () => {
if (theme === "light") {
setTheme("dark");
} else {
setTheme("light");
}
};
const toggleTheme = () => { return (
if(theme === 'light') { <IconButton
setTheme('dark') size={"3"}
} else { onClick={toggleTheme}
setTheme('light') className="mx-0 my-auto rounded-full p-[8px]"
} variant="ghost"
} >
{theme === "light" ? (
return ( <SunIcon className="size-6" />
<IconButton onClick={toggleTheme} className="mx-0 my-auto rounded-full p-[8px]" variant="ghost"> ) : (
{theme === 'light' ? <SunIcon /> : <MoonIcon />} <MoonIcon className="size-6" />
</IconButton> )}
) </IconButton>
);
} }

4
enshi/src/Components/NavBar/RightButtonBar/UserButton/UserButton.tsx
View File

@ -26,11 +26,11 @@ export default function UserButton() {
<Tooltip content={"User menu"} className="w-fit"> <Tooltip content={"User menu"} className="w-fit">
<DropdownMenu.Trigger> <DropdownMenu.Trigger>
<IconButton <IconButton
size={"2"} size={"3"}
className="items-center my-auto rounded-full" className="items-center my-auto rounded-full"
variant="ghost" variant="ghost"
> >
<PersonIcon /> <PersonIcon className="size-6" />
</IconButton> </IconButton>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
</Tooltip> </Tooltip>

84
enshi/src/Pages/RandomPostsPage/PostCard/PostCard.tsx
View File

@ -1,26 +1,74 @@
import { ImageIcon } from "@radix-ui/react-icons"; import { CalendarIcon } from "@radix-ui/react-icons";
import { Box, Card, Heading } from "@radix-ui/themes"; import {
Box,
Card,
Flex,
Heading,
Inset,
Text,
Tooltip,
} from "@radix-ui/themes";
import dayjs from "dayjs";
import "dayjs/locale/ru";
import { useMemo } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { Post } from "../../../@types/PostTypes"; import { Post } from "../../../@types/PostTypes";
export default function PostCard(props: Post) { export default function PostCard(props: Post) {
const navigate = useNavigate() const navigate = useNavigate();
const clickHandler = () => { const parsedDate = dayjs(props.created_at)
navigate(`/posts/${props.post_id.toString()}`) .locale("ru")
} .format("DD MMMM YYYY");
return ( const clickHandler = () => {
<Card className="h-32 mb-4" onClick={clickHandler}> navigate(`/posts/${props.post_id.toString()}`);
<Box className="flex size-full"> };
<Box>
<ImageIcon className="w-full h-full" />
</Box>
<Box className="px-4 pt-2"> const seed = useMemo(() => {
<Heading>{props.title}</Heading> return Math.floor(Math.random() * (1 + Math.random()) * 100000);
</Box> }, []);
</Box>
</Card> return (
); <Card
className="flex cursor-pointer"
onClick={clickHandler}
>
<Box className="flex-1 h-full min-w-[550px]">
<Inset side={"left"} clip={"padding-box"}>
<img
className="w-full h-72"
src={`https://picsum.photos/seed/${seed}/550/288?grayscale`}
alt="Bold typography"
/>
</Inset>
</Box>
<Flex
direction={"column"}
className="justify-between flex-1 w-full px-4 pt-2"
>
<Heading>{props.title}</Heading>
<Flex gap={"2"} className="items-end justify-start flex-1">
<Tooltip content={`Written at`}>
<Flex className="items-center gap-2">
<CalendarIcon className="size-6" />
<Text
size={{
sm: "4",
md: "5",
lg: "6",
}}
weight={"medium"}
className="flex items-center gap-1"
>
{`${parsedDate}`}
</Text>
</Flex>
</Tooltip>
</Flex>
</Flex>
</Card>
);
} }

132
enshi/src/Pages/RandomPostsPage/RandomPostsPage.tsx
View File

@ -1,11 +1,4 @@
import { import { Box, Flex, ScrollArea, Text } from "@radix-ui/themes";
Box,
Flex,
Heading,
ScrollArea,
Separator,
Text,
} from "@radix-ui/themes";
import { useInfiniteQuery } from "@tanstack/react-query"; import { useInfiniteQuery } from "@tanstack/react-query";
import { useEffect } from "react"; import { useEffect } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@ -14,73 +7,74 @@ import { SelectedPostsResponse } from "../../@types/PostTypes";
import { axiosLocalhost } from "../../api/axios/axios"; import { axiosLocalhost } from "../../api/axios/axios";
import PostCard from "./PostCard/PostCard"; import PostCard from "./PostCard/PostCard";
const LIMIT = 5; const LIMIT = 7;
export default function RandomPostsPage() { export default function RandomPostsPage() {
const { t } = useTranslation(); const { t } = useTranslation();
const [ref, inView] = useInView(); const [ref, inView] = useInView();
const { data, isFetching, fetchNextPage, hasNextPage } = useInfiniteQuery({ const { data, isFetching, fetchNextPage, hasNextPage } = useInfiniteQuery({
queryKey: [`random_post_inf`], queryKey: [`random_post_inf`],
queryFn: async ({ pageParam }): Promise<SelectedPostsResponse> => { queryFn: async ({ pageParam }): Promise<SelectedPostsResponse> => {
const response = await axiosLocalhost.get( const response = await axiosLocalhost.get(
`/posts/random?limit=${LIMIT}&offset=${pageParam}` `/posts/random?limit=${LIMIT}&offset=${pageParam}`
); );
return response.data as SelectedPostsResponse; return response.data as SelectedPostsResponse;
}, },
initialPageParam: 0, initialPageParam: 0,
getPreviousPageParam: (lastPage) => getPreviousPageParam: (lastPage) =>
lastPage.prev_page_index < 0 ? undefined : lastPage.prev_page_index, lastPage.prev_page_index < 0 ? undefined : lastPage.prev_page_index,
getNextPageParam: (lastPage) => getNextPageParam: (lastPage) =>
lastPage.next_page_index < 0 ? undefined : lastPage.next_page_index, lastPage.next_page_index < 0 ? undefined : lastPage.next_page_index,
}); });
useEffect(() => { useEffect(() => {
if (inView) { if (inView) {
if (hasNextPage) fetchNextPage(); if (hasNextPage) fetchNextPage();
} }
}, [inView]); }, [inView]);
return ( return (
<> <>
<Flex direction={"column"} className="w-full mx-auto overflow-hidden max-w-pc-width "> <ScrollArea>
<Heading size={"9"} weight={"regular"} className="text-center"> <Flex
{t("discover")} direction={"column"}
</Heading> className="w-full overflow-hidden sm:mx-auto max-w-pc-width "
>
<Flex direction={"column"} gap={"4"}>
{data?.pages.map((post, i) => {
return (
<Flex direction={"column"} gap={"4"} key={`${i}`}>
{post.selected_posts.map((post, j) => {
return (
<div key={`${j}${post.post_id}`}>
<PostCard {...post} />
</div>
);
})}
</Flex>
);
})}
<Separator size={"4"} className="my-8" /> <Box ref={ref} className="w-full mb-4 text-center">
<ScrollArea> {isFetching ? (
{data?.pages.map((post, i) => { <Text>Loading more...</Text>
return ( ) : hasNextPage ? (
<div key={i}> <Text
{post.selected_posts.map((post, i) => { className="cursor-pointer"
return ( onClick={() => fetchNextPage()}
<div key={`${i}${post.post_id}`}> >
<PostCard {...post} /> Load more posts
</div> </Text>
); ) : (
})} <Text>No more posts to load</Text>
</div> )}
); </Box>
})} </Flex>
<Box ref={ref} className="w-full mb-4 text-center"> </Flex>
{isFetching ? ( </ScrollArea>
<Text>Loading more...</Text> </>
) : hasNextPage ? ( );
<Text
className="cursor-pointer"
onClick={() => fetchNextPage()}
>
Load more posts
</Text>
) : (
<Text>No more posts to load</Text>
)}
</Box>
</ScrollArea>
</Flex>
</>
);
} }

6
enshi/src/index.css
View File

@ -1,4 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Pre:wght@400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Pre:wght@400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pochaevsk&display=swap');
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@ -15,9 +16,8 @@
} }
.radix-themes { .radix-themes {
--default-font-family: "Times New Roman"; ; --default-font-family: "Pochaevsk", sans-serif;
--heading-font-family: "Edu AU VIC WA NT Pre", cursive;
--heading-font-family: "Edu AU VIC WA NT Pre", cursive;
/* Your custom font for <Heading> components */ /* Your custom font for <Heading> components */
--code-font-family: --code-font-family:
/* Your custom font for <Code> components */ /* Your custom font for <Code> components */

2
enshi/src/layout/MainPage/MainPage.tsx
View File

@ -66,7 +66,7 @@ export default function MainPage() {
<NavBar /> <NavBar />
<Box <Box
flexGrow={"1"} flexGrow={"1"}
className="flex flex-col overflow-hidden" className="flex flex-col mx-4 overflow-hidden"
> >
<Outlet /> <Outlet />
</Box> </Box>