Social Preview Dock

// This is a file with a demo for your component
// That's what users will see in the preview
// Create new files in this directory to add more demos

import { SocialPreviewDock } from "@/components/ui/social-preview-dock";

// ONLY DEFAULT EXPORT WILL BE TREATED AS A DEMO
export default function DemoOne() {
  return (
    <div className="flex min-h-[480px] w-full items-end justify-center px-6 pb-16">
      <SocialPreviewDock
        email="hello@example.com"
        profile={{
          username: "SriSomanaath",
          xHandle: "SriNath693",
          name: "Sri Somanaath",
          headline: "AI Software Engineer",
          location: "Bengaluru, India",
          bio: "Engineer",
          links: {
            github: "https://github.com/SriSomanaath",
            linkedin: "https://www.linkedin.com/in/srisomanaath-g693/",
            x: "https://x.com/SriNath693",
          },
        }}
        /* Art direction per card. Leave this off and the banners run on theme
           tokens instead, following whatever palette the site is using. */
        bannerColors={{
          linkedin: ["#e0f2fe", "#7dd3fc", "#3b82f6", "#1d4ed8"],
          x: ["#fde68a", "#fbbf24", "#fb923c", "#fb7185"],
        }}
      />
    </div>
  );
}