74 lines
1.5 KiB
TypeScript
74 lines
1.5 KiB
TypeScript
import * as React from "react"
|
|
|
|
import {
|
|
Card as ShadcnCard,
|
|
CardContent,
|
|
CardHeader,
|
|
} from "@/components/ui/card"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { cn } from "@/lib/utils"
|
|
import { Image } from "./Image"
|
|
import { Typography } from "./Typography"
|
|
|
|
export interface CardTag {
|
|
tag: string
|
|
}
|
|
|
|
export interface CardProps extends React.ComponentProps<typeof ShadcnCard> {
|
|
image?: string
|
|
title?: string
|
|
subtitle?: string
|
|
tags?: CardTag[]
|
|
}
|
|
|
|
function Card({
|
|
image,
|
|
title,
|
|
subtitle,
|
|
tags,
|
|
className,
|
|
...props
|
|
}: CardProps) {
|
|
return (
|
|
<ShadcnCard
|
|
data-slot="element-card"
|
|
className={cn("overflow-hidden pt-0", className)}
|
|
{...props}
|
|
>
|
|
{image ? (
|
|
<Image
|
|
src={image}
|
|
alt={title ?? ""}
|
|
objectFit="cover"
|
|
width={600}
|
|
height={300}
|
|
className="h-48 w-full rounded-none"
|
|
/>
|
|
) : null}
|
|
|
|
<CardHeader>
|
|
{title ? <Typography variant="h5" text={title} /> : null}
|
|
{subtitle ? (
|
|
<Typography
|
|
variant="body2"
|
|
text={subtitle}
|
|
className="text-muted-foreground"
|
|
/>
|
|
) : null}
|
|
</CardHeader>
|
|
|
|
{tags && tags.length > 0 ? (
|
|
<CardContent className="flex flex-wrap gap-2">
|
|
{tags.map((item, index) => (
|
|
<Badge key={`${item.tag}-${index}`} variant="secondary">
|
|
{item.tag}
|
|
</Badge>
|
|
))}
|
|
</CardContent>
|
|
) : null}
|
|
</ShadcnCard>
|
|
)
|
|
}
|
|
|
|
export { Card }
|