98 lines
3.7 KiB
TypeScript
98 lines
3.7 KiB
TypeScript
import { useState } from "react"
|
|
import type { User } from "../../lib/types"
|
|
import { InfoIcon } from "../icons/info"
|
|
import { CloseIcon } from "../icons/close"
|
|
const STORAGE_KEY = "info_bar_dismissed"
|
|
interface InfoBarProps {
|
|
user: User | null
|
|
}
|
|
export function InfoBar({ user }: InfoBarProps) {
|
|
const [open, setOpen] = useState(
|
|
() => localStorage.getItem(STORAGE_KEY) !== "true"
|
|
)
|
|
function toggle() {
|
|
const next = !open
|
|
setOpen(next)
|
|
if (!next) {
|
|
localStorage.setItem(STORAGE_KEY, "true")
|
|
} else {
|
|
localStorage.removeItem(STORAGE_KEY)
|
|
}
|
|
}
|
|
const isGuest = user === null
|
|
return (
|
|
<div className="mb-4 rounded-lg border border-border-100 bg-bg-200 overflow-hidden">
|
|
{/* Header row — always visible */}
|
|
<div className="max-w-4xl mx-auto flex items-center justify-between px-6 py-2.5" onClick={toggle}>
|
|
<div className="flex items-center gap-2">
|
|
<InfoIcon className="shrink-0 size-4 text-fg-300" />
|
|
<span className="text-xs font-medium text-fg-200">
|
|
{isGuest ? "You're in guest mode" : "How this app works"}
|
|
</span>
|
|
</div>
|
|
<button
|
|
onClick={toggle}
|
|
className="flex items-center gap-1.5 text-xs text-fg-300 transition-colors hover:text-fg-100 cursor-pointer"
|
|
aria-expanded={open}
|
|
>
|
|
{open ? (
|
|
<>
|
|
<CloseIcon className="size-3" />
|
|
<span>Hide</span>
|
|
</>
|
|
) : (
|
|
<span>Show info</span>
|
|
)}
|
|
</button>
|
|
</div>
|
|
{/* Collapsible body */}
|
|
<div
|
|
className={`transition-[max-height,opacity] duration-200 ease-in-out overflow-hidden ${open ? "max-h-64 opacity-100" : "max-h-0 opacity-0"
|
|
}`}
|
|
onClick={toggle}
|
|
>
|
|
<div className="border-t border-border-100 py-3">
|
|
<div className="max-w-4xl px-6 mx-auto">
|
|
{isGuest ? (
|
|
<div className="flex flex-col sm:flex-row gap-3 sm:gap-5 px-2">
|
|
<div className="w-full">
|
|
<p className="text-xs font-medium text-fg-200">Guest mode</p>
|
|
<p className="text-xs text-fg-300">
|
|
Tickets are stored in your browser (localStorage) only.
|
|
No sync across devices or sessions.
|
|
Admin panel manages only your tickets.
|
|
</p>
|
|
</div>
|
|
<div className="w-full">
|
|
<p className="text-xs font-medium text-fg-200">After signing in</p>
|
|
<p className="text-xs text-fg-300">
|
|
Tickets are saved to the server persistently.
|
|
Admin panel: view all users' tickets.
|
|
You can only edit or manage your own tickets.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col sm:flex-row gap-3 sm:gap-5 px-2">
|
|
<div className="w-full">
|
|
<p className="text-xs font-medium text-fg-200">Tickets and Admin Tab</p>
|
|
<p className="text-xs text-fg-300">
|
|
Can create 10 tickets max, each ticket can have 20 replies max.
|
|
You can view all user tickets in the Admin tab. Useful for monitoring support requests.
|
|
</p>
|
|
</div>
|
|
<div className="w-full">
|
|
<p className="text-xs font-medium text-fg-200 pr-1">Editing</p>
|
|
<p className="text-xs text-fg-300">
|
|
You can only edit or manage your own tickets. Other users' tickets are read-only for you.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|