xfy/DefectingCat.github.io
1
0
Fork 0
mirror of https://github.com/DefectingCat/DefectingCat.github.io synced 2025-07-16 01:01:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor app struct

Browse Source
This commit is contained in:
DefectingCat
2023-08-17 17:15:46 +08:00
parent e409e0afd6
commit 2cb80a42ae
31 changed files with 31 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/blog/[page]/page.tsx
View File

@ -1,5 +1,5 @@
import PostCard from 'app/blog/post-card';
import PostCardLoading from 'app/blog/post-card-loading';
import PostCard from 'components/pages/blog/post-card';
import PostCardLoading from 'components/pages/blog/post-card-loading';
import Pagination from 'components/rua/rua-pagination';
import { getPostListPath, postLists, PostPerPage } from 'lib/posts';
import { notFound } from 'next/navigation';

2
app/blog/loading.tsx
View File

@ -1,4 +1,4 @@
import PostCardLoading from './post-card-loading';
import PostCardLoading from 'components/pages/blog/post-card-loading';
const Loading = () => {
const num = Array(4).fill(1);

6
app/blog/page.tsx
View File

@ -1,8 +1,8 @@
import PostCard from './post-card';
import PostCardLoading from './post-card-loading';
import PostCard from 'components/pages/blog/post-card';
import PostCardLoading from 'components/pages/blog/post-card-loading';
import Pagination from 'components/rua/rua-pagination';
import { PostPerPage, postLists } from 'lib/posts';
import { Fragment, Suspense } from 'react';
import Pagination from 'components/rua/rua-pagination';
export default async function Page() {
const allPosts = await postLists();

62
app/blog/post-card-loading.tsx
View File

@ -1,62 +0,0 @@
import React, { memo } from 'react';
import clsx from 'clsx';
const PostCardLoading = () => {
return (
<article
className={clsx(
'rounded-xl py-4 px-5 md:p-7 ',
'hover:bg-sky-100 hover:bg-opacity-50',
'dark:hover:bg-rua-gray-800 dark:hover:bg-opacity-100',
'flex justify-between text-gray-800 ',
'mb-4 dark:text-gray-200',
'flex-col',
)}
>
<div className="flex justify-between">
<h2
className={clsx(
'w-96 bg-gray-300 h-7 animate-pulse',
'mb-4 text-3xl font-semibold font-Barlow',
'rounded-lg dark:bg-gray-500',
)}
></h2>
<div
className={clsx(
'hidden animate-pulse h-5 bg-gray-300',
'dark:bg-gray-500 lg:block w-24',
'rounded-lg',
)}
></div>
</div>
<div className="flex justify-between">
<div className="flex items-center text-sm">
<div
className={clsx(
'mr-4 last:mr-0 w-9 animate-pulse h-5',
'rounded-lg bg-gray-300 dark:bg-gray-500',
)}
></div>
<div
className={clsx(
'mr-4 last:mr-0 w-9 animate-pulse h-5',
'rounded-lg bg-gray-300 dark:bg-gray-500',
)}
></div>
</div>
<div
className={clsx(
'hidden animate-pulse h-5 bg-gray-300',
'dark:bg-gray-500 lg:block w-24',
'rounded-lg lg:hidden',
)}
></div>
</div>
</article>
);
};
export default memo(PostCardLoading);

54
app/blog/post-card.tsx
View File

@ -1,54 +0,0 @@
import Link from 'next/link';
import { Post } from 'types';
import clsx from 'clsx';
import { memo } from 'react';
interface Props {
post: Post;
}
const PostCard = ({ post }: Props) => {
return (
<>
<Link href={`/p/${post.slug}`} passHref>
<article
className={clsx(
'rounded-xl py-4 px-5 md:p-7 ',
'hover:bg-sky-100 hover:bg-opacity-50',
// 'hover:bg-rua-gray-100 hover:bg-opacity-10',
'dark:hover:bg-rua-gray-800 dark:hover:bg-opacity-100',
'flex justify-between text-gray-800 ',
'mb-4 dark:text-gray-200',
'flex-col',
)}
>
<div className="flex justify-between">
<h2 className="mb-4 text-3xl font-semibold font-Barlow">
{post.title}
</h2>
<div className="hidden lg:block">{post.date}</div>
</div>
<div className="flex justify-between">
<div className="flex items-center text-sm">
{Array.isArray(post.tags) ? (
post.tags.map((tag) => (
<div key={tag} className="mr-4 last:mr-0">
{tag}
</div>
))
) : (
<div className="mr-4 last:mr-0">{post.tags}</div>
)}
</div>
<div className="lg:hidden">{post.date}</div>
</div>
</article>
</Link>
</>
);
};
export default memo(PostCard);