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

Remove custom component styles and use shadcn components instead, then format the code.

Browse Source
This commit is contained in:
PrinOrange
2023-12-29 20:28:13 +08:00
parent 986c8f891c
commit 9b9055e4b1
12 changed files with 60 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/homepage/HomeCover.tsx
View File

@@ -19,7 +19,9 @@ export const HomeCover = () => {
src={Config.AvatarURL}
/>
</div>
<div className={`${fontFangZhengXiaoBiaoSongCN.className} my-8 text-center text-4xl font-bold`}>{Config.Nickname}</div>
<div className={`${fontFangZhengXiaoBiaoSongCN.className} my-8 text-center text-4xl font-bold`}>
{Config.Nickname}
</div>
<SocialIcons />
{Config.Sentence && (
<div className="my-8 flex justify-center">

4
components/ui/button.tsx
View File

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
const buttonVariants = cva(
"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
"inline-flex items-center justify-center rounded-md text-base ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
@@ -16,7 +16,7 @@ const buttonVariants = cva(
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-10 px-4 py-2",
default: "h-9 px-5 py-1",
sm: "h-9 rounded-md px-3",
lg: "h-11 rounded-md px-8",
icon: "h-10 w-10",

4
pages/about.tsx
View File

@@ -17,7 +17,9 @@ export default function AboutPage() {
/>
<NavBar />
<ContentContainer>
<h2 className={`my-5 flex justify-around text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>{"ABOUT ME"}</h2>
<h2 className={`my-5 flex justify-around text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
{"ABOUT ME"}
</h2>
<hr />
<div className={`${fontSourceSerifScreenCN.className} my-5 justify-center md:flex md:space-x-10`}>
<div className="my-auto flex md:w-1/3">

4
pages/blog/[id].tsx
View File

@@ -65,7 +65,9 @@ const ReaderPage = (props: ReaderPageProps) => {
{props.frontMatter?.title}
</h2>
{props.frontMatter?.subtitle && (
<div className={`${fontFangZhengXiaoBiaoSongCN.className} my-1 flex justify-center text-xl font-bold capitalize`}>
<div
className={`${fontFangZhengXiaoBiaoSongCN.className} my-1 flex justify-center text-xl font-bold capitalize`}
>
{props.frontMatter.subtitle}
</div>
)}

4
pages/friends.tsx
View File

@@ -14,7 +14,9 @@ export default function FriendsPage() {
<SEO title={`${Config.SiteTitle} - Friends`} description={"My Friend Links"} />
<NavBar />
<ContentContainer>
<h2 className={`my-5 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>{"FRIENDS"}</h2>
<h2 className={`my-5 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
{"FRIENDS"}
</h2>
<hr />
<div className={`my-5 py-3 flex flex-wrap justify-center text-2xl ${fontSourceSerifScreenCN.className}`}>
{FriendsList.map((item) => (

5
pages/index.tsx
View File

@@ -1,5 +1,6 @@
import { HomeCover } from "@/components/homepage/HomeCover";
import { ContentContainer, Page } from "@/components/layouts/layouts";
import { Button } from "@/components/ui/button";
import { Footer } from "@/components/utils/Footer";
import { NavBar } from "@/components/utils/NavBar";
import { PostList } from "@/components/utils/PostList";
@@ -52,9 +53,11 @@ export default function Home(props: HomePageProps) {
<hr />
<PostList data={props.latestPostList} />
<div className="my-2 flex justify-end">
<Link href="/posts" className="link-button font-bold text-base">
<Button asChild>
<Link href="/posts" className="font-bold">
{"MORE POSTS >"}
</Link>
</Button>
</div>
</div>
)}

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

@@ -1,4 +1,5 @@
import { ContentContainer, Page } from "@/components/layouts/layouts";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Footer } from "@/components/utils/Footer";
import { NavBar } from "@/components/utils/NavBar";
@@ -59,9 +60,11 @@ export default function PostsPage(props: PostsPageProps) {
<PostList data={props.postList} />
<div className="my-5 flex justify-between text-base font-bold">
{props.pageNumber !== 1 && (
<Link href={`/posts/${props.pageNumber - 1}`} className="link-button my-auto">
<Button asChild>
<Link href={`/posts/${props.pageNumber - 1}/`} className="font-bold">
{"< PREV"}
</Link>
</Button>
)}
<div className="my-auto font-bold flex justify-center">
<Input
@@ -73,9 +76,11 @@ export default function PostsPage(props: PostsPageProps) {
<div className="my-auto">{` / ${props.pageAmount}`}</div>
</div>
{props.pageNumber !== props.pageAmount && (
<Link href={`/posts/${props.pageNumber + 1}`} className="link-button my-auto">
<Button asChild>
<Link href={`/posts/${props.pageNumber + 1}/`} className="font-bold">
{"NEXT >"}
</Link>
</Button>
)}
</div>
</ContentContainer>

4
pages/sponsor.tsx
View File

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

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

@@ -1,4 +1,5 @@
import { ContentContainer, Page } from "@/components/layouts/layouts";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Footer } from "@/components/utils/Footer";
import { NavBar } from "@/components/utils/NavBar";
@@ -51,16 +52,20 @@ export default function TagsContentPage(props: TagsContentPageProps) {
/>
<NavBar />
<ContentContainer>
<h2 className={`my-5 flex flex-col justify-center text-center text-3xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
<h2
className={`my-5 flex flex-col justify-center text-center text-3xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}
>
{`Posts of ${props.tagName}`}
</h2>
<hr />
<PostList data={props.postList} />
<div className="my-5 flex justify-between text-base font-bold">
{props.pageNumber !== 1 && (
<Link href={`/tags/${props.tagName}/${props.pageNumber - 1}/`} className="link-button my-auto">
<Button asChild>
<Link href={`/tags/${props.tagName}/${props.pageNumber - 1}/`} className="font-bold">
{"< PREV"}
</Link>
</Button>
)}
<div className="my-auto font-bold flex justify-center">
<Input
@@ -72,9 +77,11 @@ export default function TagsContentPage(props: TagsContentPageProps) {
<div className="my-auto">{` / ${props.pageAmount}`}</div>
</div>
{props.pageNumber !== props.pageAmount && (
<Link href={`/tags/${props.tagName}/${props.pageNumber + 1}/`} className="link-button my-auto">
<Button asChild>
<Link href={`/tags/${props.tagName}/${props.pageNumber + 1}/`} className="font-bold">
{"NEXT >"}
</Link>
</Button>
)}
</div>
</ContentContainer>

0
styles/formuation.css → styles/formulation.css
View File

14
styles/globals.css
View File

@@ -3,8 +3,7 @@
@tailwind utilities;
@import "./typesetting.css";
@import "./formuation.css";
@import "./ui.css";
@import "./formulation.css";
@import "./layout.css";
@import "./scrollbar.css";
@@ -82,3 +81,14 @@
@apply bg-background text-foreground;
}
}
.selection-style {
@apply selection:bg-black
selection:text-white
dark:selection:bg-white
dark:selection:text-black;
}
* {
@apply selection-style;
}

26
styles/ui.css
View File

@@ -1,26 +0,0 @@
.selection-style {
@apply selection:bg-black
selection:text-white
dark:selection:bg-white
dark:selection:text-black;
}
.tag-link {
@apply border-2 border-black px-2 hover:border-gray-600 hover:text-gray-600 dark:border-white dark:text-white dark:hover:border-gray-200 dark:hover:text-gray-200;
}
.link-button {
@apply rounded-md
bg-black
px-5
py-1
text-white
hover:bg-gray-600
dark:bg-white
dark:text-black
dark:hover:bg-gray-200;
}
* {
@apply selection-style;
}