xfy/DefectingCat.github.io
1
0
Fork 0
mirror of https://github.com/DefectingCat/DefectingCat.github.io synced 2025-07-16 09:11: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

62
components/pages/blog/post-card-loading.tsx Normal file
View File

@ -0,0 +1,62 @@
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);