232 lines
11 KiB
TypeScript
232 lines
11 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import {
|
|
CommandDialog,
|
|
CommandEmpty,
|
|
CommandGroup,
|
|
CommandInput,
|
|
CommandItem,
|
|
CommandList,
|
|
CommandSeparator,
|
|
} from "@/components/ui/command"
|
|
import {
|
|
Search, Music, MapPin, Calendar, Users, Globe,
|
|
LayoutDashboard, Library, Star, History, ArrowRight
|
|
} from "lucide-react"
|
|
import { useRouter } from "next/navigation"
|
|
import { getApiUrl } from "@/lib/api-config"
|
|
import { Badge } from "@/components/ui/badge"
|
|
|
|
export function SearchDialog() {
|
|
const [open, setOpen] = React.useState(false)
|
|
const [query, setQuery] = React.useState("")
|
|
const [loading, setLoading] = React.useState(false)
|
|
const [results, setResults] = React.useState<any>({
|
|
songs: [],
|
|
venues: [],
|
|
tours: [],
|
|
groups: [],
|
|
verticals: [],
|
|
users: [],
|
|
nicknames: [],
|
|
performances: [],
|
|
})
|
|
const router = useRouter()
|
|
|
|
React.useEffect(() => {
|
|
const down = (e: KeyboardEvent) => {
|
|
if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
|
|
e.preventDefault()
|
|
setOpen((open) => !open)
|
|
}
|
|
}
|
|
|
|
document.addEventListener("keydown", down)
|
|
return () => document.removeEventListener("keydown", down)
|
|
}, [])
|
|
|
|
React.useEffect(() => {
|
|
if (query.length < 2) {
|
|
setResults({ songs: [], venues: [], tours: [], groups: [], users: [], nicknames: [], performances: [] })
|
|
return
|
|
}
|
|
|
|
setLoading(true)
|
|
const timer = setTimeout(() => {
|
|
fetch(`${getApiUrl()}/search/?q=${query}`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
setResults(data)
|
|
setLoading(false)
|
|
})
|
|
.catch(err => {
|
|
console.error(err)
|
|
setLoading(false)
|
|
})
|
|
}, 300)
|
|
|
|
return () => clearTimeout(timer)
|
|
}, [query])
|
|
|
|
const handleSelect = (url: string) => {
|
|
setOpen(false)
|
|
router.push(url)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
onClick={() => setOpen(true)}
|
|
className="inline-flex items-center rounded-lg font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background/50 shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 relative w-full justify-start text-sm text-muted-foreground sm:pr-12 md:w-40 lg:w-64"
|
|
>
|
|
<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
|
|
<span className="hidden lg:inline-flex">Search Elmeg...</span>
|
|
<span className="inline-flex lg:hidden">Search...</span>
|
|
<kbd className="pointer-events-none absolute right-1.5 top-1.5 hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
|
|
<span className="text-xs">⌘</span>K
|
|
</kbd>
|
|
</button>
|
|
<CommandDialog open={open} onOpenChange={setOpen} commandProps={{ shouldFilter: false }}>
|
|
<CommandInput
|
|
placeholder="Type to search songs, venues, tours..."
|
|
value={query}
|
|
onValueChange={setQuery}
|
|
/>
|
|
<CommandList className="max-h-[500px]">
|
|
<CommandEmpty>
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-6 text-sm text-muted-foreground">
|
|
Searching...
|
|
</div>
|
|
) : (
|
|
query.length >= 2 ? "No results found." : "Type at least 2 characters..."
|
|
)}
|
|
</CommandEmpty>
|
|
|
|
{query.length < 2 && (
|
|
<CommandGroup heading="Quick Navigation">
|
|
<CommandItem onSelect={() => handleSelect("/shows")}>
|
|
<Calendar className="mr-2 h-4 w-4" />
|
|
<span>Browse Shows</span>
|
|
</CommandItem>
|
|
<CommandItem onSelect={() => handleSelect("/leaderboards")}>
|
|
<Star className="mr-2 h-4 w-4" />
|
|
<span>Leaderboards</span>
|
|
</CommandItem>
|
|
<CommandItem onSelect={() => handleSelect("/songs")}>
|
|
<Music className="mr-2 h-4 w-4" />
|
|
<span>Song Catalog</span>
|
|
</CommandItem>
|
|
<CommandItem onSelect={() => handleSelect("/venues")}>
|
|
<MapPin className="mr-2 h-4 w-4" />
|
|
<span>Venues</span>
|
|
</CommandItem>
|
|
</CommandGroup>
|
|
)}
|
|
|
|
{results.songs?.length > 0 && (
|
|
{
|
|
results.verticals?.length > 0 && (
|
|
<CommandGroup heading="Bands">
|
|
{results.verticals.map((vertical: any) => (
|
|
<CommandItem key={vertical.slug} onSelect={() => handleSelect(`/${vertical.slug}`)}>
|
|
<Music className="mr-2 h-4 w-4" />
|
|
<span>{vertical.name}</span>
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
)
|
|
}
|
|
|
|
{results.songs?.length > 0 && (
|
|
<CommandGroup heading="Songs">
|
|
{results.songs.map((song: any) => (
|
|
<CommandItem key={song.slug || song.id} onSelect={() => handleSelect(`/songs/${song.slug}`)}>
|
|
<Music className="mr-2 h-4 w-4" />
|
|
<div className="flex flex-col">
|
|
<span>{song.title}</span>
|
|
{song.original_artist && (
|
|
<span className="text-[10px] text-muted-foreground">Original by {song.original_artist}</span>
|
|
)}
|
|
</div>
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
)}
|
|
|
|
{results.venues?.length > 0 && (
|
|
<CommandGroup heading="Venues">
|
|
{results.venues.map((venue: any) => (
|
|
<CommandItem key={venue.slug || venue.id} onSelect={() => handleSelect(`/venues/${venue.slug}`)}>
|
|
<MapPin className="mr-2 h-4 w-4" />
|
|
<div className="flex flex-col">
|
|
<span>{venue.name}</span>
|
|
<span className="text-[10px] text-muted-foreground">
|
|
{venue.city}, {venue.state}
|
|
</span>
|
|
</div>
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
)}
|
|
|
|
{results.tours?.length > 0 && (
|
|
<CommandGroup heading="Tours">
|
|
{results.tours.map((tour: any) => (
|
|
<CommandItem key={tour.slug || tour.id} onSelect={() => handleSelect(`/tours/${tour.slug}`)}>
|
|
<Globe className="mr-2 h-4 w-4" />
|
|
<span>{tour.name}</span>
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
)}
|
|
|
|
{results.performances?.length > 0 && (
|
|
<CommandGroup heading="Performances & Notes">
|
|
{results.performances.map((perf: any) => (
|
|
<CommandItem key={perf.slug || perf.id} onSelect={() => handleSelect(`/shows/${perf.show?.slug}`)}>
|
|
<Music className="mr-2 h-4 w-4" />
|
|
<div className="flex flex-col">
|
|
<span>{perf.song?.title || "Unknown Song"}</span>
|
|
<span className="text-[10px] text-muted-foreground">
|
|
{perf.show?.date} • {perf.notes}
|
|
</span>
|
|
</div>
|
|
<Badge variant="outline" className="ml-auto text-[10px] h-5">Performance</Badge>
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
)}
|
|
|
|
{results.nicknames?.length > 0 && (
|
|
<CommandGroup heading="Heady Nicknames">
|
|
{results.nicknames.map((nickname: any) => (
|
|
<CommandItem key={nickname.id} onSelect={() => handleSelect(`/shows/${nickname.performance?.show?.slug}`)}>
|
|
<Star className="mr-2 h-4 w-4 text-yellow-500" />
|
|
<div className="flex flex-col">
|
|
<span>{nickname.nickname}</span>
|
|
<span className="text-[10px] text-muted-foreground">
|
|
({nickname.performance?.song?.title} - {nickname.performance?.show?.date})
|
|
</span>
|
|
</div>
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
)}
|
|
|
|
{results.users?.length > 0 && (
|
|
<CommandGroup heading="Users">
|
|
{results.users.map((user: any) => (
|
|
<CommandItem key={user.id} onSelect={() => handleSelect(`/profile/${user.id}`)}>
|
|
<Users className="mr-2 h-4 w-4" />
|
|
<span>{user.username || user.email.split('@')[0]}</span>
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
)}
|
|
</CommandList>
|
|
</CommandDialog>
|
|
</>
|
|
)
|
|
}
|