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

Improve some ui visual effects

Browse Source
This commit is contained in:
PrinOrange
2024-01-08 18:18:21 +08:00
parent 8ce080fedd
commit b10ce77b00
8 changed files with 56 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/mdx/H2.tsx
View File

@@ -2,7 +2,7 @@ import { fontFangZhengXiaoBiaoSongCN } from "@/styles/font";
export const H2 = (props: JSX.IntrinsicElements["h2"]) => {
return (
<h2 className={`${fontFangZhengXiaoBiaoSongCN.className} mt-3 mb-1 scroll-mt-20`} id={props.id}>
<h2 className={`${fontFangZhengXiaoBiaoSongCN.className} scroll-mt-20`} id={props.id}>
{props.children}
</h2>
);

40
components/utils/NavBar.tsx
View File

@@ -33,13 +33,9 @@ export const NavBar = () => {
return (
<Sheet open={isSideNavOpen} onOpenChange={(open) => setIsSideNavOpen(open)}>
<nav className="sticky top-0 z-50 flex flex-wrap justify-between py-3 backdrop-blur bg-white/50 dark:bg-black/50">
<Link href="/" className="cursor-pointer">
<h1
className={`${fontFangZhengXiaoBiaoSongCN.className} my-auto border-b-4 border-b-black text-xl font-bold dark:border-b-white`}
>
{Config.SiteTitle}
</h1>
<nav className="sticky top-0 z-50 flex flex-wrap justify-between py-3 backdrop-blur bg-white/50 dark:bg-gray-950/50">
<Link href="/" className="cursor-pointer my-auto text-xl font-bold">
<h1 className={`${fontFangZhengXiaoBiaoSongCN.className}`}>{Config.SiteTitle}</h1>
</Link>
<div className="my-auto hidden sm:flex">
{MenuItems.map((menuItem) => (
@@ -67,20 +63,6 @@ export const NavBar = () => {
</div>
</div>
<div className="flex flex-wrap text-3xl space-x-2 sm:hidden">
<Link
title="Search the posts"
className="my-auto rounded-full p-1 text-black hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-gray-800"
href="/search"
>
<MdSearch />
</Link>
<div
title={theme === "light" ? "Switch to dark mode" : "Switch to light mode"}
className="cursor-pointer rounded-full my-auto p-1 text-black hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-gray-800"
onClick={handleSwitchTheme}
>
{theme === "light" ? <MdOutlineDarkMode /> : <MdOutlineLightMode />}
</div>
<SheetTrigger
title="Spread the navigation menu"
className="text-black rounded-full p-1 hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-gray-800"
@@ -106,6 +88,22 @@ export const NavBar = () => {
</Link>
))}
</div>
<div className="flex justify-end text-3xl">
<Link
title="Search the posts"
className="my-auto rounded-full p-1 text-black hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-gray-800"
href="/search"
>
<MdSearch />
</Link>
<div
title={theme === "light" ? "Switch to dark mode" : "Switch to light mode"}
className="cursor-pointer rounded-full my-auto p-1 text-black hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-gray-800"
onClick={handleSwitchTheme}
>
{theme === "light" ? <MdOutlineDarkMode /> : <MdOutlineLightMode />}
</div>
</div>
</SheetContent>
</Sheet>
);

39
components/utils/PostList.tsx
View File

@@ -9,17 +9,18 @@ export const PostList = (props: { data: TPostListItem[] }) => {
return (
<div>
{props.data.map((postListItem, index) => (
<div
key={`post-list-${nanoid()}`}
className={`${fontSourceSerifScreenCN.className} flex flex-col justify-center ${
index !== props.data.length - 1 && "border-b"
} border-gray-200 dark:border-gray-800 py-3`}
>
<Link className="hover:text-gray-600 dark:hover:text-gray-400" href={`/blog/${postListItem.id}`}>
<div className="flex-center flex flex-col py-2 ">
<h3 className="mx-auto text-xl font-extrabold capitalize">{postListItem.frontMatter.title}</h3>
<Link className="cursor-pointer" href={`/blog/${postListItem.id}`} key={`post-list-${nanoid()}`}>
<div
className={`${fontSourceSerifScreenCN.className} flex flex-col justify-center ${
index !== props.data.length - 1 && "border-b"
} border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-950 dark:border-gray-800 p-3`}
>
<div className="flex-center flex flex-col py-2">
<h3 className="mx-auto text-lg font-extrabold capitalize">{postListItem.frontMatter.title}</h3>
{postListItem.frontMatter.subtitle && (
<div className="mx-auto text-base font-semibold capitalize">{postListItem.frontMatter.subtitle}</div>
<div className="mx-auto text-base font-semibold capitalize text-gray-700 dark:text-gray-300">
{postListItem.frontMatter.subtitle}
</div>
)}
</div>
<div className="text-center">{normalizeDate(postListItem.frontMatter.time)}</div>
@@ -28,15 +29,15 @@ export const PostList = (props: { data: TPostListItem[] }) => {
<p>{postListItem.frontMatter.summary}</p>
</div>
)}
</Link>
{postListItem.frontMatter.tags && (
<div className="my-2 flex justify-center">
{postListItem.frontMatter.tags.map((tagName) => (
<TagBadge name={tagName} size="sm" key={`tags-${nanoid()}`} />
))}
</div>
)}
</div>
{postListItem.frontMatter.tags && (
<div className="my-2 flex justify-center">
{postListItem.frontMatter.tags.map((tagName) => (
<TagBadge name={tagName} size="sm" key={`tags-${nanoid()}`} />
))}
</div>
)}
</div>
</Link>
))}
</div>
);

14
components/utils/TagBadge.tsx
View File

@@ -1,11 +1,13 @@
import Link from "next/link";
import { fontSourceSerifScreenCN } from "@/styles/font";
export const TagBadge = (props: { name: string; size: "sm" | "md"; count?: number }) => {
return (
<Link href={`/tags/${props.name}`} className={`mx-1 my-1 ${props.size === "sm" ? "text-sm" : "text-base"}`}>
<div className="border-2 border-black px-2 hover:border-gray-600 hover:text-gray-600 dark:hover:text-gray-300 dark:border-white dark:text-white dark:hover:border-gray-300">
{`${props.name}${props.count ? ` (${props.count})` : ""}`}
</div>
</Link>
<div
className={`mx-1 my-1 ${fontSourceSerifScreenCN.className} ${
props.size === "sm" ? "text-sm" : "text-base"
} border-2 border-black px-2 dark:border-white dark:text-white`}
>
{`${props.name}${props.count ? ` (${props.count})` : ""}`}
</div>
);
};

3
pages/index.tsx
View File

@@ -53,7 +53,8 @@ export default function Home(props: HomePageProps) {
</h2>
<Separator />
<PostList data={props.latestPostList} />
<div className="my-2 flex justify-end">
<Separator />
<div className="my-5 flex justify-end">
<Button asChild>
<Link href="/posts" className="font-bold">
{"MORE POSTS >"}

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

@@ -65,13 +65,16 @@ export default function PostsPage(props: PostsPageProps) {
<Separator />
<div className={`my-5 flex flex-wrap justify-center px-2 ${fontSourceSerifScreenCN.className}`}>
{props.tagList.map((item) => (
<TagBadge key={`tag-badge-${nanoid()}`} name={item.name} size="md" count={item.count} />
<Link href={`/tags/${item.name}`} key={`tag-badge-${nanoid()}`}>
<TagBadge name={item.name} size="md" count={item.count} />
</Link>
))}
</div>
</>
)}
<Separator />
<PostList data={props.postList} />
<Separator />
<div className="my-5 flex justify-between text-base font-bold">
{props.pageNumber !== 1 && (
<Button asChild>

2
pages/search.tsx
View File

@@ -73,7 +73,7 @@ export default function SearchPage() {
onChange={handleInputSearchText}
/>
<Button className="mx-3 my-auto" disabled={querySearch.isLoading} onClick={handleMakeSearch}>
{querySearch.isLoading ? "Loading" : "Search"}
{querySearch.isFetching ? "Loading" : "Search"}
</Button>
</div>
<div className="flex flex-col justify-center">

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

@@ -60,6 +60,7 @@ export default function TagsContentPage(props: TagsContentPageProps) {
</h2>
<Separator />
<PostList data={props.postList} />
<Separator />
<div className="my-5 flex justify-between text-base font-bold">
{props.pageNumber !== 1 && (
<Button asChild>