8-bit Skeleton

1import { cn } from "@/lib/utils";
2 
3import { Skeleton as ShadcnSkeleton } from "@/components/ui/skeleton";
4 
5import "@/components/ui/8bit/styles/retro.css";
6 
7export interface BitSkeletonProp extends React.ComponentProps<"div"> {
8  asChild?: boolean;
9}
10 
11function Skeleton({ children, ...props }: BitSkeletonProp) {
12  const { className } = props;
13 
14  return (
15    <div className={cn("relative animate-pulse", className)}>
16      <ShadcnSkeleton
17        {...props}
18        className={cn("rounded-none border-none bg-accent", "retro", className)}
19      >
20        {children}
21      </ShadcnSkeleton>
22 
23      <div className="opacity-60">
24        <div className="absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring" />
25        <div className="absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring" />
26      </div>
27      <div className="opacity-60">
28        <div className="absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring" />
29        <div className="absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring" />
30      </div>
31      <div className="absolute top-0 left-0 size-1.5 bg-foreground/60 dark:bg-ring/60" />
32      <div className="absolute top-0 right-0 size-1.5 bg-foreground/60 dark:bg-ring/60" />
33      <div className="absolute bottom-0 left-0 size-1.5 bg-foreground/60 dark:bg-ring/60" />
34      <div className="absolute bottom-0 right-0 size-1.5 bg-foreground/60 dark:bg-ring/60" />
35      <div className="opacity-60">
36        <div className="absolute top-1 -left-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring" />
37        <div className="absolute bottom-1 -left-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring" />
38      </div>
39      <div className="opacity-60">
40        <div className="absolute top-1 -right-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring" />
41        <div className="absolute bottom-1 -right-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring" />
42      </div>
43    </div>
44  );
45}
46 
47export { Skeleton };