| 1 | "use client"; |
| 2 | |
| 3 | import clsx from "clsx"; |
| 4 | |
| 5 | export const SkeletonCard = ({ isLoading }: { isLoading?: boolean }) => ( |
| 6 | <div |
| 7 | className={clsx("rounded-2xl bg-gray-900/80 p-4", { |
| 8 | "relative overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_1.5s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent": |
| 9 | isLoading, |
| 10 | })} |
| 11 | > |
| 12 | <div className="space-y-3"> |
| 13 | <div className="h-14 rounded-lg bg-gray-700" /> |
| 14 | <div className="h-3 w-11/12 rounded-lg bg-gray-700" /> |
| 15 | <div className="h-3 w-8/12 rounded-lg bg-gray-700" /> |
| 16 | </div> |
| 17 | </div> |
| 18 | ); |