Citali/app.fellies.art
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine image page, add about page

Browse Source
This commit is contained in:
Citali
2025-07-03 18:03:16 +02:00
parent f5edeb67d4
commit 6026416c5c
16 changed files with 301 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/images/ImageMetadataBox.tsx
View File

@ -1,23 +1,67 @@
// components/images/ImageMetadataBox.tsx
"use client"
import { Album, Category, Tag } from "@/generated/prisma"
import { FolderIcon, LayersIcon, TagIcon } from "lucide-react"
import { CalendarDaysIcon, FolderIcon, LayersIcon, QuoteIcon, TagIcon } from "lucide-react"
import Link from "next/link"
type Props = {
album: Album | 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 }: Props) {
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">
{album && (
{altText && (
<div className="flex items-center gap-2">
<FolderIcon className="w-5 h-5 text-muted-foreground" />
<Link href={`/galleries/${album.galleryId}/${album.slug}`} className="hover:underline">
<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">
<FolderIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-[1px]" />
<Link href={`/galleries/${album.galleryId}/${album.slug}`} className="text-sm underline">
{album.name}
</Link>
</div>
@ -25,12 +69,12 @@ export default function ImageMetadataBox({ album, categories, tags }: Props) {
{categories.length > 0 && (
<div className="flex items-center gap-2 flex-wrap">
<LayersIcon className="w-5 h-5 text-muted-foreground" />
<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 text-muted-foreground hover:underline"
className="text-sm underline"
>
{cat.name}
</Link>
@ -40,12 +84,12 @@ export default function ImageMetadataBox({ album, categories, tags }: Props) {
{tags.length > 0 && (
<div className="flex items-center gap-2 flex-wrap">
<TagIcon className="w-5 h-5 text-muted-foreground" />
<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 text-muted-foreground hover:underline"
className="text-sm underline"
>
{tag.name}
</Link>