3ebb63dc6c
Expand the calculator with a multi-step wizard flow, admin dashboard with quote tracking, login/auth system, distance API integration, and history page. Add new UI components (dialog, progress, select, slider, switch), update pricing logic, and improve the overall design with new assets. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
35 lines
951 B
TypeScript
35 lines
951 B
TypeScript
"use client"
|
|
|
|
import { Search, X } from "lucide-react"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Button } from "@/components/ui/button"
|
|
|
|
interface SearchFilterProps {
|
|
value: string
|
|
onChange: (value: string) => void
|
|
}
|
|
|
|
export function SearchFilter({ value, onChange }: SearchFilterProps) {
|
|
return (
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
type="text"
|
|
placeholder="Søg efter kunde, email eller postnummer..."
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
className="h-11 pl-10 pr-10"
|
|
/>
|
|
{value && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="absolute right-1 top-1/2 h-8 w-8 -translate-y-1/2 p-0"
|
|
onClick={() => onChange("")}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|