x-card

1"use client"
2 
3import { type ReactNode } from "react"
4import { Tweet } from "react-tweet"
5 
6import { cn } from "@/lib/utils"
7 
8type XCardSize = "sm" | "small" | "default" | "lg" | "large"
9 
10interface XCardProps {
11  id: string
12  caption?: ReactNode
13  className?: string
14  size?: XCardSize
15}
16 
17function normalizeSize(size: XCardSize): "small" | "default" | "large" {
18  if (size === "sm") return "small"
19  if (size === "lg") return "large"
20  return size as "small" | "default" | "large"
21}
22 
23export function XCard({
24  id,
25  caption,
26  className,
27  size = "default",
28}: XCardProps) {
29  const normalizedSize = normalizeSize(size)
30 
31  const sizeClasses = {
32    small: "max-w-sm scale-90",
33    default: "max-w-xl",
34    large: "max-w-2xl scale-110",
35  }
36 
37  return (
38    <div className={cn("x-card my-6", sizeClasses[normalizedSize], className)}>
39      <div className="flex justify-center">
40        <Tweet id={id} />
41      </div>
42      {caption && (
43        <div className="text-muted-foreground mt-4 text-center text-sm">
44          {caption}
45        </div>
46      )}
47      <style jsx>{`
48        .x-card .react-tweet-theme {
49          --tweet-container-margin: 0;
50          --tweet-font-family: inherit;
51          --tweet-font-color: hsl(var(--foreground));
52          --tweet-bg-color: hsl(var(--card));
53          --tweet-bg-color-hover: hsl(var(--card));
54          --tweet-color-blue-secondary: hsl(var(--muted-foreground));
55          --tweet-color-blue-secondary-hover: hsl(var(--accent));
56          --tweet-font-color-secondary: hsl(var(--muted-foreground));
57          --tweet-quoted-bg-color-hover: hsl(var(--muted) / 0.3);
58          --tweet-border: 1px solid hsl(var(--border));
59          --tweet-skeleton-gradient: linear-gradient(
60            270deg,
61            hsl(var(--muted)),
62            hsl(var(--muted) / 0.8),
63            hsl(var(--muted) / 0.8),
64            hsl(var(--muted))
65          );
66          --tweet-color-red-primary: hsl(var(--destructive));
67          --tweet-color-red-primary-hover: hsl(var(--destructive) / 0.1);
68          --tweet-color-green-primary: hsl(var(--chart-2));
69          --tweet-color-green-primary-hover: hsl(var(--chart-2) / 0.1);
70          --tweet-twitter-icon-color: hsl(var(--foreground));
71          --tweet-verified-old-color: hsl(var(--muted-foreground));
72          --tweet-verified-blue-color: hsl(var(--primary));
73        }
74 
75        .x-card .react-tweet-theme p {
76          font-size: inherit;
77          line-height: 1.3rem;
78        }
79 
80// … truncated