feat: product detail page with chart, alert list, alert form

2026-05-25 14:35:59 +00:00
parent 04c014d48b
commit 99d1d85293
5 changed files with 195 additions and 0 deletions
--- a/src/components/AlertForm.tsx
+++ b/src/components/AlertForm.tsx
@@ -0,0 +1,54 @@
+'use client'
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+
+export function AlertForm({ productId }: { productId: string }) {
+  const [type, setType] = useState<'target_price' | 'all_time_low' | 'percent_drop'>('target_price')
+  const [threshold, setThreshold] = useState('')
+  const [percent, setPercent] = useState('10')
+  const [lookback, setLookback] = useState('7')
+  const router = useRouter()
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault()
+    let config: Record<string, unknown> = {}
+    if (type === 'target_price') config = { threshold: Number(threshold) }
+    if (type === 'percent_drop') config = { percent: Number(percent), lookback_days: Number(lookback) }
+    const res = await fetch('/api/alerts', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ productId, type, config }),
+    })
+    if (res.ok) {
+      setThreshold('')
+      router.refresh()
+    }
+  }
+
+  return (
+    <form onSubmit={submit} className="space-y-2 rounded border border-zinc-800 p-3">
+      <div className="flex gap-2">
+        <select value={type} onChange={(e) => setType(e.target.value as typeof type)} className="rounded border border-zinc-700 bg-zinc-900 px-2 py-1 text-sm">
+          <option value="target_price">Zielpreis</option>
+          <option value="all_time_low">Allzeit-Tief</option>
+          <option value="percent_drop">% Drop</option>
+        </select>
+        {type === 'target_price' && (
+          <input type="number" step="0.01" required value={threshold} onChange={(e) => setThreshold(e.target.value)}
+            placeholder="€" className="w-24 rounded border border-zinc-700 bg-zinc-900 px-2 py-1 text-sm" />
+        )}
+        {type === 'percent_drop' && (
+          <>
+            <input type="number" required value={percent} onChange={(e) => setPercent(e.target.value)}
+              className="w-16 rounded border border-zinc-700 bg-zinc-900 px-2 py-1 text-sm" />
+            <span className="self-center text-xs">% in</span>
+            <input type="number" required value={lookback} onChange={(e) => setLookback(e.target.value)}
+              className="w-16 rounded border border-zinc-700 bg-zinc-900 px-2 py-1 text-sm" />
+            <span className="self-center text-xs">Tagen</span>
+          </>
+        )}
+        <button type="submit" className="rounded bg-emerald-600 px-3 py-1 text-sm hover:bg-emerald-500">+ Alert</button>
+      </div>
+    </form>
+  )
+}