snapme

1"use client"
2
3import { Camera } from "@phosphor-icons/react"
4
5import { cn } from "@/lib/utils"
6
7/* DESIGN-SYSTEM §9: lingkaran 76 px tangerine dengan garis 3 px paper dan ikon kamera 34 px.
8   DESIGN-SYSTEM §7: tekan = hover geser -1,-1 px, aktif geser 4,4 px, 120 ms.
9   Latar tombol adalah panggung `ink`, jadi bayangan keras tidak terpakai di sini. */
10export function ShutterButton({
11  onShoot,
12  disabled,
13}: {
14  onShoot: () => void
15  disabled?: boolean
16}) {
17  return (
18    <button
19      type="button"
20      onClick={onShoot}
21      disabled={disabled}
22      aria-label="Ambil foto"
23      className={cn(
24        "flex size-19 shrink-0 items-center justify-center rounded-full border-3 border-paper bg-tangerine text-ink",
25        "transition-transform duration-[120ms] hover:-translate-x-px hover:-translate-y-px active:translate-x-1 active:translate-y-1",
26        "focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-lime",
27        "disabled:pointer-events-none disabled:border-dashed disabled:bg-cream disabled:text-muted"
28      )}
29    >
30      <Camera weight="bold" className="size-[34px]" aria-hidden />
31    </button>
32  )
33}
34