Tweet Card

import TweetCard, { type TweetProps } from "@/components/ui/tweet-card";

const sampleTweets: TweetProps[] = [
  {
    author: {
      name: "Dan Abramov",
      handle: "dan_abramov",
      avatarSrc: "https://avatars.githubusercontent.com/u/810438?v=4",
      isVerified: true,
    },
    content: "If you're not embarrassed by the first version of your product, you’ve launched too late.",
    timestamp: "5h",
    stats: {
      replies: 45,
      retweets: 120,
      likes: 890,
      views: "45K",
    },
    tags: ["startup", "coding"],
  },
  {
    author: {
      name: "Design Daily",
      handle: "designdaily",
      avatarSrc: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&auto=format&fit=crop&q=60",
      isVerified: false,
    },
    content: "Minimalism isn't about removing things you love. It's about removing the things that distract you from the things you love.",
    timestamp: "Oct 24",
    stats: {
      replies: 12,
      retweets: 89,
      likes: 432,
      views: "12K",
    },
    mediaUrl: "https://images.unsplash.com/photo-1494438639946-1ebd1d20bf85?q=80&w=2067&auto=format&fit=crop",
  },
];

export default function DemoOne() {
  return (<main className="min-h-screen w-full bg-gray-50 dark:bg-neutral-950 flex flex-col items-center justify-center py-12 px-4 gap-8 transition-colors duration-300">
      
      <div className="text-center space-y-2 mb-4">
        <h1 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
          Tweet Cards
        </h1>
        <p className="text-gray-500 dark:text-gray-400">
          Interactive cards with Framer Motion spotlight effects.
        </p>
      </div>

      <div className="flex flex-col gap-6 w-full items-center">
        {sampleTweets.map((tweet, index) => (
          <TweetCard key={index} {...tweet} />
        ))}
      </div>

    </main>);
}