add elements components

components/elements/Card.tsx

@@ -0,0 +1,73 @@
+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 }