60073b97c9
- 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>
54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
interface ExamplePill {
|
|
label: string;
|
|
query: string;
|
|
region: string;
|
|
}
|
|
|
|
const EXAMPLES: ExamplePill[] = [
|
|
{ label: "☀️ Solaranlagen Bayern", query: "Solaranlagen", region: "Bayern" },
|
|
{ label: "🔧 Dachdecker NRW", query: "Dachdecker", region: "NRW" },
|
|
{ label: "📊 Steuerberater Berlin", query: "Steuerberater", region: "Berlin" },
|
|
{ label: "🏗️ Bauunternehmen Süddeutschland", query: "Bauunternehmen", region: "Süddeutschland" },
|
|
{ label: "🌿 Landschaftsgärtner Hamburg", query: "Landschaftsgärtner", region: "Hamburg" },
|
|
{ label: "🔌 Elektroinstallateur München", query: "Elektroinstallateur", region: "München" },
|
|
];
|
|
|
|
interface ExamplePillsProps {
|
|
onSelect: (query: string, region: string) => void;
|
|
}
|
|
|
|
export function ExamplePills({ onSelect }: ExamplePillsProps) {
|
|
return (
|
|
<div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
|
|
{EXAMPLES.map((ex) => (
|
|
<button
|
|
key={ex.label}
|
|
onClick={() => onSelect(ex.query, ex.region)}
|
|
style={{
|
|
padding: "5px 12px",
|
|
border: "1px solid #2e2e3e",
|
|
borderRadius: 20,
|
|
fontSize: 12,
|
|
color: "#9ca3af",
|
|
background: "transparent",
|
|
cursor: "pointer",
|
|
transition: "all 0.15s",
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
(e.currentTarget as HTMLButtonElement).style.borderColor = "#3b82f6";
|
|
(e.currentTarget as HTMLButtonElement).style.color = "#3b82f6";
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
(e.currentTarget as HTMLButtonElement).style.borderColor = "#2e2e3e";
|
|
(e.currentTarget as HTMLButtonElement).style.color = "#9ca3af";
|
|
}}
|
|
>
|
|
{ex.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|