index.tsx48 lines · main

1	import Image from 'next/image'
2	import { cn } from 'ui/src/lib/utils'
3
4	interface TweetCard {
5	handle: string
6	quote: string | React.ReactNode
7	img_url: string
8	className?: string
9	}
10
11	export function TweetCard(props: TweetCard) {
12	return (
13	<div
14	className={cn(
15	'bg-surface-75',
16	'border group-hover/tweet-card:border-foreground-muted transition-colors',
17	'rounded-2xl p-6',
18	'drop-shadow-xs',
19	props.className
20	)}
21	>
22	<div className="relative">
23	<div className="flex items-center gap-2">
24	{props.img_url ? (
25	<div className="h-10 w-10 overflow-hidden rounded-full border border-control">
26	<Image
27	src={props.img_url}
28	width="64"
29	height="64"
30	alt={`${props.handle} twitter image`}
31	/>
32	</div>
33	) : (
34	<div className="w-6" />
35	)}
36	<p className="text-foreground text-sm font-medium">{props.handle}</p>
37	<div className="absolute -left-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-black">
38	<svg className="h-[12px] w-[12px]" fill="white" viewBox="0 0 24 24" aria-hidden="true">
39	<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
40	</svg>
41	</div>
42	</div>
43	</div>
44
45	<p className="text-foreground-lighter mt-3 text-base whitespace-pre-line">{props.quote}</p>
46	</div>
47	)
48	}