89 lines
2.6 KiB
TypeScript
89 lines
2.6 KiB
TypeScript
import {
|
|
BadgeIcon,
|
|
CheckCheckIcon,
|
|
CheckIcon,
|
|
HeartIcon,
|
|
MessageCircleIcon,
|
|
RefreshCwIcon,
|
|
} from 'lucide-react';
|
|
import Image from 'next/image';
|
|
|
|
interface TwitterCardProps {
|
|
avatarUrl?: string;
|
|
name: string;
|
|
handle: string;
|
|
content: React.ReactNode;
|
|
replies?: number;
|
|
retweets?: number;
|
|
likes?: number;
|
|
verified?: boolean;
|
|
}
|
|
|
|
export function TwitterCard({
|
|
avatarUrl,
|
|
name,
|
|
handle,
|
|
content,
|
|
replies = 0,
|
|
retweets = 0,
|
|
likes = 0,
|
|
verified = false,
|
|
}: TwitterCardProps) {
|
|
const renderContent = () => {
|
|
if (typeof content === 'string') {
|
|
return <p className="text-muted-foreground">{content}</p>;
|
|
}
|
|
|
|
if (Array.isArray(content) && typeof content[0] === 'string') {
|
|
return content.map((line) => <p key={line}>{line}</p>);
|
|
}
|
|
|
|
return content;
|
|
};
|
|
|
|
return (
|
|
<div className="border rounded-lg p-8 col gap-4 bg-background-light">
|
|
<div className="row gap-4">
|
|
<div className="size-12 rounded-full bg-muted overflow-hidden shrink-0">
|
|
{avatarUrl && (
|
|
<Image src={avatarUrl} alt={name} width={48} height={48} />
|
|
)}
|
|
</div>
|
|
<div className="col gap-1">
|
|
<div className="col">
|
|
<div className="">
|
|
<span className="font-medium">{name}</span>
|
|
{verified && (
|
|
<div className="relative inline-block top-0.5 ml-1">
|
|
<BadgeIcon className="size-4 fill-[#1D9BF0] text-[#1D9BF0]" />
|
|
<div className="absolute inset-0 center-center">
|
|
<CheckIcon className="size-2 text-white" strokeWidth={3} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<span className="text-muted-foreground text-sm leading-0">
|
|
@{handle}
|
|
</span>
|
|
</div>
|
|
{renderContent()}
|
|
<div className="row gap-4 text-muted-foreground text-sm mt-4">
|
|
<div className="row gap-2">
|
|
<MessageCircleIcon className="transition-all size-4 fill-background hover:fill-blue-500 hover:text-blue-500" />
|
|
{/* <span>{replies}</span> */}
|
|
</div>
|
|
<div className="row gap-2">
|
|
<RefreshCwIcon className="transition-all size-4 fill-background hover:text-emerald-500" />
|
|
{/* <span>{retweets}</span> */}
|
|
</div>
|
|
<div className="row gap-2">
|
|
<HeartIcon className="transition-all size-4 fill-background hover:fill-rose-500 hover:text-rose-500" />
|
|
{/* <span>{likes}</span> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|