alisaza
e1eaf5eff5
Extract admin dashboard from ghabilee-frontend2 into a dedicated Next.js app for backoffice.ghabilee.ir (no SEO indexing / Clarity).
48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { useEffect, useState } from 'react'
|
|
|
|
import { ACCOUNT_SUSPENSION_CHANGED_EVENT, ACCOUNT_SUSPENSION_STORAGE_KEY, isAccountSuspended } from '@/lib/accountSuspension'
|
|
import { texts } from '@/texts'
|
|
|
|
export const AccountSuspensionBanner = () => {
|
|
const [isSuspended, setIsSuspended] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const sync = () => {
|
|
setIsSuspended(isAccountSuspended())
|
|
}
|
|
const handleStorage = (event: StorageEvent) => {
|
|
if (event.key === ACCOUNT_SUSPENSION_STORAGE_KEY) sync()
|
|
}
|
|
|
|
sync()
|
|
window.addEventListener(ACCOUNT_SUSPENSION_CHANGED_EVENT, sync)
|
|
window.addEventListener('storage', handleStorage)
|
|
|
|
return () => {
|
|
window.removeEventListener(ACCOUNT_SUSPENSION_CHANGED_EVENT, sync)
|
|
window.removeEventListener('storage', handleStorage)
|
|
}
|
|
}, [])
|
|
|
|
if (!isSuspended) return null
|
|
|
|
return (
|
|
<div
|
|
aria-live="assertive"
|
|
className="sticky inset-x-0 top-0 z-[10001] flex w-full flex-wrap items-center justify-center gap-x-2 gap-y-1 bg-fourth-700 px-4 py-3 text-center text-sm font-medium text-white"
|
|
role="alert"
|
|
>
|
|
<span>{texts.common.accountSuspendedBanner}</span>
|
|
<Link
|
|
className="font-bold text-white underline underline-offset-4"
|
|
href="/contact"
|
|
>
|
|
{texts.common.contactSupport}
|
|
</Link>
|
|
</div>
|
|
)
|
|
}
|