"use client";
import { useState } from "react";
import { FlipReveal, FlipRevealItem } from "@/components/ui/flip-reveal";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
export const Demo = () => {
const [key, setKey] = useState("all");
return (
<div className="flex min-h-120 flex-col items-center gap-8">
<ToggleGroup
type="single"
className="bg-background rounded-md border p-1"
value={key}
onValueChange={(e) => setKey(e)}>
<ToggleGroupItem value="all" className="sm:px-4">
All
</ToggleGroupItem>
<ToggleGroupItem value="shirt" className="sm:px-4">
Shirt
</ToggleGroupItem>
<ToggleGroupItem value="goggles" className="sm:px-4">
Goggles
</ToggleGroupItem>
<ToggleGroupItem value="shoes" className="sm:px-4">
Shoes
</ToggleGroupItem>
</ToggleGroup>
<FlipReveal className="grid grid-cols-3 gap-3 sm:gap-4" keys={[key]} showClass="flex" hideClass="hidden">
<FlipRevealItem flipKey="shirt">
<img
src="https://cdn.21st.dev/assets/mirror/3b/3bc43354d140ada41746bd886410fc46bdb6644861dec7c9bf1a7f222833aedb.jpg"
alt="Shirt"
className="size-20 rounded-md sm:size-24 xl:size-32"
/>
</FlipRevealItem>
<FlipRevealItem flipKey="goggles">
<img
src="https://cdn.21st.dev/assets/mirror/e6/e65b411e7af375e672238e90a5b03ceec2e0092ceb5b4e9cd12712593304b9a3.jpg"
alt="Goggles"
className="size-20 rounded-md sm:size-24 xl:size-32"
/>
</FlipRevealItem>
<FlipRevealItem flipKey="shoes">
<img
src="https://cdn.21st.dev/assets/mirror/f6/f6e618f49dd19a9926a611ee9919885ecf120088ac1460f2ee56472d03bc993e.jpg"
alt="Shoes"
className="size-20 rounded-md sm:size-24 xl:size-32"
/>
</FlipRevealItem>
<FlipRevealItem flipKey="goggles">
<img
src="https://cdn.21st.dev/assets/mirror/31/317e3e40f5041aedb473a1fe7d723c41d9ee9596293686feb18a19e0ba0ca83f.jpg"
alt="Goggles"
className="size-20 rounded-md sm:size-24 xl:size-32"
/>
</FlipRevealItem>
<FlipRevealItem flipKey="shirt">
<img
src="https://cdn.21st.dev/assets/mirror/ce/ce4ae05dd8e36fbf5664fb264bbd7a5a2f37d4bf1d12e63fc84e9daa37f7d232.jpg"
alt="Shirt"
className="size-20 rounded-md sm:size-24 xl:size-32"
/>
</FlipRevealItem>
<FlipRevealItem flipKey="shoes">
<img
src="https://cdn.21st.dev/assets/mirror/1e/1efc662f7ded60e5cd43a0aa6ba1bf0bf6dd88b1c04213763b258d2f94da0449.jpg"
alt="Shoes"
className="size-20 rounded-md sm:size-24 xl:size-32"
/>
</FlipRevealItem>
<FlipRevealItem flipKey="shirt">
<img
src="https://cdn.21st.dev/assets/mirror/2e/2eeb984008c57ad3bea3e6402ffb156e6c696a549c68da20e0e4f6d35f85db99.jpg"
alt="Goggles"
className="size-20 rounded-md sm:size-24 xl:size-32"
/>
</FlipRevealItem>{" "}
<FlipRevealItem flipKey="shoes">
<img
src="https://cdn.21st.dev/assets/mirror/e1/e1aa8743a75ac224130401bd39559f8acf20116bfe08966f1617450800f3d4b1.jpg"
alt="Shoes"
className="size-20 rounded-md sm:size-24 xl:size-32"
/>
</FlipRevealItem>
<FlipRevealItem flipKey="goggles">
<img
src="https://cdn.21st.dev/assets/mirror/04/04a5bdf78f95f37cf535659f9edc15ee76c0f1dfc8cb6c9db798863c5967e0d8.jpg"
alt="Goggles"
className="size-20 rounded-md sm:size-24 xl:size-32"
/>
</FlipRevealItem>
</FlipReveal>
</div>
);
};
export default Demo;Part of Pace UI — browse the full library on 21st.dev.