68 lines
2.9 KiB
TypeScript
68 lines
2.9 KiB
TypeScript
import Image from "next/image";
|
|
import { redirect } from "next/navigation";
|
|
import AdminShell from "@/components/admin/AdminShell";
|
|
import { requireAdminSession } from "@/lib/admin/auth";
|
|
import { listMediaFiles } from "@/lib/admin/media";
|
|
|
|
function formatBytes(size: number) {
|
|
if (size < 1024) return `${size} B`;
|
|
if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
|
|
return `${(size / 1024 / 1024).toFixed(1)} MB`;
|
|
}
|
|
|
|
function uploadErrorMessage(error?: string) {
|
|
if (!error) return "";
|
|
if (error === "missing-file") return "Bitte wählen Sie eine Datei aus.";
|
|
if (error === "storage") return "Die Datei konnte nicht gespeichert werden. Bitte Upload-Speicher und Rechte prüfen.";
|
|
return error;
|
|
}
|
|
|
|
export default async function AdminMediaPage({ searchParams }: { searchParams: Promise<{ uploaded?: string; error?: string }> }) {
|
|
if (!await requireAdminSession()) redirect("/admin/login");
|
|
const [files, params] = await Promise.all([listMediaFiles(), searchParams]);
|
|
const error = uploadErrorMessage(params.error);
|
|
|
|
return (
|
|
<AdminShell>
|
|
<div className="admin-page-head">
|
|
<p className="eyebrow">Assets</p>
|
|
<h1>Medienverwaltung</h1>
|
|
</div>
|
|
{params.uploaded === "1" && <p className="success">Datei wurde erfolgreich hochgeladen.</p>}
|
|
{error && <p className="error admin-message">Upload fehlgeschlagen: {error}</p>}
|
|
<form className="admin-card admin-upload" action="/api/admin/media" method="post" encType="multipart/form-data">
|
|
<label>Datei hochladen<input name="file" type="file" accept="image/jpeg,image/png,image/webp,application/pdf" /></label>
|
|
<button className="button" type="submit">Datei hochladen</button>
|
|
</form>
|
|
<section className="admin-card">
|
|
<h2>Uploads</h2>
|
|
{files.length === 0 ? (
|
|
<div className="media-empty">
|
|
<h3>Noch keine Medien vorhanden</h3>
|
|
<p>Hochgeladene Bilder und PDF-Dateien erscheinen hier mit Vorschau und Metadaten.</p>
|
|
</div>
|
|
) : (
|
|
<div className="media-list">
|
|
{files.map((file) => (
|
|
<article key={file.name} className="media-row">
|
|
<a className="media-preview" href={file.url} target="_blank" rel="noreferrer">
|
|
{file.isImage
|
|
? <Image src={file.url} alt={file.name} width={220} height={140} />
|
|
: <span>{file.type}</span>}
|
|
</a>
|
|
<div>
|
|
<h3>{file.name}</h3>
|
|
<dl className="media-meta">
|
|
<div><dt>Typ</dt><dd>{file.type}</dd></div>
|
|
<div><dt>Größe</dt><dd>{formatBytes(file.size)}</dd></div>
|
|
<div><dt>Upload</dt><dd>{new Date(file.uploadedAt).toLocaleString("de-DE")}</dd></div>
|
|
</dl>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
</AdminShell>
|
|
);
|
|
}
|