Daniel Bedeleanu
6eeaa89d9b
- Created frontend/components/NewItemDialog.tsx (37 lines) - Moved scanner prompt and add item UI from page.tsx - Props: onScannerClick, onAddItemClick callbacks - Removed unused Smartphone and Sparkles imports from page.tsx - All 291 tests passing, build successful
43 lines
1.6 KiB
TypeScript
43 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { Smartphone, Sparkles } from 'lucide-react';
|
|
import { clsx, type ClassValue } from 'clsx';
|
|
import { twMerge } from 'tailwind-merge';
|
|
|
|
function cn(...inputs: ClassValue[]) {
|
|
return twMerge(clsx(inputs));
|
|
}
|
|
|
|
interface NewItemDialogProps {
|
|
onScannerClick: () => void;
|
|
onAddItemClick: () => void;
|
|
}
|
|
|
|
export default function NewItemDialog({ onScannerClick, onAddItemClick }: NewItemDialogProps) {
|
|
return (
|
|
<div className="flex flex-col items-center py-8 text-center gap-6">
|
|
<button
|
|
onClick={onScannerClick}
|
|
className="w-24 h-24 rounded-full bg-primary/20 hover:bg-primary/30 border-2 border-primary border-dashed flex items-center justify-center group transition-all"
|
|
>
|
|
<Smartphone className="w-10 h-10 text-primary group-hover:scale-110 transition-transform" />
|
|
</button>
|
|
|
|
<div className="w-full flex justify-center mt-4">
|
|
<button
|
|
onClick={onAddItemClick}
|
|
className="w-full flex flex-col items-center justify-center p-8 rounded-[2rem] bg-indigo-500/5 border border-indigo-500/20 group hover:border-indigo-500/50 transition-all font-black text-indigo-400 gap-4"
|
|
>
|
|
<div className="p-4 bg-indigo-500/10 rounded-2xl group-hover:scale-110 transition-transform shadow-lg shadow-indigo-500/10">
|
|
<Sparkles size={32} />
|
|
</div>
|
|
<div className="text-center">
|
|
<p className="text-lg leading-tight">Add New Item</p>
|
|
<p className="text-xs opacity-60 font-mono mt-1">AI Smart Discovery</p>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|