Umsortieren geht per Ziehen und über Pfeilknöpfe: reines Drag & Drop wäre mit Tastatur nicht bedienbar und auf dem Handy fummelig — die Knöpfe sind der verlässliche Weg, das Ziehen der bequeme. Die Erscheinungsreihenfolge lässt sich gar nicht erst anfassen, weil sie sich aus den Daten ergibt.
39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
import Link from "next/link";
|
|
import type { Metadata } from "next";
|
|
import { requireUser } from "@/lib/auth";
|
|
import { getSettings } from "@/lib/settings";
|
|
import { AppShell } from "@/components/AppShell";
|
|
import { NewUniverseForm } from "@/components/universes/UniverseTools";
|
|
|
|
export const metadata: Metadata = { title: "Neues Universum" };
|
|
|
|
export default async function NewUniversePage() {
|
|
const user = await requireUser("/universen/neu");
|
|
const settings = await getSettings();
|
|
|
|
return (
|
|
<AppShell user={user} instanceName={settings.instanceName}>
|
|
<div className="mx-auto max-w-xl">
|
|
<header className="mb-6">
|
|
<h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">Neues Universum</h1>
|
|
<p className="mt-1 text-sm text-[var(--fl-muted)]">
|
|
Ein Universum bündelt Filme und Serien, die zusammengehören. Die
|
|
Erscheinungsreihenfolge ist von Anfang an dabei; weitere Reihenfolgen legst du
|
|
danach an.
|
|
</p>
|
|
</header>
|
|
|
|
<div className="fl-card p-5 sm:p-6">
|
|
<NewUniverseForm />
|
|
</div>
|
|
|
|
<p className="mt-6 text-sm">
|
|
<Link href="/universen" className="text-[var(--fl-faint)] hover:text-[var(--fl-muted)]">
|
|
← Zurück zur Übersicht
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</AppShell>
|
|
);
|
|
}
|