b80551fe4d
- rename `supplier` field to `suppliers` in OrderItem interface and PocketBase expand queries - complete visual rebrand to warm cream (#f2f1ed) and dark brown (#26251e) color palette with custom CSS variables - add accessibility improvements: skip-to-main content link, focus-visible styles, reduced motion support, and proper ARIA labels - update all component styling to match new theme, including offline indicator, install prompt, login page, modals, map, bottom nav and global CSS - standardize status colors: use green for success, red for errors, retain orange (#f54e00) as primary accent CTAs
57 lines
No EOL
2.4 KiB
TypeScript
57 lines
No EOL
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { usePWAInstall } from '@/lib/pwa';
|
|
import { Download, X, Smartphone } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
import { useState } from 'react';
|
|
|
|
export default function InstallPrompt() {
|
|
const { isInstallable, isInstalled, install, dismiss } = usePWAInstall();
|
|
const [isDismissed, setIsDismissed] = useState(false);
|
|
|
|
if (isInstalled || isDismissed || !isInstallable) return null;
|
|
|
|
return (
|
|
<div className="fixed bottom-20 left-4 right-4 z-[70] animate-fade-in">
|
|
<div
|
|
className="bg-[#e6e5e0] rounded-2xl p-4 border border-[rgba(38,37,30,0.1)]"
|
|
style={{ boxShadow: '0 28px 70px rgba(0,0,0,0.14), 0 14px 32px rgba(0,0,0,0.1)' }}
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
<div className="w-10 h-10 bg-[#ebeae5] rounded-xl flex items-center justify-center flex-shrink-0">
|
|
<Smartphone size={20} className="text-[#26251e]" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="text-sm font-semibold text-[#26251e]">Install 1Driver</h3>
|
|
<p className="text-xs text-[rgba(38,37,30,0.55)] mt-0.5">
|
|
Add to home screen for the best experience
|
|
</p>
|
|
<div className="flex items-center gap-2 mt-3">
|
|
<button
|
|
onClick={install}
|
|
className="flex items-center gap-1.5 px-4 py-2 bg-[#f54e00] text-white rounded-lg text-sm font-medium active:bg-[#d44200] transition-colors touch-manipulation"
|
|
style={{ boxShadow: '0 4px 12px rgba(245,78,0,0.3)' }}
|
|
>
|
|
<Download size={14} />
|
|
Install
|
|
</button>
|
|
<button
|
|
onClick={() => { dismiss(); setIsDismissed(true); }}
|
|
className="px-3 py-2 text-sm text-[rgba(38,37,30,0.55)] font-medium active:bg-[rgba(38,37,30,0.06)] rounded-lg transition-colors touch-manipulation"
|
|
>
|
|
Not now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => { dismiss(); setIsDismissed(true); }}
|
|
aria-label="Dismiss install prompt"
|
|
className="p-1 text-[rgba(38,37,30,0.55)] hover:text-[#26251e] active:bg-[rgba(38,37,30,0.06)] rounded-lg transition-colors"
|
|
>
|
|
<X size={16} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |