1  'use client'
 2  
 3  import { useState } from 'react'
 4  import { Search } from 'lucide-react'
 5  import { Input } from "@/components/ui/input"
 6  
 7  export function SearchBar() {
 8    const [query, setQuery] = useState('')
 9  
10    const handleSearch = (e: React.FormEvent) => {
11      e.preventDefault()
12      // Here you would typically send this query to your backend or update the UI
13      console.log('Searching for:', query)
14    }
15  
16    return (
17      <form onSubmit={handleSearch} className="relative">
18        <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-400" />
19        <Input
20          type="search"
21          placeholder="Search Distcom"
22          value={query}
23          onChange={(e) => setQuery(e.target.value)}
24          className="pl-10 w-full"
25        />
26      </form>
27    )
28  }
29