7c69474cf9
- Created automated script (scripts/align-8px-grid.py) to align all spacing to 8px grid - Replaced non-8px-aligned spacing: gap-3/p-3/m-3 (12px) → gap-4/p-4/m-4 (16px), gap-5/p-5/m-5 (20px) → gap-6/p-6/m-6 (24px), gap-10/p-10/m-10 (40px) → gap-12/p-12/m-12 (48px), gap-20/p-20/m-20 (80px) → gap-24/p-24/m-24 (96px) - Preserved: 4px values (gap-1, p-1, m-1) as they may be intentional fine-tuning, responsive breakpoints (sm:, md:, lg:), test files, documentation - Modified files across all components to ensure consistent 8px grid alignment - Action 11.2.1.3: Align all elements to 8px grid - COMPLETE
94 lines
3.3 KiB
TypeScript
94 lines
3.3 KiB
TypeScript
/**
|
|
* PWA Install Banner Component
|
|
* Shows a banner prompting users to install the app
|
|
*/
|
|
|
|
import { Download, Smartphone } from 'lucide-react';
|
|
import { Button } from '@veza/design-system';
|
|
import { usePWAInstallBanner } from '@/hooks/usePWA';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export function PWAInstallBanner() {
|
|
const { showBanner, isInstalling, handleInstall, handleDismiss } =
|
|
usePWAInstallBanner();
|
|
const { t } = useTranslation();
|
|
|
|
if (!showBanner) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'fixed bottom-8 right-8 z-50 w-80 glass-hud rounded-2xl border-white/10 p-6 shadow-2xl animate-slideInRight hud-corner group overflow-hidden',
|
|
'before:absolute before:inset-0 before:bg-gradient-to-br before:from-kodo-cyan/5 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity',
|
|
)}
|
|
>
|
|
<div className="flex flex-col gap-4 relative z-10">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2.5">
|
|
<div className="w-8 h-8 rounded-lg bg-kodo-steel/10 flex items-center justify-center border border-kodo-steel/30 animate-pulse-glow">
|
|
<Smartphone className="h-4 w-4 text-kodo-steel" />
|
|
</div>
|
|
<div>
|
|
<div className="text-hud">System.Uplink</div>
|
|
<h3 className="font-display font-black text-xs text-white uppercase tracking-wider">
|
|
{t('pwa.install.title', 'Native_Access')}
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={handleDismiss}
|
|
className="p-1 px-2 rounded-md bg-white/5 text-kodo-secondary hover:text-white transition-all text-[10px] font-mono border border-transparent hover:border-white/10"
|
|
>
|
|
DISMISS
|
|
</button>
|
|
</div>
|
|
|
|
<p className="text-[11px] font-mono text-white/50 leading-relaxed uppercase tracking-tighter">
|
|
{t(
|
|
'pwa.install.description',
|
|
'ESTABLISH_LOCAL_UPLINK_FOR_LOW_LATENCY_OPERATIONS',
|
|
)}
|
|
</p>
|
|
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="gaming"
|
|
className="flex-1 h-9 text-[10px] font-black font-mono tracking-widest bg-kodo-cyan group hover:shadow-neon-cyan/40 transition-shadow"
|
|
onClick={handleInstall}
|
|
disabled={isInstalling}
|
|
>
|
|
<Download className="h-3.5 w-3.5 mr-2 group-hover:translate-y-0.5 transition-transform" />
|
|
{isInstalling ? 'RUNNING...' : 'INITIATE_INSTALL'}
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="absolute -bottom-8 -right-8 w-16 h-16 bg-kodo-steel/10 blur-2xl rounded-full" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* PWA Update Banner Component
|
|
* Shows a banner when app update is available
|
|
*/
|
|
export function PWAUpdateBanner() {
|
|
// This would need to be implemented with the PWA hook
|
|
// For now, returning null as it requires more complex state management
|
|
|
|
return null;
|
|
}
|
|
|
|
/**
|
|
* Offline Banner Component
|
|
* Shows when the app is offline
|
|
*/
|
|
export function OfflineBanner() {
|
|
// This would integrate with the offline detection hook
|
|
// For now, returning null as it requires more complex state management
|
|
|
|
return null;
|
|
}
|