Popover

"use client";
import { useEffect, useState } from "react";

type State = "closed" | "open";

export function Popover({ state = "open" }: { state?: State }) {
const [open, setOpen] = useState(state === "open");
useEffect(() => setOpen(state === "open"), [state]);

return (
  <div className="relative grid h-[260px] w-full max-w-md place-items-center">
    <div className="relative">
      <button
        onClick={() => setOpen((o) => !o)}
        className="rounded-md border border-border bg-background/50 px-3 py-1.5 font-mono text-xs hover:border-lab-accent"
      >
        設定 ▾
      </button>
      {open && (
        <div className="absolute left-1/2 top-full z-10 mt-2 w-56 -translate-x-1/2 rounded-lg border border-border bg-background p-3 shadow-xl animate-in fade-in zoom-in-95 duration-150">
          <div className="absolute -top-1.5 left-1/2 h-3 w-3 -translate-x-1/2 rotate-45 border-l border-t border-border bg-background" />
          <p className="mb-2 font-mono text-[10px] uppercase tracking-wider text-muted-foreground/70">
            偏好設定
          </p>
          <label className="flex items-center justify-between py-1 text-xs">
            <span>啟用通知</span>
            <input type="checkbox" defaultChecked className="accent-lab-accent" />
          </label>
          <label className="flex items-center justify-between py-1 text-xs">
            <span>自動儲存</span>
            <input type="checkbox" defaultChecked className="accent-lab-accent" />
          </label>
          <label className="flex items-center justify-between py-1 text-xs">
            <span>深色模式</span>
            <input type="checkbox" className="accent-lab-accent" />
          </label>
        </div>
      )}
    </div>
  </div>
);
}