simple-react-app-kit/packages/appearance/src/components/theme-preview.tsx

import type { CSSProperties } from "react"
import {
  getTheme,
  getThemeCssVariables,
  type ThemeColorConfig,
  type ThemeScheme,
} from "../theme"
import { cn } from "@workspace/ui/lib/utils"

export interface ThemePreviewProps {
  className?: string
  config: ThemeColorConfig
  scheme: ThemeScheme
}

export function ThemePreview({ scheme, config, className }: ThemePreviewProps) {
  const themeVariables = getThemeCssVariables(scheme, config)
  const baseTheme = getTheme(config.baseColor) ?? getTheme("neutral")!
  const style = {
    ...Object.fromEntries(
      Object.entries(themeVariables).map(([key, value]) => [`--${key}`, value])
    ),
    "--preview-base": baseTheme.cssVars[scheme].accent,
  } as CSSProperties

  return (
    <div className={cn(className, `ui:${scheme}`)} style={style}>
      <div className="isolate h-52 max-w-103.5 rounded-lg bg-sidebar p-3 ring ring-border">
        <div className="flex gap-2.5 [&>div]:bg-foreground/10">
          <div className="size-5 rounded-sm" />
          <div className="ml-auto size-5 rounded-sm" />
          <div className="size-5 rounded-sm" />
          <div className="size-5 rounded-sm" />
        </div>
        <div className="flex gap-3">
          <div className="flex w-16 flex-col gap-1 py-5 [&>div]:bg-foreground/10">
            <div className="h-2.5 w-full rounded-r-full" />
            <div className="h-2.5 w-full rounded-r-full bg-accent!" />
            <div className="h-2.5 w-full rounded-r-full" />
            <div className="h-2.5 w-full rounded-r-full" />
            <div className="mt-auto h-2.5 w-full rounded-r-full" />
          </div>
          <div className="flex-1 py-5">
            <div className="space-y-2.5">
              <div className="flex h-2.5 items-center gap-2 [&>div]:bg-foreground/10">
                <div className="h-2.5 w-3 rounded-sm" />
                <div className="ml-auto size-2.5 rounded-sm" />
                <div className="h-2.5 w-3.75 rounded-sm" />
                <div className="h-2.5 w-5 rounded-sm bg-accent!" />
              </div>
              <div className="grid grid-cols-3 gap-2 [&>div]:rounded-sm [&>div]:bg-foreground/10">
                <div className="flex h-18 items-end gap-2 p-2">
                  <div className="h-6 w-2 rounded-t-sm bg-(--preview-base)/55" />
                  <div className="h-4 w-2 rounded-t-sm bg-(--preview-base)/55" />
                  <div className="h-11 w-2 rounded-t-sm bg-(--preview-base)/55" />
                  <div className="h-8 w-2 rounded-t-sm bg-(--preview-base)/55" />
                  <div className="h-9 w-2 rounded-t-sm bg-(--preview-base)/55" />
                </div>
                <div className="flex h-18 flex-col items-stretch justify-between gap-1 p-2">
                  <div className="flex items-center gap-1 opacity-55">
                    <div className="h-1 w-1 rounded-xs bg-(--preview-base)/55" />
                    <div className="h-1 w-1 rounded-xs bg-(--preview-base)/55" />
                    <div className="h-1 w-1 rounded-xs bg-(--preview-base)/55" />
                    <div className="ml-auto h-1 w-6 rounded-xs bg-(--preview-base)/55" />
                    <div className="h-1 w-3 rounded-xs bg-(--preview-base)/55" />
                  </div>
                  <div className="flex flex-wrap gap-1">
                    <div className="size-1 rounded-xs bg-(--preview-base)/55" />
                    <div className="h-1 w-6 rounded-xs bg-(--preview-base)/55" />
                    <div className="h-1 w-3 rounded-xs bg-(--preview-base)/55" />
                    <div className="h-1 w-5 rounded-xs bg-(--preview-base)/55" />
                    <div className="h-1 w-5 rounded-xs bg-(--preview-base)/55" />
                    <div className="size-1 rounded-xs bg-(--preview-base)/55" />
                    <div className="h-1 w-5 rounded-xs bg-(--preview-base)/55" />
                    <div className="h-1 w-2 rounded-xs bg-(--preview-base)/55" />
                    <div className="size-1 rounded-xs bg-(--preview-base)/55" />
                    <div className="h-1 w-3 rounded-xs bg-(--preview-base)/55" />
                    <div className="size-1 rounded-xs bg-(--preview-base)/55" />
                    <div className="h-1 w-3 rounded-xs bg-(--preview-base)/55" />
                    <div className="size-1 rounded-xs bg-(--preview-base)/55" />
                    <div className="h-1 w-6 rounded-xs bg-(--preview-base)/55" />
                  </div>
                  <div className="flex items-center gap-1">
                    <div className="h-2 w-6 rounded-sm bg-accent" />
                    <div className="h-2 w-6 rounded-sm bg-accent/75" />
                  </div>
                </div>
                <div className="h-18" />
                <div className="h-10 flex-1" />
                <div className="h-10 flex-1" />
                <div className="h-10 flex-1" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}