A gallery panel that shows projects as thin vertical spines with sideways titles, opening one into a full framed image on hover, tap, or keyboard focus while the others collapse back.
import { SpineAccordion } from "@/components/ui/spine-accordion";
export default function SpineAccordionDemo() {
return (
<div className="flex h-screen w-full items-center justify-center p-8">
<SpineAccordion
className="max-w-4xl"
defaultIndex={2}
items={[
{
title: "Northern Lights",
image: "https://cdn.21st.dev/assets/mirror/87/870a7dad1337e336ce3e626636f17d0ccda58c3ed444002a07696259a7188bdb.jpg",
meta: "2021",
},
{
title: "Desert Bloom",
image: "https://cdn.21st.dev/assets/mirror/a6/a6baeb8c089233379e22b1393477be200b3a3b7a0745e64cc825c339c8463e0b.jpg",
meta: "2022",
},
{
title: "Coastal Drift",
image: "https://cdn.21st.dev/assets/mirror/48/48288a1b78fecf95a5b8419b6c6e2187b289874ff8286e6681400863f4255c5b.jpg",
meta: "2023",
},
{
title: "Urban Pulse",
image: "https://cdn.21st.dev/assets/mirror/70/707ab186017a71e70a4cc005b13fe2848ab7a677bd8a3d6ccb56d29f81571d0f.jpg",
meta: "2024",
},
]}
/>
</div>
);
}