Some checks failed
CI / Frontend Lint & Type Check (push) Has been cancelled
CI / Frontend Build (push) Has been cancelled
CI / Backend Lint (push) Has been cancelled
CI / Backend Tests (push) Has been cancelled
CI / Docker Build (push) Has been cancelled
CI / Security Scan (push) Has been cancelled
Deploy / Build & Push Images (push) Has been cancelled
Deploy / Deploy to Server (push) Has been cancelled
Deploy / Notify (push) Has been cancelled
50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import { X, Zap } from 'lucide-react'
|
|
|
|
const BANNER_DISMISSED_KEY = 'pounce_beta_banner_dismissed'
|
|
|
|
export function BetaBanner() {
|
|
const [isDismissed, setIsDismissed] = useState(true) // Start hidden to avoid flash
|
|
|
|
useEffect(() => {
|
|
// Check localStorage after mount
|
|
const dismissed = localStorage.getItem(BANNER_DISMISSED_KEY)
|
|
setIsDismissed(dismissed === 'true')
|
|
}, [])
|
|
|
|
const handleDismiss = () => {
|
|
setIsDismissed(true)
|
|
localStorage.setItem(BANNER_DISMISSED_KEY, 'true')
|
|
}
|
|
|
|
if (isDismissed) return null
|
|
|
|
return (
|
|
<div className="bg-accent/10 border-b border-accent/20 px-4 py-1.5 flex items-center justify-center gap-2 text-xs font-mono relative flex-shrink-0">
|
|
<Zap className="w-3 h-3 text-accent flex-shrink-0" />
|
|
<p className="text-white/70">
|
|
<span className="text-accent font-medium">Pounce is in Public Beta.</span>
|
|
{' '}I ship code daily based on your feedback. If you spot a glitch, hit me up on{' '}
|
|
<a
|
|
href="https://discord.gg/gqyzWMpj8z"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-accent hover:text-white underline underline-offset-2 transition-colors"
|
|
>
|
|
Discord
|
|
</a>
|
|
.
|
|
</p>
|
|
<button
|
|
onClick={handleDismiss}
|
|
className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-white/40 hover:text-white transition-colors"
|
|
aria-label="Dismiss banner"
|
|
>
|
|
<X className="w-3.5 h-3.5" />
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|