db10eb95c7
Add full PWA support (icons, manifest, service worker, pwa lib and bridge) and introduce install/offline UI. Generate app icons via a new scripts/generate-icons.js and include multiple icon sizes in public/icons; update manifest and layout head meta/preconnect. Revamp global styles (globals.css) with new utilities, animations, spacing for bottom nav, card shadows, skeletons and accessibility tweaks. Polish major screens (login, collections, map, settings) with improved headers, loading states, touch/press feedback, and layout adjustments; add new components (InstallPrompt, OfflineIndicator, PWABridge) and update various components to match new visual/UX patterns. Update Dockerfile to generate icons and use Next.js static export output (/out) for nginx, and bump package setup to support icon generation.
52 lines
No EOL
2.1 KiB
TypeScript
52 lines
No EOL
2.1 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-white rounded-2xl shadow-xl border border-gray-100 p-4">
|
|
<div className="flex items-start gap-3">
|
|
<div className="w-10 h-10 bg-orange-100 rounded-xl flex items-center justify-center flex-shrink-0">
|
|
<Smartphone size={20} className="text-orange-600" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="text-sm font-semibold text-gray-900">Install 1Driver</h3>
|
|
<p className="text-xs text-gray-500 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-orange-500 text-white rounded-lg text-sm font-medium active:bg-orange-600 transition-colors touch-manipulation"
|
|
>
|
|
<Download size={14} />
|
|
Install
|
|
</button>
|
|
<button
|
|
onClick={() => { dismiss(); setIsDismissed(true); }}
|
|
className="px-3 py-2 text-sm text-gray-500 font-medium active:bg-gray-100 rounded-lg transition-colors touch-manipulation"
|
|
>
|
|
Not now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => { dismiss(); setIsDismissed(true); }}
|
|
className="p-1 text-gray-400 hover:text-gray-600 active:bg-gray-100 rounded-lg transition-colors"
|
|
>
|
|
<X size={16} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |