87 lines
3.1 KiB
TypeScript
87 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Home, Grid, Scan, User, Search } from 'lucide-react';
|
|
import { usePathname } from 'next/navigation';
|
|
|
|
interface BottomNavigationProps {
|
|
onHome?: () => void;
|
|
onShelf?: () => void;
|
|
onSearch?: () => void;
|
|
onProfile?: () => void;
|
|
onScan: (file: File) => void;
|
|
}
|
|
|
|
export const BottomNavigation = ({ onHome, onShelf, onSearch, onProfile, onScan }: BottomNavigationProps) => {
|
|
const fileInputRef = React.useRef<HTMLInputElement>(null);
|
|
|
|
const handleScanClick = () => {
|
|
fileInputRef.current?.click();
|
|
};
|
|
|
|
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (file) {
|
|
onScan(file);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="fixed bottom-6 left-1/2 -translate-x-1/2 w-[90%] max-w-sm z-50 pointer-events-none">
|
|
{/* Hidden Input for Scanning */}
|
|
<input
|
|
type="file"
|
|
ref={fileInputRef}
|
|
onChange={handleFileChange}
|
|
accept="image/*"
|
|
className="hidden"
|
|
/>
|
|
|
|
<div className="flex items-center justify-between px-2 py-2 bg-zinc-900/90 backdrop-blur-lg border border-zinc-800 rounded-full shadow-2xl pointer-events-auto">
|
|
{/* Left Items */}
|
|
<button
|
|
onClick={onHome}
|
|
className="p-3 text-zinc-400 hover:text-white transition-colors active:scale-90"
|
|
aria-label="Home"
|
|
>
|
|
<Home size={22} strokeWidth={2.5} />
|
|
</button>
|
|
|
|
<button
|
|
onClick={onShelf}
|
|
className="p-3 text-zinc-400 hover:text-white transition-colors active:scale-90"
|
|
aria-label="Shelf"
|
|
>
|
|
<Grid size={22} strokeWidth={2.5} />
|
|
</button>
|
|
|
|
{/* PRIMARY ACTION - The "Industrial Button" */}
|
|
<button
|
|
onClick={handleScanClick}
|
|
className="flex items-center justify-center w-14 h-14 rounded-full bg-orange-600 text-white hover:bg-orange-500 active:scale-95 transition-all mx-2 shadow-lg shadow-orange-950/40"
|
|
aria-label="Scan Bottle"
|
|
>
|
|
<Scan size={26} strokeWidth={2.5} />
|
|
</button>
|
|
|
|
{/* Right Items */}
|
|
<button
|
|
onClick={onSearch}
|
|
className="p-3 text-zinc-400 hover:text-white transition-colors active:scale-90"
|
|
aria-label="Search"
|
|
>
|
|
<Search size={22} strokeWidth={2.5} />
|
|
</button>
|
|
|
|
<button
|
|
onClick={onProfile}
|
|
className="p-3 text-zinc-400 hover:text-white transition-colors active:scale-90"
|
|
aria-label="Profile"
|
|
>
|
|
<User size={22} strokeWidth={2.5} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|