crema-app-aifirst-template/app/components/layout/font-size-picker.tsx

import { useEffect, useState } from "react"
import { Check, Type } 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 fontSizes = [
  { id: "sm", label: "Small", sample: "Aa" },
  { id: "md", label: "Medium", sample: "Aa" },
  { id: "lg", label: "Large", sample: "Aa" },
  { id: "xl", label: "Extra large", sample: "Aa" },
] as const

export type FontSizeId = (typeof fontSizes)[number]["id"]

const STORAGE_KEY = "crema-font-scale"
const DEFAULT_SIZE: FontSizeId = "md"

function isFontSizeId(value: string | null): value is FontSizeId {
  return !!value && fontSizes.some((f) => f.id === value)
}

const SAMPLE_PX: Record<FontSizeId, number> = {
  sm: 14,
  md: 16,
  lg: 18,
  xl: 20,
}

export function FontSizePicker() {
  const [current, setCurrent] = useState<FontSizeId>(DEFAULT_SIZE)

  useEffect(() => {
    const stored = localStorage.getItem(STORAGE_KEY)
    const next = isFontSizeId(stored) ? stored : DEFAULT_SIZE
    setCurrent(next)
    document.documentElement.dataset.fontScale = next
  }, [])

  const select = (id: FontSizeId) => {
    setCurrent(id)
    document.documentElement.dataset.fontScale = id
    localStorage.setItem(STORAGE_KEY, id)
  }

  return (
    <Popover>
      <PopoverTrigger
        render={
          <Button
            data-action="appbar-font-size"
            variant="ghost"
            size="icon-sm"
            aria-label="Change font size"
          >
            <Type />
          </Button>
        }
      />
      <PopoverContent align="end" className="w-56">
        <PopoverHeader>
          <PopoverTitle>Font size</PopoverTitle>
          <PopoverDescription>Scales the entire UI.</PopoverDescription>
        </PopoverHeader>
        <div className="flex flex-col gap-1">
          {fontSizes.map((f) => {
            const active = current === f.id
            return (
              <button
                key={f.id}
                type="button"
                onClick={() => select(f.id)}
                aria-pressed={active}
                className={cn(
                  "flex items-center justify-between gap-2 rounded-md px-2.5 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-baseline gap-2.5">
                  <span
                    className="font-heading leading-none"
                    style={{ fontSize: `${SAMPLE_PX[f.id]}px` }}
                  >
                    {f.sample}
                  </span>
                  <span className="text-sm">{f.label}</span>
                </span>
                {active && <Check className="size-4 text-primary" />}
              </button>
            )
          })}
        </div>
      </PopoverContent>
    </Popover>
  )
}