feat: OnyvaLeads customer UI — Suche + Leadspeicher
- New Topbar: logo, 2-tab pill switcher, live "Neu" badge - /suche page: SearchCard, LoadingCard, ExamplePills - /leadspeicher page: full leads table with filters, pagination - StatusBadge, StatusPopover, LeadSidePanel, BulkActionBar - POST /api/search: unified search entry point → serp-enrich - Remove Sidebar + old TopBar from layout - Title: OnyvaLeads, redirect / → /suche Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Timo Uttenweiler
207
components/search/SearchCard.tsx
Normal file
207
components/search/SearchCard.tsx
Normal file
@@ -0,0 +1,207 @@
|
||||
"use client";
|
||||
|
||||
import { ExamplePills } from "./ExamplePills";
|
||||
|
||||
interface SearchCardProps {
|
||||
query: string;
|
||||
region: string;
|
||||
count: number;
|
||||
loading: boolean;
|
||||
onChange: (field: "query" | "region" | "count", value: string | number) => void;
|
||||
onSubmit: () => void;
|
||||
}
|
||||
|
||||
export function SearchCard({ query, region, count, loading, onChange, onSubmit }: SearchCardProps) {
|
||||
const canSubmit = query.trim().length > 0 && !loading;
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
background: "#111118",
|
||||
border: "1px solid #1e1e2e",
|
||||
borderRadius: 12,
|
||||
padding: 24,
|
||||
opacity: loading ? 0.55 : 1,
|
||||
pointerEvents: loading ? "none" : "auto",
|
||||
transition: "opacity 0.2s",
|
||||
}}
|
||||
>
|
||||
{/* 3-column grid */}
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "1fr 1fr 120px",
|
||||
gap: 12,
|
||||
marginBottom: 16,
|
||||
}}
|
||||
>
|
||||
{/* Suchbegriff */}
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
display: "block",
|
||||
fontSize: 11,
|
||||
fontWeight: 500,
|
||||
color: "#6b7280",
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "0.05em",
|
||||
marginBottom: 6,
|
||||
}}
|
||||
>
|
||||
Suchbegriff
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={query}
|
||||
onChange={(e) => onChange("query", e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === "Enter" && canSubmit) onSubmit(); }}
|
||||
placeholder="z.B. Dachdecker, Solaranlage, Steuerberater…"
|
||||
style={{
|
||||
width: "100%",
|
||||
background: "#0d0d18",
|
||||
border: "1px solid #1e1e2e",
|
||||
borderRadius: 8,
|
||||
padding: "9px 12px",
|
||||
fontSize: 14,
|
||||
color: "#ffffff",
|
||||
outline: "none",
|
||||
boxSizing: "border-box",
|
||||
transition: "border-color 0.15s",
|
||||
}}
|
||||
onFocus={(e) => { e.currentTarget.style.borderColor = "#3b82f6"; }}
|
||||
onBlur={(e) => { e.currentTarget.style.borderColor = "#1e1e2e"; }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Region */}
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
display: "block",
|
||||
fontSize: 11,
|
||||
fontWeight: 500,
|
||||
color: "#6b7280",
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "0.05em",
|
||||
marginBottom: 6,
|
||||
}}
|
||||
>
|
||||
Region
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={region}
|
||||
onChange={(e) => onChange("region", e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === "Enter" && canSubmit) onSubmit(); }}
|
||||
placeholder="z.B. Bayern, München, Deutschland"
|
||||
style={{
|
||||
width: "100%",
|
||||
background: "#0d0d18",
|
||||
border: "1px solid #1e1e2e",
|
||||
borderRadius: 8,
|
||||
padding: "9px 12px",
|
||||
fontSize: 14,
|
||||
color: "#ffffff",
|
||||
outline: "none",
|
||||
boxSizing: "border-box",
|
||||
transition: "border-color 0.15s",
|
||||
}}
|
||||
onFocus={(e) => { e.currentTarget.style.borderColor = "#3b82f6"; }}
|
||||
onBlur={(e) => { e.currentTarget.style.borderColor = "#1e1e2e"; }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Anzahl */}
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
display: "block",
|
||||
fontSize: 11,
|
||||
fontWeight: 500,
|
||||
color: "#6b7280",
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "0.05em",
|
||||
marginBottom: 6,
|
||||
}}
|
||||
>
|
||||
Anzahl
|
||||
</label>
|
||||
<select
|
||||
value={count}
|
||||
onChange={(e) => onChange("count", Number(e.target.value))}
|
||||
style={{
|
||||
width: "100%",
|
||||
background: "#0d0d18",
|
||||
border: "1px solid #1e1e2e",
|
||||
borderRadius: 8,
|
||||
padding: "9px 12px",
|
||||
fontSize: 14,
|
||||
color: "#ffffff",
|
||||
outline: "none",
|
||||
cursor: "pointer",
|
||||
boxSizing: "border-box",
|
||||
}}
|
||||
>
|
||||
<option value={25}>25 Leads</option>
|
||||
<option value={50}>50 Leads</option>
|
||||
<option value={100}>100 Leads</option>
|
||||
<option value={200}>200 Leads</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submit button */}
|
||||
<button
|
||||
onClick={onSubmit}
|
||||
disabled={!canSubmit}
|
||||
style={{
|
||||
width: "100%",
|
||||
background: canSubmit ? "linear-gradient(135deg, #3b82f6, #8b5cf6)" : "#1e1e2e",
|
||||
color: canSubmit ? "#ffffff" : "#6b7280",
|
||||
border: "none",
|
||||
borderRadius: 10,
|
||||
padding: "12px 16px",
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
cursor: canSubmit ? "pointer" : "not-allowed",
|
||||
opacity: canSubmit ? 1 : 0.5,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: 8,
|
||||
marginBottom: 20,
|
||||
transition: "opacity 0.15s",
|
||||
}}
|
||||
>
|
||||
{/* Magnifying glass icon */}
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none">
|
||||
<circle cx="6.5" cy="6.5" r="4.5" stroke="currentColor" strokeWidth="1.5" />
|
||||
<line x1="10.5" y1="10.5" x2="13.5" y2="13.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
|
||||
</svg>
|
||||
Leads suchen
|
||||
</button>
|
||||
|
||||
{/* Divider */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 12,
|
||||
marginBottom: 16,
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, height: 1, background: "#1e1e2e" }} />
|
||||
<span style={{ fontSize: 12, color: "#6b7280", flexShrink: 0 }}>Beispielsuche</span>
|
||||
<div style={{ flex: 1, height: 1, background: "#1e1e2e" }} />
|
||||
</div>
|
||||
|
||||
{/* Example pills */}
|
||||
<ExamplePills
|
||||
onSelect={(q, r) => {
|
||||
onChange("query", q);
|
||||
onChange("region", r);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user