Polar Sponsor Grid

import {
  PolarSponsorGrid,
  type Sponsor,
} from "@/components/ui/polar-sponsor-grid";

const sponsors: Sponsor[] = [
  {
    id: "1",
    name: "Vercel",
    amount: 500,
    avatarUrl: "https://github.com/vercel.png",
    profileUrl: "#",
  },
  {
    id: "2",
    name: "Supabase",
    amount: 250,
    avatarUrl: "https://github.com/supabase.png",
    profileUrl: "#",
  },
  {
    id: "3",
    name: "Tailwind Labs",
    amount: 80,
    avatarUrl: "https://github.com/tailwindlabs.png",
    profileUrl: "#",
  },
  {
    id: "4",
    name: "React",
    amount: 60,
    avatarUrl: "https://github.com/facebook.png",
    profileUrl: "#",
  },
  {
    id: "5",
    name: "Node.js",
    amount: 30,
    avatarUrl: "https://github.com/nodejs.png",
    profileUrl: "#",
  },
  {
    id: "6",
    name: "Vite",
    amount: 28,
    avatarUrl: "https://github.com/vitejs.png",
    profileUrl: "#",
  },
  {
    id: "7",
    name: "Deno",
    amount: 15,
    avatarUrl: "https://github.com/denoland.png",
    profileUrl: "#",
  },
  {
    id: "8",
    name: "Prisma",
    amount: 12,
    avatarUrl: "https://github.com/prisma.png",
    profileUrl: "#",
  },
  {
    id: "9",
    name: "Remix",
    amount: 5,
    avatarUrl: "https://github.com/remix-run.png",
    profileUrl: "#",
  },
  {
    id: "10",
    name: "Expo",
    amount: 3,
    avatarUrl: "https://github.com/expo.png",
    profileUrl: "#",
  },
];

export default function PolarSponsorGridDemo() {
  return (
    <div className="flex w-full items-center justify-center bg-background text-foreground p-8">
      <PolarSponsorGrid sponsors={sponsors} />
    </div>
  );
}