wehub-resource-sync
47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
"use client"
|
|
|
|
import { Search, Sparkles } from "lucide-react"
|
|
import { motion } from "framer-motion"
|
|
|
|
export type QueryMode = "search" | "ask"
|
|
|
|
interface ModeToggleProps {
|
|
mode: QueryMode
|
|
onChange: (mode: QueryMode) => void
|
|
}
|
|
|
|
const MODES: { value: QueryMode; label: string; icon: typeof Search; hint: string }[] = [
|
|
{ value: "search", label: "Search", icon: Search, hint: "Browse matching tiles" },
|
|
{ value: "ask", label: "Ask", icon: Sparkles, hint: "Get a synthesized answer" },
|
|
]
|
|
|
|
export function ModeToggle({ mode, onChange }: ModeToggleProps) {
|
|
return (
|
|
<div className="inline-flex items-center gap-1 rounded-full border border-border bg-card/60 p-1 backdrop-blur-sm">
|
|
{MODES.map(({ value, label, icon: Icon }) => {
|
|
const active = mode === value
|
|
return (
|
|
<button
|
|
key={value}
|
|
type="button"
|
|
onClick={() => onChange(value)}
|
|
className={`relative flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-[13px] font-medium transition-colors ${
|
|
active ? "text-primary-foreground" : "text-muted-foreground hover:text-foreground"
|
|
}`}
|
|
>
|
|
{active && (
|
|
<motion.span
|
|
layoutId="mode-pill"
|
|
className="absolute inset-0 rounded-full bg-primary"
|
|
transition={{ type: "spring", stiffness: 400, damping: 32 }}
|
|
/>
|
|
)}
|
|
<Icon className="relative z-10 h-3.5 w-3.5" />
|
|
<span className="relative z-10">{label}</span>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|