65 lines
No EOL
2.8 KiB
TypeScript
65 lines
No EOL
2.8 KiB
TypeScript
"use client"
|
|
import { Button } from '@/components/ui/button'
|
|
import {Dialog, DialogContent, DialogTrigger,} from "@/components/ui/dialog"
|
|
import { FiCommand } from "react-icons/fi";
|
|
import React, { useState } from 'react'
|
|
import { Command, CommandInput } from '@/components/ui/command';
|
|
import { useGlobalContext, useGlobalContextUpdate } from '@/app/context/globalContext';
|
|
|
|
const Search = () => {
|
|
const {geoList, inputValue, handleInput} = useGlobalContext();
|
|
const {setActiveCity} = useGlobalContextUpdate();
|
|
const [hoverIndex, setHoverIndex] = useState<number>(0);
|
|
|
|
const getClickedCoords = (lat: number, lon: number) => {
|
|
setActiveCity([lat, lon]);
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
<div className=''>
|
|
<Dialog>
|
|
<DialogTrigger asChild>
|
|
<Button variant="outline" className='border inline-flex items-center justify-center text-center gap-10 hover:border-textColor2'>
|
|
<p className='text-sm text-muted-foreground'>Search here...</p>
|
|
<div className='flex items-center gap-1 border border-1 p-1 rounded-lg hover:border-textColor2'><FiCommand/>
|
|
<span className='text-[10px]'>F</span>
|
|
</div>
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className='p-0'>
|
|
<Command className='rounded-lg border shadow-md'>
|
|
<CommandInput value={inputValue} onChangeCapture={handleInput} placeholder='Search...' />
|
|
<ul className='px-3 pb-2'>
|
|
<p className='p-2 text-muted-foreground text-sm'>Suggestion</p>
|
|
{geoList?.length === 0 || (!geoList && <p>No Results</p>)}
|
|
{geoList && geoList.map((
|
|
item: {
|
|
name: string;
|
|
country: string;
|
|
state: string;
|
|
lat: number;
|
|
lon: number;
|
|
},
|
|
index: number,
|
|
|
|
) => {
|
|
const {country, state, name} = item;
|
|
return (<li key={index} onMouseEnter={() => setHoverIndex(index)} className={`py-2 px-2 text-sm rounded-md cursor-pointer
|
|
${hoverIndex === index ? "bg-accent" : ""}
|
|
`} onClick={() => {
|
|
getClickedCoords(item.lat, item.lon);
|
|
}}>
|
|
<p>{name}, {state} {country}</p>
|
|
</li>);
|
|
})}
|
|
</ul>
|
|
</Command>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Search |