104 lines
3.0 KiB
TypeScript
104 lines
3.0 KiB
TypeScript
"use client"
|
|
|
|
import { Album, Category, Gallery, Tag } from "@/generated/prisma"
|
|
import { CalendarDaysIcon, ImagesIcon, LayersIcon, QuoteIcon, TagIcon } from "lucide-react"
|
|
import Link from "next/link"
|
|
|
|
type Props = {
|
|
album: Album & {
|
|
gallery: Gallery | null
|
|
} | null
|
|
categories: Category[]
|
|
tags: Tag[]
|
|
creationDate?: Date | null
|
|
creationYear?: number | null
|
|
creationMonth?: number | null
|
|
altText?: string | null
|
|
description?: string | null
|
|
}
|
|
|
|
export default function ImageMetadataBox({
|
|
album,
|
|
categories,
|
|
tags,
|
|
creationDate,
|
|
creationYear,
|
|
creationMonth,
|
|
altText,
|
|
description
|
|
}: Props) {
|
|
const creationLabel = creationDate
|
|
? new Date(creationDate).toLocaleDateString("en-US", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
})
|
|
: creationYear && creationMonth
|
|
? `${creationMonth.toString().padStart(2, "0")}/${creationYear}`
|
|
: null
|
|
|
|
return (
|
|
<div className="border rounded-lg p-4 shadow bg-muted/20 w-full max-w-xl space-y-3">
|
|
{altText && (
|
|
<div className="flex items-center gap-2">
|
|
<TagIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-[1px]" />
|
|
<span className="text-sm text-muted-foreground">{altText}</span>
|
|
</div>
|
|
)}
|
|
|
|
{description && (
|
|
<div className="flex items-center gap-2">
|
|
<QuoteIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-[1px]" />
|
|
<span className="text-sm text-muted-foreground">{description}</span>
|
|
</div>
|
|
)}
|
|
|
|
{creationLabel && (
|
|
<div className="flex items-center gap-2">
|
|
<CalendarDaysIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-[1px]" />
|
|
<span className="text-sm text-muted-foreground">{creationLabel}</span>
|
|
</div>
|
|
)}
|
|
|
|
{album && (
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<ImagesIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-[1px]" />
|
|
<Link href={`/galleries/${album.gallery?.slug}/${album.slug}`} className="text-sm underline">
|
|
{album.name}
|
|
</Link>
|
|
</div>
|
|
)}
|
|
|
|
{categories.length > 0 && (
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<LayersIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-[1px]" />
|
|
{categories.map((cat) => (
|
|
<Link
|
|
key={cat.id}
|
|
href={`/categories/${cat.id}`}
|
|
className="text-sm underline"
|
|
>
|
|
{cat.name}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{tags.length > 0 && (
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<TagIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-[1px]" />
|
|
{tags.map((tag) => (
|
|
<Link
|
|
key={tag.id}
|
|
href={`/tags/${tag.id}`}
|
|
className="text-sm underline"
|
|
>
|
|
{tag.name}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|