1
4import * as React from "react";
5import { clsx } from "clsx";
6
7export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
8
9 height?: number;
10
11 width?: number;
12 circular?: boolean;
13}
14
15export function Skeleton({ height, width, circular = false, className, ...props }: SkeletonProps) {
16 return (
17 <div
18 aria-hidden="true"
19 className={clsx("animate-pulse rounded-md bg-muted", circular && "rounded-full", className)}
20 style={
21 {
22 height: height === undefined ? undefined : `${height}px`,
23 width: width === undefined ? undefined : `${width}px`,
24 minHeight: height === undefined ? "1rem" : undefined,
25 } as React.CSSProperties
26 }
27 {...props}
28 />
29 );
30}
31