X Card

1import { VerifiedIcon } from "lucide-react";
2import Link from "next/link";
3import { cn } from "@/lib/utils";
4 
5/**
6 * @author: @dorianbaffier
7 * @description: Tweet Card
8 * @version: 1.0.0
9 * @date: 2025-10-01
10 * @license: MIT
11 * @website: https://kokonutui.com
12 * @github: https://github.com/kokonut-labs/kokonutui
13 */
14 
15type ReplyProps = {
16  authorName: string;
17  authorHandle: string;
18  authorImage: string;
19  content: string;
20  isVerified?: boolean;
21  timestamp: string;
22};
23 
24type TweetCardProps = {
25  authorName?: string;
26  authorHandle?: string;
27  authorImage?: string;
28  content?: string[];
29  isVerified?: boolean;
30  timestamp?: string;
31  href?: string;
32  reply?: ReplyProps;
33  className?: string;
34};
35 
36export default function TweetCard({
37  authorName = "Dorian",
38  authorHandle = "dorianbaffier",
39  authorImage = "https://pbs.twimg.com/profile_images/1992215290936205312/N_EuwLUO_400x400.jpg",
40  content = [
41    "All components from KokonutUI can now be open in @v0 🎉",
42    "1. Click on 'Open in V0'",
43    "2. Customize with prompts",
44    "3. Deploy to your app",
45  ],
46  isVerified = true,
47  timestamp = "Jan 18, 2025",
48  href = "#",
49  reply = {
50    authorName: "shadcn",
51    authorHandle: "shadcn",
52    authorImage:
53      "https://pbs.twimg.com/profile_images/1593304942210478080/TUYae5z7_400x400.jpg",
54    content: "Awesome.",
55    isVerified: true,
56    timestamp: "Jan 18",
57  },
58  className,
59}: TweetCardProps) {
60  return (
61    <Link href={href} target="_blank">
62      <div
63        className={cn(
64          "relative isolate w-full min-w-[400px] max-w-xl overflow-hidden rounded-2xl p-1.5 md:min-w-[500px]",
65          "bg-white/5 dark:bg-black/90",
66          "bg-linear-to-br from-black/5 to-black/[0.02] dark:from-white/5 dark:to-white/[0.02]",
67          "backdrop-blur-xl backdrop-saturate-[180%]",
68          "border border-black/10 dark:border-white/10",
69          "shadow-[0_8px_16px_rgb(0_0_0_/_0.15)] dark:shadow-[0_8px_16px_rgb(0_0_0_/_0.25)]",
70          "translate-z-0 will-change-transform"
71        )}
72      >
73        <div
74          className={cn(
75            "relative w-full rounded-xl p-5",
76            "bg-linear-to-br from-black/[0.05] to-transparent dark:from-white/[0.08] dark:to-transparent",
77            "backdrop-blur-md backdrop-saturate-150",
78            "border border-black/[0.05] dark:border-white/[0.08]",
79            "text-black/90 dark:text-white",
80            "shadow-xs",
81            "translate-z-0 will-change-transform",
82// … truncated