import InteractiveBentoGallery from "@/components/blocks/interactive-bento-gallery"
const mediaItems = [
{
id: 1,
type: "image",
title: "Anurag Mishra",
desc: "Driven, innovative, visionary",
url: "https://kxptt4m9j4.ufs.sh/f/9YHhEDeslzkcbP3rYTiXwH7Y106CepJOsoAgQjyFi3MUfDkh",
span: "md:col-span-1 md:row-span-3 sm:col-span-1 sm:row-span-2",
},
{
id: 2,
type: "video",
title: "Dog Puppy",
desc: "Adorable loyal companion.",
url: "https://cdn.21st.dev/assets/mirror/6c/6c995774a9a2d0763b5cf31ced2d9e2872e67b29bbcbab5dc028510637a60ade.mp4",
span: "md:col-span-2 md:row-span-2 col-span-1 sm:col-span-2 sm:row-span-2",
},
{
id: 3,
type: "image",
title: "Forest Path",
desc: "Mystical forest trail",
url: "https://cdn.21st.dev/assets/mirror/d0/d069396ffe22f2757574c2ff4aa26195816e2e449c0310cdf3cd8ce6aa2721d8.jpg",
span: "md:col-span-1 md:row-span-3 sm:col-span-2 sm:row-span-2 ",
},
{
id: 4,
type: "image",
title: "Falling Leaves",
desc: "Autumn scenery",
url: "https://cdn.21st.dev/assets/mirror/5e/5e5cad2a41b4d6b5582db30ced443c4a41ec7d3bb48c6475675f78bf1fa48bf9.jpg",
span: "md:col-span-2 md:row-span-2 sm:col-span-1 sm:row-span-2 ",
},
{
id: 5,
type: "video",
title: "Bird Parrot",
desc: "Vibrant feathered charm",
url: "https://cdn.21st.dev/assets/mirror/bd/bd648f41dd331f6c94bdf8b0f22702e6c86f05ae70289a1095f848058f62b8f1.mp4",
span: "md:col-span-1 md:row-span-3 sm:col-span-1 sm:row-span-2 ",
},
{
id: 6,
type: "image",
title: "Beach Paradise",
desc: "Sunny tropical beach",
url: "https://cdn.21st.dev/assets/mirror/9c/9c62e3e3b4cebe1804ba802ec807ce1453dbea56be6cc87f72eb38b65e46a9cd.jpg",
span: "md:col-span-2 md:row-span-2 sm:col-span-1 sm:row-span-2 ",
},
{
id: 7,
type: "video",
title: "Shiva Temple",
desc: "Peaceful Shiva sanctuary.",
url: "https://cdn.21st.dev/assets/mirror/90/9055d429cbc2543497016f62bcb16e6ded4571e2eb5d8af706c8f285f141e70d.mp4",
span: "md:col-span-1 md:row-span-3 sm:col-span-1 sm:row-span-2 ",
},
]
export function BentoGridGalleryDemo() {
return (
<div className="min-h-screen overflow-y-auto">
<InteractiveBentoGallery
mediaItems={mediaItems}
title="Gallery Shots Collection"
description="Drag and explore our curated collection of shots"
/>
</div>
)
}
