function LighterCard({ brand, color, lastUsed, onUse, onDelete }) { return /*#__PURE__*/ React.createElement("div", { className: "rounded-lg shadow-md p-6 bg-white w-[300px]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-fire text-2xl text-orange-500 mr-3", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, brand)), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-gray-600 w-24", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, "Color:"), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, color)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-gray-600 w-24", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, "Last Used:"), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, lastUsed)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between pt-4", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onUse, className: "bg-green-500 text-white px-4 py-2 rounded font-roboto hover:bg-green-600", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, "Just Used"), /*#__PURE__*/ React.createElement("button", { onClick: onDelete, className: "bg-red-500 text-white px-4 py-2 rounded font-roboto hover:bg-red-600", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "Delete")))); } function LighterCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(LighterCard, { brand: "Zippo", color: "Silver", lastUsed: "2 hours ago", onUse: ()=>console.log("Used Zippo"), onDelete: ()=>console.log("Delete Zippo"), __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(LighterCard, { brand: "BIC", color: "Red", lastUsed: "Yesterday", onUse: ()=>console.log("Used BIC"), onDelete: ()=>console.log("Delete BIC"), __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(LighterCard, { brand: "Clipper", color: "Blue", lastUsed: "Last week", onUse: ()=>console.log("Used Clipper"), onDelete: ()=>console.log("Delete Clipper"), __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this })); } function AddLighterForm({ onSubmit = ()=>{}, loading = false }) { const [brand, setBrand] = useState(""); const [color, setColor] = useState(""); const handleSubmit = (e)=>{ e.preventDefault(); onSubmit({ brand, color }); setBrand(""); setColor(""); }; return /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "max-w-md mx-auto p-6 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "brand", value: brand, onChange: (e)=>setBrand(e.target.value), placeholder: "Brand name", className: "w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", required: true, __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "color", value: color, onChange: (e)=>setColor(e.target.value), placeholder: "Color", className: "w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", required: true, __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "w-full bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 disabled:bg-blue-300", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, loading ? "Adding..." : "Add Lighter")); } function AddLighterFormStory() { const [loading, setLoading] = useState(false); const handleSubmit = (data)=>{ setLoading(true); setTimeout(()=>{ console.log("Submitted:", data); setLoading(false); }, 1000); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(AddLighterForm, { onSubmit: handleSubmit, loading: loading, __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this })); } function MainComponent() { const [lighters, setLighters] = useState([]); const [searchTerm, setSearchTerm] = useState(""); const onAdd = useCallback((lighter)=>{ const newLighter = { ...lighter, lastUsed: new Date().toISOString() }; setLighters((prev)=>[ ...prev, newLighter ]); }, []); const onDelete = useCallback((index)=>{ setLighters((prev)=>prev.filter((_, i)=>i !== index)); }, []); const onUse = useCallback((index)=>{ setLighters((prev)=>prev.map((lighter, i)=>i === index ? { ...lighter, lastUsed: new Date().toISOString() } : lighter)); }, []); const filteredLighters = useMemo(()=>{ const filtered = lighters.filter((lighter)=>lighter.brand.toLowerCase().includes(searchTerm.toLowerCase()) || lighter.color.toLowerCase().includes(searchTerm.toLowerCase())); return filtered.sort((a, b)=>new Date(b.lastUsed) - new Date(a.lastUsed)); }, [ lighters, searchTerm ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-md mb-6", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "My Lighters (", lighters.length, ")"), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search by brand or color", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), className: "px-4 py-2 border rounded-lg w-64", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement(AddLighterForm, { onSubmit: onAdd, __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, filteredLighters.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "col-span-full text-center py-8 text-gray-500 font-roboto", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "No lighters found") : filteredLighters.map((lighter, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "relative", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement(LighterCard, { ...lighter, __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-2 right-2 flex gap-2", __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>onUse(index), className: "bg-green-500 text-white p-2 rounded-full hover:bg-green-600", __source: { fileName: "", lineNumber: 65, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sync-alt", __source: { fileName: "", lineNumber: 69, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>onDelete(index), className: "bg-red-500 text-white p-2 rounded-full hover:bg-red-600", __source: { fileName: "", lineNumber: 71, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 75, columnNumber: 21 }, __self: this })))))))); }

My Lighters (0)