trafficlunar/tomodachi-share
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: add suspense to redirect banner

Browse source
This commit is contained in:
trafficlunar 2025-06-11 16:26:18 +01:00
parent 62ab328fa2
commit 737f808fec
1 changed files with 22 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/components/admin/banner.tsx
View file

@ -1,6 +1,8 @@
"use client";
import { useSearchParams } from "next/navigation";
import { Suspense } from "react";
import useSWR from "swr";
import { Icon } from "@iconify/react";
@ -10,23 +12,33 @@ interface ApiResponse {
const fetcher = (url: string) => fetch(url).then((res) => res.json());
const Banner = ({ icon, message }: { icon: string; message: string }) => (
<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">
<Icon icon={icon} className="text-2xl min-w-6" />
<span>{message}</span>
</div>
);
export default function AdminBanner() {
function RedirectBanner() {
const searchParams = useSearchParams();
const from = searchParams.get("from");
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">
<Icon icon="humbleicons:link" className="text-2xl min-w-6" />
<span>We have moved URLs, welcome to tomodachishare.com!</span>
</div>
);
}
export default function AdminBanner() {
const { data } = useSWR<ApiResponse>("/api/admin/banner", fetcher);
return (
<>
{data && data.message && <Banner icon="humbleicons:exclamation" message={data.message} />}
{from == "old-domain" && <Banner icon="humbleicons:link" message="We have moved URLs, welcome to tomodachishare.com!" />}
{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">
<Icon icon="humbleicons:exclamation" className="text-2xl min-w-6" />
<span>{data.message}</span>
</div>
)}
<Suspense>
<RedirectBanner />
</Suspense>
</>
);
}