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

Upgrade UI design and improve some functions

Browse Source
This commit is contained in:
PrinOrange
2024-01-15 11:44:48 +08:00
parent aadaa3f216
commit 7befbc5b63
26 changed files with 230 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
components/utils/Footer.tsx
View File

@@ -19,11 +19,6 @@ export const Footer = () => {
}}
>
<footer className="my-5 flex flex-col justify-center py-2 text-sm">
<div className="flex justify-center">
<Link target="_blank" href="https://vercel.com/?utm_source=github-contributions-chart&utm_campaign=oss">
<img src="/powered-by-vercel.svg" alt="Powered by vercel" className="h-8" />
</Link>
</div>
<div className="my-2 flex flex-wrap justify-center space-x-3 text-center text-gray-500 underline dark:text-gray-400">
<Link href="https://github.com/PrinOrange/nextjs-lexical-blog" title="Sponsor me for my works.">
{"Source Code"}

6
components/utils/NavBar.tsx
View File

@@ -33,7 +33,7 @@ export const NavBar = () => {
return (
<Sheet open={isSideNavOpen} onOpenChange={(open) => setIsSideNavOpen(open)}>
<div className="sticky top-0 z-50 border-gray-200 dark:border-gray-700 border-b flex flex-wrap justify-between py-3 backdrop-blur bg-white/50 dark:bg-gray-950/50 px-5 lg:px-20 xl:px-32 2xl:px-52">
<div className="sticky top-0 z-50 border-gray-200 dark:border-gray-700 border-b flex flex-wrap justify-between py-3 backdrop-blur bg-white/50 dark:bg-gray-950/50 px-5 md:px-10 lg:px-20 xl:px-32 2xl:px-52">
<Link href="/" className="cursor-pointer my-auto text-2xl font-bold">
<h1 className={`${fontFangZhengXiaoBiaoSongCN.className} my-auto`}>{Config.SiteTitle}</h1>
</Link>
@@ -62,7 +62,7 @@ export const NavBar = () => {
{theme === "light" ? <MdOutlineDarkMode /> : <MdOutlineLightMode />}
</div>
</div>
<div className="flex flex-wrap text-3xl sm:hidden">
<div className="text-3xl sm:hidden my-auto">
<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"
@@ -75,7 +75,7 @@ export const NavBar = () => {
</SheetTrigger>
</div>
</div>
<SheetContent className="bg:white border-none shadow-md dark:bg-black flex flex-col justify-end text-end">
<SheetContent className="bg:white border-none py-16 shadow-md dark:bg-black flex flex-col text-end">
{MenuItems.map((menuItem) => (
<Link
href={menuItem.href}

18
components/utils/PostList.tsx
View File

@@ -23,21 +23,25 @@ export const PostList = (props: { data: TPostListItem[] }) => {
</div>
)}
</div>
<div className="text-center">{normalizeDate(postItem.frontMatter.time)}</div>
{postItem.frontMatter.summary && (
<div className={`${fontSourceSerifScreenCN.className} flex my-1 justify-center`}>
<p>{postItem.frontMatter.summary}</p>
</div>
)}
<div className="text-center text-sm italic">{normalizeDate(postItem.frontMatter.time)}</div>
{postItem.frontMatter.tags && (
<div className="my-2 flex justify-center">
{postItem.frontMatter.tags.map((tagName) => (
<Badge className="mx-1" key={`tags-${nanoid()}`}>
<Badge
variant={"secondary"}
className="mx-1 text-gray-600 dark:text-gray-300"
key={`tags-${nanoid()}`}
>
{tagName}
</Badge>
))}
</div>
)}
{postItem.frontMatter.summary && (
<div className={`${fontSourceSerifScreenCN.className} flex my-1 justify-center`}>
<p>{postItem.frontMatter.summary}</p>
</div>
)}
</div>
</Link>
))}