crema-app-aifirst-template/app/components/layout/surface-picker.tsx

import { useEffect, useState } from "react"
import { Check, Layers } from "lucide-react"

import { Button } from "~/components/ui/button"
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "~/components/ui/popover"
import { cn } from "~/lib/utils"

export const surfaces = [
  { id: "default", label: "Default" },
  { id: "snow", label: "Snow" },
  { id: "stone", label: "Stone" },
  { id: "sage", label: "Sage" },
  { id: "slate", label: "Slate" },
] as const

export type SurfaceId = (typeof surfaces)[number]["id"]

const STORAGE_KEY = "crema-surface"
const DEFAULT_SURFACE: SurfaceId = "default"

function isSurfaceId(value: string | null): value is SurfaceId {
  return !!value && surfaces.some((s) => s.id === value)
}

function applySurface(id: SurfaceId) {
  if (id === "default") {
    delete document.body.dataset.surface
  } else {
    document.body.dataset.surface = id
  }
}

export function SurfacePicker() {
  const [current, setCurrent] = useState<SurfaceId>(DEFAULT_SURFACE)

  useEffect(() => {
    const stored = localStorage.getItem(STORAGE_KEY)
    const next = isSurfaceId(stored) ? stored : DEFAULT_SURFACE
    setCurrent(next)
    applySurface(next)
  }, [])

  const select = (id: SurfaceId) => {
    setCurrent(id)
    applySurface(id)
    localStorage.setItem(STORAGE_KEY, id)
  }

  return (
    <Popover>
      <PopoverTrigger
        render={
          <Button
            data-action="appbar-surface"
            variant="ghost"
            size="icon-sm"
            aria-label="Change surface tint"
          >
            <Layers />
          </Button>
        }
      />
      <PopoverContent align="end" className="w-56">
        <PopoverHeader>
          <PopoverTitle>Surface</PopoverTitle>
          <PopoverDescription>Tint of cards and the sidebar.</PopoverDescription>
        </PopoverHeader>
        <div className="flex flex-col gap-1">
          {surfaces.map((s) => {
            const active = current === s.id
            return (
              <button
                key={s.id}
                type="button"
                onClick={() => select(s.id)}
                aria-pressed={active}
                className={cn(
                  "flex items-center justify-between gap-2 rounded-md px-2 py-1.5 text-left transition-colors duration-fast ease-standard hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:outline-none",
                  active && "bg-accent text-accent-foreground"
                )}
              >
                <span className="flex items-center gap-2.5">
                  <span
                    aria-hidden
                    className={cn(
                      "size-5 rounded-md ring-1 ring-border",
                      `surface-swatch-${s.id}`
                    )}
                  />
                  <span className="text-sm">{s.label}</span>
                </span>
                {active && <Check className="size-4 text-primary" />}
              </button>
            )
          })}
        </div>
      </PopoverContent>
    </Popover>
  )
}