From cb5cd8e69243052ae220c7017beadec23aa5cdf3 Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Wed, 26 Nov 2025 21:53:01 +0000
Subject: [PATCH] feat: button to close admin banners

---
 src/components/admin/banner.tsx | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/components/admin/banner.tsx b/src/components/admin/banner.tsx
index cdb75a5..f9905a3 100644
--- a/src/components/admin/banner.tsx
+++ b/src/components/admin/banner.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useSearchParams } from "next/navigation";
-import { Suspense } from "react";
+import { Suspense, useEffect, useState } from "react";
 
 import useSWR from "swr";
 import { Icon } from "@iconify/react";
@@ -18,7 +18,7 @@ function RedirectBanner() {
 	if (from !== "old-domain") 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 text-nowrap overflow-x-auto font-semibold max-sm:justify-start">
+		<div className="w-full h-10 bg-orange-300 border-y-2 border-y-orange-400 mt-1 pl-2 shadow-md flex justify-center items-center gap-2 text-orange-900 text-nowrap overflow-x-auto font-semibold max-sm:justify-start">
 			<Icon icon="humbleicons:link" className="text-2xl min-w-6" />
 			<span>We have moved URLs, welcome to tomodachishare.com!</span>
 		</div>
@@ -27,13 +27,34 @@ function RedirectBanner() {
 
 export default function AdminBanner() {
 	const { data } = useSWR<ApiResponse>("/api/admin/banner", fetcher);
+	const [shouldShow, setShouldShow] = useState(true);
+
+	useEffect(() => {
+		if (!data?.message) return;
+
+		// Check if the current banner text was closed by the user
+		const closedBanner = window.localStorage.getItem("closedBanner");
+		setShouldShow(data.message !== closedBanner);
+	}, [data]);
+
+	const handleClose = () => {
+		if (!data) return;
+
+		// Close banner and remember it
+		window.localStorage.setItem("closedBanner", data.message);
+		setShouldShow(false);
+	};
 
 	return (
 		<>
-			{data && data.message && (
-				<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 text-nowrap overflow-x-auto font-semibold max-sm:justify-start">
+			{data && data.message && shouldShow && (
+				<div className="relative w-full h-10 bg-orange-300 border-y-2 border-y-orange-400 mt-1 pl-2 shadow-md flex justify-center items-center gap-2 text-orange-900 text-nowrap overflow-x-auto font-semibold max-sm:justify-start">
 					<Icon icon="humbleicons:exclamation" className="text-2xl min-w-6" />
 					<span>{data.message}</span>
+
+					<button onClick={handleClose} className="absolute right-2 cursor-pointer p-1.5">
+						<Icon icon="humbleicons:times" className="text-2xl min-w-6" />
+					</button>
 				</div>
 			)}
 			<Suspense>