style: format code biome
This commit is contained in:
openhands
@@ -1,258 +1,330 @@
|
||||
import Link from "next/link";
|
||||
import { createRadioBanner, deleteRadioBanner, updateRadioBanner } from "@/actions/admin-radio-extra";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import NextImage from "next/image";
|
||||
import { Image as LucideImage } from "lucide-react";
|
||||
import NextImage from "next/image";
|
||||
import Link from "next/link";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import {
|
||||
createRadioBanner,
|
||||
deleteRadioBanner,
|
||||
updateRadioBanner,
|
||||
} from "@/actions/admin-radio-extra";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
type Banner = {
|
||||
id: bigint;
|
||||
userId: bigint;
|
||||
imagePath: string;
|
||||
title: string | null;
|
||||
description: string | null;
|
||||
sortOrder: number;
|
||||
isActive: boolean;
|
||||
createdAt: Date | null;
|
||||
id: bigint;
|
||||
userId: bigint;
|
||||
imagePath: string;
|
||||
title: string | null;
|
||||
description: string | null;
|
||||
sortOrder: number;
|
||||
isActive: boolean;
|
||||
createdAt: Date | null;
|
||||
};
|
||||
|
||||
function formatDate(d: Date | null): string {
|
||||
return d ? d.toISOString().slice(0, 16).replace("T", " ") : "\u2014";
|
||||
return d ? d.toISOString().slice(0, 16).replace("T", " ") : "\u2014";
|
||||
}
|
||||
|
||||
export default async function AdminRadioBannersPage() {
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
|
||||
let banners: Banner[] = [];
|
||||
let dbError = false;
|
||||
let banners: Banner[] = [];
|
||||
let dbError = false;
|
||||
|
||||
try {
|
||||
banners = await prisma.radioBanners.findMany({
|
||||
select: {
|
||||
id: true,
|
||||
userId: true,
|
||||
imagePath: true,
|
||||
title: true,
|
||||
description: true,
|
||||
sortOrder: true,
|
||||
isActive: true,
|
||||
createdAt: true,
|
||||
},
|
||||
orderBy: [{ sortOrder: "asc" }, { id: "asc" }],
|
||||
});
|
||||
} catch {
|
||||
dbError = true;
|
||||
banners = [];
|
||||
}
|
||||
try {
|
||||
banners = await prisma.radioBanners.findMany({
|
||||
select: {
|
||||
id: true,
|
||||
userId: true,
|
||||
imagePath: true,
|
||||
title: true,
|
||||
description: true,
|
||||
sortOrder: true,
|
||||
isActive: true,
|
||||
createdAt: true,
|
||||
},
|
||||
orderBy: [{ sortOrder: "asc" }, { id: "asc" }],
|
||||
});
|
||||
} catch {
|
||||
dbError = true;
|
||||
banners = [];
|
||||
}
|
||||
|
||||
const activeCount = banners.filter((b) => b.isActive).length;
|
||||
const hiddenCount = banners.length - activeCount;
|
||||
const activeCount = banners.filter((b) => b.isActive).length;
|
||||
const hiddenCount = banners.length - activeCount;
|
||||
|
||||
return (
|
||||
<main>
|
||||
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
|
||||
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/history">{t("history")}</Link>
|
||||
</nav>
|
||||
return (
|
||||
<main>
|
||||
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
|
||||
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/history">{t("history")}</Link>
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<LucideImage size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">{t("banners.heading")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">{t("banners.description")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<LucideImage size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">
|
||||
{t("banners.heading")}
|
||||
</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">
|
||||
{t("banners.description")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{dbError ? (
|
||||
<div className="admin-card mb-6">
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted m-0">{t("banners.dbError")}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard label={t("banners.title")} value={banners.length} icon="\u{1F5BC}\uFE0F" />
|
||||
<StatusCard
|
||||
label={t("banners.statusActive")}
|
||||
value={activeCount}
|
||||
state={activeCount > 0 ? "ok" : "neutral"}
|
||||
icon="\u{2705}"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("banners.statusHidden")}
|
||||
value={hiddenCount}
|
||||
state={hiddenCount > 0 ? "warn" : "neutral"}
|
||||
icon="\u{1F6AB}"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{dbError ? (
|
||||
<div className="admin-card mb-6">
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted m-0">
|
||||
{t("banners.dbError")}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard
|
||||
label={t("banners.title")}
|
||||
value={banners.length}
|
||||
icon="\u{1F5BC}\uFE0F"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("banners.statusActive")}
|
||||
value={activeCount}
|
||||
state={activeCount > 0 ? "ok" : "neutral"}
|
||||
icon="\u{2705}"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("banners.statusHidden")}
|
||||
value={hiddenCount}
|
||||
state={hiddenCount > 0 ? "warn" : "neutral"}
|
||||
icon="\u{1F6AB}"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">{t("banners.addBanner")}</h2>
|
||||
<form action={createRadioBanner} className="admin-card">
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label htmlFor="new_imagePath" style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("banners.form.imagePath")}
|
||||
</label>
|
||||
<input
|
||||
id="new_imagePath"
|
||||
name="imagePath"
|
||||
placeholder={t("banners.form.imagePathPlaceholder")}
|
||||
required
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="new_title" style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("banners.form.title")}
|
||||
</label>
|
||||
<input id="new_title" name="title" style={{ width: "100%" }} />
|
||||
</div>
|
||||
<div style={{ gridColumn: "1 / -1" }}>
|
||||
<label htmlFor="new_description" style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("banners.form.description")}
|
||||
</label>
|
||||
<textarea id="new_description" name="description" rows={2} style={{ width: "100%" }} />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="new_sortOrder" style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("banners.form.sortOrder")}
|
||||
</label>
|
||||
<input
|
||||
id="new_sortOrder"
|
||||
name="sortOrder"
|
||||
type="number"
|
||||
defaultValue={0}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: "flex", alignItems: "flex-end" }}>
|
||||
<label style={{ display: "inline-flex", gap: "0.4rem", alignItems: "center" }}>
|
||||
<input type="checkbox" name="isActive" value="1" defaultChecked /> {t("banners.form.active")}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: "0.75rem" }}>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{t("banners.createBanner")}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">{t("banners.addBanner")}</h2>
|
||||
<form action={createRadioBanner} className="admin-card">
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="new_imagePath"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("banners.form.imagePath")}
|
||||
</label>
|
||||
<input
|
||||
id="new_imagePath"
|
||||
name="imagePath"
|
||||
placeholder={t("banners.form.imagePathPlaceholder")}
|
||||
required
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="new_title"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("banners.form.title")}
|
||||
</label>
|
||||
<input id="new_title" name="title" style={{ width: "100%" }} />
|
||||
</div>
|
||||
<div style={{ gridColumn: "1 / -1" }}>
|
||||
<label
|
||||
htmlFor="new_description"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("banners.form.description")}
|
||||
</label>
|
||||
<textarea
|
||||
id="new_description"
|
||||
name="description"
|
||||
rows={2}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="new_sortOrder"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("banners.form.sortOrder")}
|
||||
</label>
|
||||
<input
|
||||
id="new_sortOrder"
|
||||
name="sortOrder"
|
||||
type="number"
|
||||
defaultValue={0}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: "flex", alignItems: "flex-end" }}>
|
||||
<label
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
gap: "0.4rem",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="isActive"
|
||||
value="1"
|
||||
defaultChecked
|
||||
/>{" "}
|
||||
{t("banners.form.active")}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: "0.75rem" }}>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{t("banners.createBanner")}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">{t("banners.existing", { count: banners.length })}</h2>
|
||||
{banners.length === 0 ? (
|
||||
<div className="admin-empty">{t("banners.noBanners")}</div>
|
||||
) : (
|
||||
<div className="grid">
|
||||
{banners.map((b) => (
|
||||
<div key={String(b.id)} className="admin-card">
|
||||
<div className="flex justify-between items-baseline gap-3">
|
||||
<strong>#{String(b.id)}</strong>
|
||||
<span className="text-sm theme-text-muted dark:theme-text-muted inline-flex gap-2 items-center">
|
||||
{t("banners.byUser", { id: String(b.userId) })} · {formatDate(b.createdAt)} ·{" "}
|
||||
<span
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${b.isActive ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]"}`}
|
||||
>
|
||||
{b.isActive ? t("banners.active") : t("banners.hidden")}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">
|
||||
{t("banners.existing", { count: banners.length })}
|
||||
</h2>
|
||||
{banners.length === 0 ? (
|
||||
<div className="admin-empty">{t("banners.noBanners")}</div>
|
||||
) : (
|
||||
<div className="grid">
|
||||
{banners.map((b) => (
|
||||
<div key={String(b.id)} className="admin-card">
|
||||
<div className="flex justify-between items-baseline gap-3">
|
||||
<strong>#{String(b.id)}</strong>
|
||||
<span className="text-sm theme-text-muted dark:theme-text-muted inline-flex gap-2 items-center">
|
||||
{t("banners.byUser", { id: String(b.userId) })} ·{" "}
|
||||
{formatDate(b.createdAt)} ·{" "}
|
||||
<span
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${b.isActive ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]"}`}
|
||||
>
|
||||
{b.isActive ? t("banners.active") : t("banners.hidden")}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{b.imagePath ? (
|
||||
<NextImage
|
||||
src={b.imagePath}
|
||||
alt={b.title ?? t("banners.bannerAlt")}
|
||||
width={800}
|
||||
height={200}
|
||||
className="article-img my-2"
|
||||
unoptimized
|
||||
/>
|
||||
) : null}
|
||||
{b.imagePath ? (
|
||||
<NextImage
|
||||
src={b.imagePath}
|
||||
alt={b.title ?? t("banners.bannerAlt")}
|
||||
width={800}
|
||||
height={200}
|
||||
className="article-img my-2"
|
||||
unoptimized
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<form action={updateRadioBanner}>
|
||||
<input type="hidden" name="id" value={String(b.id)} />
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label htmlFor={`img_${b.id}`} style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("banners.form.imagePath")}
|
||||
</label>
|
||||
<input
|
||||
id={`img_${b.id}`}
|
||||
name="imagePath"
|
||||
defaultValue={b.imagePath}
|
||||
required
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor={`title_${b.id}`} style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("banners.form.title")}
|
||||
</label>
|
||||
<input
|
||||
id={`title_${b.id}`}
|
||||
name="title"
|
||||
defaultValue={b.title ?? ""}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ gridColumn: "1 / -1" }}>
|
||||
<label htmlFor={`desc_${b.id}`} style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("banners.form.description")}
|
||||
</label>
|
||||
<textarea
|
||||
id={`desc_${b.id}`}
|
||||
name="description"
|
||||
rows={2}
|
||||
defaultValue={b.description ?? ""}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor={`sort_${b.id}`} style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("banners.form.sortOrder")}
|
||||
</label>
|
||||
<input
|
||||
id={`sort_${b.id}`}
|
||||
name="sortOrder"
|
||||
type="number"
|
||||
defaultValue={b.sortOrder}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: "flex", alignItems: "flex-end" }}>
|
||||
<label style={{ display: "inline-flex", gap: "0.4rem", alignItems: "center" }}>
|
||||
<input type="checkbox" name="isActive" value="1" defaultChecked={b.isActive} />{" "}
|
||||
{t("banners.form.active")}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: "0.6rem" }}>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{t("banners.save")}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<form action={updateRadioBanner}>
|
||||
<input type="hidden" name="id" value={String(b.id)} />
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label
|
||||
htmlFor={`img_${b.id}`}
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("banners.form.imagePath")}
|
||||
</label>
|
||||
<input
|
||||
id={`img_${b.id}`}
|
||||
name="imagePath"
|
||||
defaultValue={b.imagePath}
|
||||
required
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor={`title_${b.id}`}
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("banners.form.title")}
|
||||
</label>
|
||||
<input
|
||||
id={`title_${b.id}`}
|
||||
name="title"
|
||||
defaultValue={b.title ?? ""}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ gridColumn: "1 / -1" }}>
|
||||
<label
|
||||
htmlFor={`desc_${b.id}`}
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("banners.form.description")}
|
||||
</label>
|
||||
<textarea
|
||||
id={`desc_${b.id}`}
|
||||
name="description"
|
||||
rows={2}
|
||||
defaultValue={b.description ?? ""}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor={`sort_${b.id}`}
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("banners.form.sortOrder")}
|
||||
</label>
|
||||
<input
|
||||
id={`sort_${b.id}`}
|
||||
name="sortOrder"
|
||||
type="number"
|
||||
defaultValue={b.sortOrder}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: "flex", alignItems: "flex-end" }}>
|
||||
<label
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
gap: "0.4rem",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="isActive"
|
||||
value="1"
|
||||
defaultChecked={b.isActive}
|
||||
/>{" "}
|
||||
{t("banners.form.active")}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: "0.6rem" }}>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{t("banners.save")}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form action={deleteRadioBanner} style={{ marginTop: "0.5rem" }}>
|
||||
<input type="hidden" name="id" value={String(b.id)} />
|
||||
<button type="submit" className="btn btn-danger">
|
||||
{t("banners.delete")}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
<form
|
||||
action={deleteRadioBanner}
|
||||
style={{ marginTop: "0.5rem" }}
|
||||
>
|
||||
<input type="hidden" name="id" value={String(b.id)} />
|
||||
<button type="submit" className="btn btn-danger">
|
||||
{t("banners.delete")}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user