{
  "id": "price-watcher",
  "name": "Price Watcher",
  "category": "e-commerce",
  "tags": ["price", "deals", "shopping", "alerts"],
  "description": "Track product prices and get alerts when target prices are reached.",
  "triggers": ["price tracker", "price alert", "deal tracker", "price drop"],
  "defaultSize": { "w": 4, "h": 4 },
  "source": "function PriceWatcher() {\n  const [items, setItems] = React.useState([\n    { name: 'Sony WH-1000XM5', current: 298, target: 250, url: '' },\n    { name: 'Kindle Paperwhite', current: 139, target: 99, url: '' }\n  ]);\n  const [name, setName] = React.useState('');\n  const [current, setCurrent] = React.useState('');\n  const [target, setTarget] = React.useState('');\n\n  function addItem() {\n    if (!name.trim() || !current || !target) return;\n    setItems([...items, { name, current: parseFloat(current), target: parseFloat(target), url: '' }]);\n    setName('');\n    setCurrent('');\n    setTarget('');\n  }\n\n  function removeItem(idx) {\n    setItems(items.filter((_, i) => i !== idx));\n  }\n\n  return (\n    <div style={{ fontFamily: 'system-ui, sans-serif', padding: 16, background: '#fff', borderRadius: 12, height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column' }}>\n      <h2 style={{ margin: '0 0 12px 0', fontSize: 18, color: '#1a1a1a' }}>Price Watcher</h2>\n      <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>\n        <input placeholder=\"Product\" value={name} onChange={e => setName(e.target.value)} style={{ flex: 1, padding: '6px 10px', borderRadius: 6, border: '1px solid #ddd', fontSize: 13 }} />\n        <input placeholder=\"Current\" type=\"number\" value={current} onChange={e => setCurrent(e.target.value)} style={{ width: 70, padding: '6px 10px', borderRadius: 6, border: '1px solid #ddd', fontSize: 13 }} />\n        <input placeholder=\"Target\" type=\"number\" value={target} onChange={e => setTarget(e.target.value)} style={{ width: 70, padding: '6px 10px', borderRadius: 6, border: '1px solid #ddd', fontSize: 13 }} />\n        <button onClick={addItem} style={{ padding: '6px 14px', borderRadius: 6, border: 'none', background: '#2563eb', color: '#fff', fontSize: 13, cursor: 'pointer' }}>Add</button>\n      </div>\n      <div style={{ flex: 1, overflowY: 'auto' }}>\n        {items.map((item, i) => {\n          const diff = item.current - item.target;\n          const alert = diff <= 0;\n          return (\n            <div key={i} style={{ marginBottom: 12, padding: 12, borderRadius: 8, background: alert ? '#f0fdf4' : '#f8f9fa', border: '1px solid ' + (alert ? '#bbf7d0' : '#e5e7eb') }}>\n              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>\n                <div style={{ fontWeight: 600, fontSize: 14, color: '#1a1a1a' }}>{item.name}</div>\n                <button onClick={() => removeItem(i)} style={{ background: 'transparent', border: 'none', color: '#999', cursor: 'pointer', fontSize: 16 }}>x</button>\n              </div>\n              <div style={{ marginTop: 8, display: 'flex', alignItems: 'center', gap: 16 }}>\n                <div>\n                  <div style={{ fontSize: 11, color: '#888' }}>Current</div>\n                  <div style={{ fontSize: 16, fontWeight: 700, color: '#1a1a1a' }}>${item.current}</div>\n                </div>\n                <div style={{ color: '#ccc' }}>|</div>\n                <div>\n                  <div style={{ fontSize: 11, color: '#888' }}>Target</div>\n                  <div style={{ fontSize: 16, fontWeight: 700, color: alert ? '#16a34a' : '#dc2626' }}>${item.target}</div>\n                </div>\n                <div style={{ flex: 1, textAlign: 'right' }}>\n                  {alert ? (\n                    <span style={{ padding: '4px 10px', borderRadius: 20, background: '#22c55e', color: '#fff', fontSize: 11, fontWeight: 600 }}>ALERT: Target reached!</span>\n                  ) : (\n                    <span style={{ padding: '4px 10px', borderRadius: 20, background: '#e5e7eb', color: '#666', fontSize: 11 }}>${diff} above target</span>\n                  )}\n                </div>\n              </div>\n            </div>\n          );\n        })}\n        {items.length === 0 && <div style={{ textAlign: 'center', color: '#999', fontSize: 13, padding: 20 }}>No items tracked yet.</div>}\n      </div>\n    </div>\n  );\n}\nrender(<PriceWatcher/>);",
  "placeholders": []
}