feat: banner and report viewer in admin panel

src/components/admin/banner-form.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useState } from "react";
+
+export default function BannerForm() {
+	const [message, setMessage] = useState("");
+
+	const onClickClear = async () => {
+		await fetch("/api/admin/banner", { method: "DELETE" });
+	};
+
+	const onClickSet = async () => {
+		await fetch("/api/admin/banner", { method: "POST", body: message });
+	};
+
+	return (
+		<div className="bg-orange-100 rounded-xl border-2 border-orange-400 p-2 flex flex-col gap-2">
+			<input type="text" className="pill input w-full" placeholder="Enter banner text" value={message} onChange={(e) => setMessage(e.target.value)} />
+			<div className="flex gap-2 self-end">
+				<button type="button" className="pill button" onClick={onClickClear}>
+					Clear
+				</button>
+				<button type="submit" className="pill button" onClick={onClickSet}>
+					Set
+				</button>
+			</div>
+		</div>
+	);
+}

src/components/admin/banner.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import useSWR from "swr";
+import { Icon } from "@iconify/react";
+
+interface ApiResponse {
+	message: string;
+}
+
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
+
+export default function AdminBanner() {
+	const { data } = useSWR<ApiResponse>("/api/admin/banner", fetcher);
+	if (!data || !data.message) return null;
+
+	return (
+		<div className="w-full h-10 bg-orange-300 border-y-2 border-y-orange-400 mt-1 shadow-md flex justify-center items-center gap-2 text-orange-900 font-semibold">
+			<Icon icon="humbleicons:exclamation" className="text-2xl" />
+			<span>{data.message}</span>
+		</div>
+	);
+}