dev.2ha.me/lixiyu-net
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix some UI flaws

Browse Source
This commit is contained in:
PrinOrange
2024-01-06 20:53:18 +08:00
parent eac42b69a7
commit 099795ab4c
9 changed files with 22 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/readerpage/TOC.tsx
View File

@@ -3,7 +3,7 @@ import Link from "next/link";
export const TOC = (props: { data: TTOCItem[] }) => { export const TOC = (props: { data: TTOCItem[] }) => {
return ( return (
<div className="sticky top-[5em] mx-5 p-2 border border-black dark:border-gray-400 rounded-sm"> <div className="sticky top-[5em] mx-5 p-2 border border-black dark:border-gray-400">
<div className="p-2 font-bold text-center border bg-black text-white dark:text-black dark:bg-gray-100"> <div className="p-2 font-bold text-center border bg-black text-white dark:text-black dark:bg-gray-100">
{"TABLE OF CONTENTS"} {"TABLE OF CONTENTS"}
</div> </div>

2
components/utils/PostList.tsx
View File

@@ -13,7 +13,7 @@ export const PostList = (props: { data: TPostListItem[] }) => {
key={`post-list-${nanoid()}`} key={`post-list-${nanoid()}`}
className={`${fontSourceSerifScreenCN.className} flex flex-col justify-center ${ className={`${fontSourceSerifScreenCN.className} flex flex-col justify-center ${
index !== props.data.length - 1 && "border-b" index !== props.data.length - 1 && "border-b"
} border-dashed border-gray-400 py-3`} } border-gray-200 dark:border-gray-800 py-3`}
> >
<Link className="hover:text-gray-600 dark:hover:text-gray-400" href={`/blog/${postListItem.id}`}> <Link className="hover:text-gray-600 dark:hover:text-gray-400" href={`/blog/${postListItem.id}`}>
<div className="flex-center flex flex-col py-2 "> <div className="flex-center flex flex-col py-2 ">

4
lib/utils.ts
View File

@@ -61,7 +61,7 @@ export function isEmptyString(value: string | null | undefined): boolean {
* @returns The array without empty values. * @returns The array without empty values.
* @template T - The type of the array elements. * @template T - The type of the array elements.
*/ */
export function removeEmptyValuesFromArray<T = any>(value: any[]): T[] { export function removeEmptyValuesFromArray<T>(value: T[]): T[] {
return value.filter((item) => item != null); return value.filter((item) => item != null);
} }
@@ -74,7 +74,7 @@ export function isEmptyArray(value: any[] | null | undefined): boolean {
if (value === null || value === undefined) { if (value === null || value === undefined) {
return true; return true;
} }
return removeEmptyValuesFromArray(value).length !== 0; return removeEmptyValuesFromArray(value).length === 0;
} }
/** /**

5
pages/about.tsx
View File

@@ -1,4 +1,5 @@
import { ContentContainer, Page } from "@/components/layouts/layouts"; import { ContentContainer, Page } from "@/components/layouts/layouts";
import { Separator } from "@/components/ui/separator";
import { Footer } from "@/components/utils/Footer"; import { Footer } from "@/components/utils/Footer";
import { NavBar } from "@/components/utils/NavBar"; import { NavBar } from "@/components/utils/NavBar";
import { SEO } from "@/components/utils/SEO"; import { SEO } from "@/components/utils/SEO";
@@ -17,10 +18,10 @@ export default function AboutPage() {
/> />
<ContentContainer> <ContentContainer>
<NavBar /> <NavBar />
<h2 className={`my-10 flex justify-around text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}> <h2 className={`my-5 flex justify-around text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
{"ABOUT ME"} {"ABOUT ME"}
</h2> </h2>
<hr /> <Separator />
<div className={`${fontSourceSerifScreenCN.className} my-5 justify-center md:flex md:space-x-10`}> <div className={`${fontSourceSerifScreenCN.className} my-5 justify-center md:flex md:space-x-10`}>
<div className="my-auto flex md:w-1/3"> <div className="my-auto flex md:w-1/3">
<img alt="my-profile" className="mx-auto my-auto max-h-[23rem] rounded-lg" src="/images/profile.webp" /> <img alt="my-profile" className="mx-auto my-auto max-h-[23rem] rounded-lg" src="/images/profile.webp" />

5
pages/friends.tsx
View File

@@ -1,4 +1,5 @@
import { ContentContainer, Page } from "@/components/layouts/layouts"; import { ContentContainer, Page } from "@/components/layouts/layouts";
import { Separator } from "@/components/ui/separator";
import { Footer } from "@/components/utils/Footer"; import { Footer } from "@/components/utils/Footer";
import { NavBar } from "@/components/utils/NavBar"; import { NavBar } from "@/components/utils/NavBar";
import { SEO } from "@/components/utils/SEO"; import { SEO } from "@/components/utils/SEO";
@@ -17,7 +18,7 @@ export default function FriendsPage() {
<h2 className={`my-10 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}> <h2 className={`my-10 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
{"FRIENDS"} {"FRIENDS"}
</h2> </h2>
<hr /> <Separator />
<div className={`my-5 py-3 flex flex-wrap justify-center text-2xl ${fontSourceSerifScreenCN.className}`}> <div className={`my-5 py-3 flex flex-wrap justify-center text-2xl ${fontSourceSerifScreenCN.className}`}>
{FriendsList.map((item) => ( {FriendsList.map((item) => (
<Link className="mx-3 p-2 underline" href={item.url} key={nanoid()}> <Link className="mx-3 p-2 underline" href={item.url} key={nanoid()}>
@@ -25,7 +26,7 @@ export default function FriendsPage() {
</Link> </Link>
))} ))}
</div> </div>
<hr /> <Separator />
<div className="my-3 text-base flex-col flex justify-start"> <div className="my-3 text-base flex-col flex justify-start">
<div className="mx-auto"> <div className="mx-auto">
{"Welcome to exchange our friend links and every high-quality blog websites are welcomed. "} {"Welcome to exchange our friend links and every high-quality blog websites are welcomed. "}

7
pages/index.tsx
View File

@@ -1,6 +1,7 @@
import { HomeCover } from "@/components/homepage/HomeCover"; import { HomeCover } from "@/components/homepage/HomeCover";
import { ContentContainer, Page } from "@/components/layouts/layouts"; import { ContentContainer, Page } from "@/components/layouts/layouts";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { Footer } from "@/components/utils/Footer"; import { Footer } from "@/components/utils/Footer";
import { NavBar } from "@/components/utils/NavBar"; import { NavBar } from "@/components/utils/NavBar";
import { PostList } from "@/components/utils/PostList"; import { PostList } from "@/components/utils/PostList";
@@ -34,12 +35,12 @@ export default function Home(props: HomePageProps) {
<HomeCover /> <HomeCover />
{props.pinnedPostList.length !== 0 && ( {props.pinnedPostList.length !== 0 && (
<div> <div>
<hr /> <Separator />
<h2 className={`my-5 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}> <h2 className={`my-5 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
<RiStarFill className="mx-2 my-auto" /> <RiStarFill className="mx-2 my-auto" />
{"PINNED POSTS"} {"PINNED POSTS"}
</h2> </h2>
<hr /> <Separator />
<PostList data={props.pinnedPostList} /> <PostList data={props.pinnedPostList} />
</div> </div>
)} )}
@@ -50,7 +51,7 @@ export default function Home(props: HomePageProps) {
<LuPenTool className="mx-2 my-auto" /> <LuPenTool className="mx-2 my-auto" />
{"LATEST POSTS"} {"LATEST POSTS"}
</h2> </h2>
<hr /> <Separator />
<PostList data={props.latestPostList} /> <PostList data={props.latestPostList} />
<div className="my-2 flex justify-end"> <div className="my-2 flex justify-end">
<Button asChild> <Button asChild>

7
pages/posts/[[...slug]].tsx
View File

@@ -1,6 +1,7 @@
import { ContentContainer, Page } from "@/components/layouts/layouts"; import { ContentContainer, Page } from "@/components/layouts/layouts";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Separator } from "@/components/ui/separator";
import { Footer } from "@/components/utils/Footer"; import { Footer } from "@/components/utils/Footer";
import { NavBar } from "@/components/utils/NavBar"; import { NavBar } from "@/components/utils/NavBar";
import { PostList } from "@/components/utils/PostList"; import { PostList } from "@/components/utils/PostList";
@@ -55,17 +56,17 @@ export default function PostsPage(props: PostsPageProps) {
/> />
<ContentContainer> <ContentContainer>
<NavBar /> <NavBar />
<h2 className={`my-10 flex justify-center text-2xl ${fontFangZhengXiaoBiaoSongCN.className} font-bold`}> <h2 className={`my-5 flex justify-center text-2xl ${fontFangZhengXiaoBiaoSongCN.className} font-bold`}>
<LuPenTool className="mx-2 my-auto" /> <LuPenTool className="mx-2 my-auto" />
{"ALL POSTS"} {"ALL POSTS"}
</h2> </h2>
<hr /> <Separator />
<div className={`my-5 flex flex-wrap justify-center px-2 ${fontSourceSerifScreenCN.className}`}> <div className={`my-5 flex flex-wrap justify-center px-2 ${fontSourceSerifScreenCN.className}`}>
{props.tagList.map((item) => ( {props.tagList.map((item) => (
<TagBadge key={`tag-badge-${nanoid()}`} name={item.name} size="md" count={item.count} /> <TagBadge key={`tag-badge-${nanoid()}`} name={item.name} size="md" count={item.count} />
))} ))}
</div> </div>
<hr /> <Separator />
<PostList data={props.postList} /> <PostList data={props.postList} />
<div className="my-5 flex justify-between text-base font-bold"> <div className="my-5 flex justify-between text-base font-bold">
{props.pageNumber !== 1 && ( {props.pageNumber !== 1 && (

2
pages/sponsor.tsx
View File

@@ -26,7 +26,7 @@ export default function AboutPage() {
<div className="md:flex"> <div className="md:flex">
<div className="flex flex-col justify-center md:w-1/2"> <div className="flex flex-col justify-center md:w-1/2">
<h2 <h2
className={`my-10 flex justify-center text-2xl font-bold text-red-500 ${fontFangZhengXiaoBiaoSongCN.className}`} className={`my-5 flex justify-center text-2xl font-bold text-red-500 ${fontFangZhengXiaoBiaoSongCN.className}`}
> >
<GoHeartFill className="mx-2 my-auto" /> <GoHeartFill className="mx-2 my-auto" />
{"SPONSOR"} {"SPONSOR"}

5
pages/tags/[...slug].tsx
View File

@@ -1,6 +1,7 @@
import { ContentContainer, Page } from "@/components/layouts/layouts"; import { ContentContainer, Page } from "@/components/layouts/layouts";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Separator } from "@/components/ui/separator";
import { Footer } from "@/components/utils/Footer"; import { Footer } from "@/components/utils/Footer";
import { NavBar } from "@/components/utils/NavBar"; import { NavBar } from "@/components/utils/NavBar";
import { PostList } from "@/components/utils/PostList"; import { PostList } from "@/components/utils/PostList";
@@ -53,11 +54,11 @@ export default function TagsContentPage(props: TagsContentPageProps) {
<ContentContainer> <ContentContainer>
<NavBar /> <NavBar />
<h2 <h2
className={`my-10 flex flex-col justify-center text-center text-3xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`} className={`my-5 flex flex-col justify-center text-center text-3xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}
> >
{`Posts of ${props.tagName}`} {`Posts of ${props.tagName}`}
</h2> </h2>
<hr /> <Separator />
<PostList data={props.postList} /> <PostList data={props.postList} />
<div className="my-5 flex justify-between text-base font-bold"> <div className="my-5 flex justify-between text-base font-bold">
{props.pageNumber !== 1 && ( {props.pageNumber !== 1 && (