Category filter

import { useRef, useState } from "react";
import { GalleryFilter, JustifiedGrid, Lightbox, type GridHandle, type Slide } from "liftbox";

type Photo = Slide & { trade: "roofs" | "walls" };

export function Gallery({ photos }: { photos: Photo[] }) {
  const [trade, setTrade] = useState<Photo["trade"] | null>(null);
  const [index, setIndex] = useState(-1);
  const grid = useRef<GridHandle>(null);
  const shown = trade ? photos.filter((photo) => photo.trade === trade) : photos;

  return (
    <>
      <GalleryFilter
        categories={["roofs", "walls"]}
        value={trade}
        onChange={setTrade}
        count={shown.length}
      />
      <JustifiedGrid ref={grid} slides={shown} onOpen={setIndex} />
      <Lightbox
        slides={shown}
        open={index >= 0}
        index={Math.max(index, 0)}
        onIndexChange={setIndex}
        onClose={() => setIndex(-1)}
        getThumbnail={(i) => grid.current?.getThumbnail(i)}
      />
    </>
  );
}

<GalleryFilter
  categories={trades}
  value={trade}
  onChange={setTrade}
  count={shown.length}
  labels={{
    group: "Filtrar por ofício",
    all: "Todos",
    category: (id) => t(`trades.${id}`),
    count: (n) => (n === 1 ? "1 foto" : `${n} fotos`),
  }}
/>