updated look
All checks were successful
Deploy Website / build-and-deploy (push) Successful in 2m15s
All checks were successful
Deploy Website / build-and-deploy (push) Successful in 2m15s
This commit is contained in:
@@ -1,15 +1,22 @@
|
||||
const lineWidths = ['78%', '92%', '85%', '88%', '74%', '96%', '82%', '69%'];
|
||||
|
||||
export default function BlogPostLoading() {
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto px-6 py-24 animate-pulse">
|
||||
<div className="space-y-4 mb-12">
|
||||
<div className="h-4 bg-zinc-200 dark:bg-zinc-800 rounded w-1/4" />
|
||||
<div className="h-12 bg-zinc-200 dark:bg-zinc-800 rounded w-3/4" />
|
||||
<div className="h-6 bg-zinc-200 dark:bg-zinc-800 rounded w-2/3" />
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{Array.from({ length: 8 }).map((_, i) => (
|
||||
<div key={i} className="h-5 bg-zinc-200 dark:bg-zinc-800 rounded" style={{ width: `${70 + Math.random() * 30}%` }} />
|
||||
))}
|
||||
<div className="page-frame py-20 sm:py-24">
|
||||
<div className="mx-auto max-w-[70rem] animate-pulse xl:grid xl:grid-cols-[11rem_minmax(0,44rem)] xl:gap-x-10">
|
||||
<div className="hidden xl:block" />
|
||||
<div>
|
||||
<div className="mb-8 space-y-4 border-b border-line pb-8">
|
||||
<div className="h-3 w-1/3 rounded-full bg-accent-soft" />
|
||||
<div className="h-14 w-3/4 rounded-[1rem] bg-paper-strong" />
|
||||
<div className="h-5 w-2/3 rounded-full bg-paper-strong" />
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{lineWidths.map((width) => (
|
||||
<div key={width} className="h-4 rounded-full bg-paper-strong" style={{ width }} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user