Function DemoGallery

apps/app/src/components/demo-gallery/index.tsx:17–127

({ open, onClose, onTryDemo }: DemoGalleryProps)

}

export function DemoGallery({ open, onClose, onTryDemo }: DemoGalleryProps) {
  const [selectedCategory, setSelectedCategory] =
    useState<DemoCategory | null>(null);

  const filtered = selectedCategory
    ? DEMO_EXAMPLES.filter((d) => d.category === selectedCategory)
    : DEMO_EXAMPLES;

  useEffect(() => {
    if (!open) return;
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [open, onClose]);

  return (
    <>
      {/* Backdrop */}
      {open && (
        <div
          className="fixed inset-0 z-40"
          style={{ background: "rgba(0,0,0,0.3)", backdropFilter: "blur(2px)" }}
          onClick={onClose}
        />
      )}

      {/* Drawer: full-screen bottom sheet on mobile, right side panel on sm+ */}
      <div
        className={`demo-gallery-drawer fixed z-50 flex flex-col transition-transform duration-300 ease-in-out ${open ? "demo-gallery-drawer--open" : ""}`}
        style={{ background: "var(--surface-primary, #fff)" }}
      >
        {/* Header */}
        <div
          className="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 shrink-0"
          style={{
            borderBottom:
              "1px solid var(--color-border-glass, rgba(0,0,0,0.1))",
          }}
        >
          <div className="flex items-center gap-2">
            <GridIcon size={18} style={{ color: "var(--text-secondary, #666)" }} />
            <h2
              className="text-base font-semibold"
              style={{ color: "var(--text-primary, #1a1a1a)" }}
            >
              Demo Gallery
            </h2>
            <span
              className="text-xs font-medium px-2 py-0.5 rounded-full"
              style={{
                background: "var(--color-background-secondary, #f5f5f5)",
                color: "var(--text-secondary, #666)",
              }}
            >
              {DEMO_EXAMPLES.length}
            </span>