import React from 'react';
import InteractiveChromaGrid, { ChromaGridItemType } from '@/components/ui/chroma-grid';
const demoItems: ChromaGridItemType[] = [
{
image: 'https://cdn.21st.dev/assets/mirror/c5/c530b6be73e46a897fb39caaee8e3e2145eb0e995d10373ecfdc33297a0acf15.jpg',
title: 'Sarah Johnson',
subtitle: 'Frontend Developer',
handle: '@sarahj',
borderColor: '#3B82F6',
gradient: 'linear-gradient(145deg, #3B82F6, #081933)',
url: 'https://github.com',
},
{
image: 'https://cdn.21st.dev/assets/mirror/11/11551b572461102fbb43d783bd56229df0ce98fcd272c71c7650fb0639d01f0c.jpg',
title: 'Mike Chen',
subtitle: 'Backend Engineer',
handle: '@mikechen',
borderColor: '#10B981',
gradient: 'linear-gradient(180deg, #10B981, #032d20)',
url: 'https://github.com',
},
{
image: 'https://cdn.21st.dev/assets/mirror/0c/0c6d7cbc439b57d59e4c6d3971d88e5aa81b249263e322e5237dfe4beb1420b7.jpg',
title: 'Morgan Blake',
subtitle: 'UI/UX Designer',
handle: '@morganb',
borderColor: '#F59E0B',
gradient: 'linear-gradient(165deg, #F59E0B, #332101)',
url: 'https://github.com',
},
{
image: 'https://cdn.21st.dev/assets/mirror/2b/2b259cec3e01d5e6822828037bd785d234673e2fe2084562a0257fc61d65ec4a.jpg',
title: 'Casey Park',
subtitle: 'Data Scientist',
handle: '@caseypark',
borderColor: '#EF4444',
gradient: 'linear-gradient(195deg, #EF4444, #390d0d)',
url: 'https://github.com',
},
{
image: 'https://cdn.21st.dev/assets/mirror/68/68e8a115e405a92153a0e9e077b464ab1a1fc644d914690ca007f597df955dca.jpg',
title: 'Sam Kim',
subtitle: 'Mobile Developer',
handle: '@thesamkim',
borderColor: '#8B5CF6',
gradient: 'linear-gradient(225deg, #8B5CF6, #1d1238)',
url: 'https://github.com',
},
{
image: 'https://cdn.21st.dev/assets/mirror/43/4341c48155c5f5db8e89382d4ba975ec0475647da2b0fc68de786a32eb611ab6.jpg',
title: 'Tyler Rodriguez',
subtitle: 'Cloud Architect',
handle: '@tylerrod',
borderColor: '#06B6D4',
gradient: 'linear-gradient(135deg, #06B6D4, #012a30)',
url: 'https://github.com',
},
];
function InteractiveChromaGridDemo() {
return (
<main className="flex min-h-screen w-full items-center justify-center bg-black p-4 md:p-8">
<div className="h-[80vh] w-full max-w-7xl">
<InteractiveChromaGrid
items={demoItems}
radius={400}
damping={0.4}
fadeOut={0.7}
/>
</div>
</main>
);
}
export default InteractiveChromaGridDemo;
