chroma-grid

import React from 'react';
import InteractiveChromaGrid, { ChromaGridItemType } from '@/components/ui/chroma-grid';

const demoItems: ChromaGridItemType[] = [
  {
    image: 'https://i.pravatar.cc/300?img=1',
    title: 'Sarah Johnson',
    subtitle: 'Frontend Developer',
    handle: '@sarahj',
    borderColor: '#3B82F6',
    gradient: 'linear-gradient(145deg, #3B82F6, #081933)',
    url: 'https://github.com',
  },
  {
    image: 'https://i.pravatar.cc/300?img=2',
    title: 'Mike Chen',
    subtitle: 'Backend Engineer',
    handle: '@mikechen',
    borderColor: '#10B981',
    gradient: 'linear-gradient(180deg, #10B981, #032d20)',
    url: 'https://github.com',
  },
  {
    image: 'https://i.pravatar.cc/300?img=3',
    title: 'Morgan Blake',
    subtitle: 'UI/UX Designer',
    handle: '@morganb',
    borderColor: '#F59E0B',
    gradient: 'linear-gradient(165deg, #F59E0B, #332101)',
    url: 'https://github.com',
  },
  {
    image: 'https://i.pravatar.cc/300?img=16',
    title: 'Casey Park',
    subtitle: 'Data Scientist',
    handle: '@caseypark',
    borderColor: '#EF4444',
    gradient: 'linear-gradient(195deg, #EF4444, #390d0d)',
    url: 'https://github.com',
  },
  {
    image: 'https://i.pravatar.cc/300?img=25',
    title: 'Sam Kim',
    subtitle: 'Mobile Developer',
    handle: '@thesamkim',
    borderColor: '#8B5CF6',
    gradient: 'linear-gradient(225deg, #8B5CF6, #1d1238)',
    url: 'https://github.com',
  },
  {
    image: 'https://i.pravatar.cc/300?img=60',
    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;