ThemePreview.tsx raw

   1  import { type Theme, useTheme } from "src/components/ui/theme-provider";
   2  import { cn } from "src/lib/utils";
   3  
   4  export function ThemePreview({ theme }: { theme: Theme }) {
   5    const { isDarkMode } = useTheme();
   6    const darkClass = isDarkMode ? "dark" : "";
   7  
   8    return (
   9      <div
  10        aria-hidden="true"
  11        className={cn(
  12          `theme-${theme}`,
  13          darkClass,
  14          "w-full aspect-16/10 flex bg-background"
  15        )}
  16      >
  17        <div className="w-1/4 flex flex-col p-1 gap-0.5 bg-sidebar border-r border-border">
  18          <div className="h-1 w-3/4 rounded-full bg-sidebar-primary" />
  19          <div className="h-0.5 w-1/2 rounded-full mt-1 bg-muted" />
  20          <div className="h-0.5 w-2/3 rounded-full bg-muted" />
  21          <div className="h-0.5 w-1/2 rounded-full bg-muted" />
  22        </div>
  23        <div className="flex-1 p-1.5 flex flex-col gap-1">
  24          <div className="h-1 w-1/2 rounded-full bg-foreground/20" />
  25          <div className="mt-0.5 rounded flex-1 p-1 flex flex-col gap-0.5 bg-card border border-border">
  26            <div className="h-0.5 w-3/4 rounded-full bg-muted" />
  27            <div className="h-0.5 w-1/2 rounded-full bg-muted" />
  28            <div className="mt-auto h-1 w-8 rounded-sm bg-primary" />
  29          </div>
  30        </div>
  31      </div>
  32    );
  33  }
  34