(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
1import React from "react";
2import { clsx } from "clsx";
3
4interface SkeletonProps {
5 className?: string;
6 variant?: "text" | "circular" | "rectangular";
7 width?: string | number;
8 height?: string | number;
9}
10
11export default function Skeleton({
12 className,
13 variant = "text",
14 width,
15 height,
16}: SkeletonProps) {
17 return (
18 <div
19 className={clsx(
20 "animate-pulse bg-surface-200 dark:bg-surface-700",
21 variant === "circular" && "rounded-full",
22 variant === "rectangular" && "rounded-lg",
23 variant === "text" && "rounded h-4",
24 className,
25 )}
26 style={{ width, height }}
27 />
28 );
29}
30
31export function SkeletonCard() {
32 return (
33 <div className="bg-white dark:bg-surface-900 rounded-lg p-4 mb-3 shadow-sm ring-1 ring-black/5 dark:ring-white/5">
34 <div className="flex items-center gap-3 mb-3">
35 <Skeleton variant="circular" className="h-10 w-10" />
36 <div className="flex-1 space-y-2">
37 <Skeleton width="40%" />
38 <Skeleton width="25%" />
39 </div>
40 </div>
41 <Skeleton className="h-4 mb-2" />
42 <Skeleton className="h-4 w-3/4" />
43 </div>
44 );
45}