Files
supabase/packages/ui-patterns/TweetCard/index.tsx
T
Ivan Vasilov cb1e3a8170 chore: Prep work for pnpm (#29610)
* Add all missing libraries in the packages/apps.

* Add all missing Vitest imports to the tests.

* Add some missing exports to ui.

* Fix the admonition export.

* Fix various minor bugs.

* Migrate the ui package to use vitest.
2024-10-01 11:29:37 +02:00

49 lines
1.5 KiB
TypeScript

import Image from 'next/image'
import { cn } from 'ui/src/lib/utils'
interface TweetCard {
handle: string
quote: string | React.ReactNode
img_url: string
className?: string
}
export function TweetCard(props: TweetCard) {
return (
<div
className={cn(
'bg-surface-75',
'border group-hover/tweet-card:border-foreground-muted transition-colors',
'rounded-2xl p-6',
'drop-shadow-sm',
props.className
)}
>
<div className="relative">
<div className="flex items-center gap-2">
{props.img_url ? (
<div className="h-10 w-10 overflow-hidden rounded-full border border-control">
<Image
src={props.img_url}
width="64"
height="64"
alt={`${props.handle} twitter image`}
/>
</div>
) : (
<div className="w-6" />
)}
<p className="text-foreground text-sm font-medium">{props.handle}</p>
<div className="absolute -left-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-black">
<svg className="h-[12px] w-[12px]" fill="white" viewBox="0 0 24 24" aria-hidden="true">
<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" />
</svg>
</div>
</div>
</div>
<p className="text-foreground-lighter mt-3 text-base">"{props.quote}"</p>
</div>
)
}