import { BadgePercent, ChevronDown, Globe, Pencil, ScanEye, SwatchBook, } from 'lucide-react'; import { cn } from '@/lib/utils'; import { Popover, Transition } from '@headlessui/react'; import { SiReddit, SiYoutube } from '@icons-pack/react-simple-icons'; import { Fragment } from 'react'; const focusModes = [ { key: 'webSearch', title: 'All', description: 'Searches across all of the internet', icon: , }, { key: 'academicSearch', title: 'Academic', description: 'Search in published academic papers', icon: , }, { key: 'writingAssistant', title: 'Writing', description: 'Chat without searching the web', icon: , }, { key: 'wolframAlphaSearch', title: 'Wolfram Alpha', description: 'Computational knowledge engine', icon: , }, { key: 'youtubeSearch', title: 'Youtube', description: 'Search and watch videos', icon: ( ), }, { key: 'redditSearch', title: 'Reddit', description: 'Search for discussions and opinions', icon: ( ), }, ]; const Focus = ({ focusMode, setFocusMode, }: { focusMode: string; setFocusMode: (mode: string) => void; }) => { return ( {focusMode !== 'webSearch' ? (
{focusModes.find((mode) => mode.key === focusMode)?.icon}

{focusModes.find((mode) => mode.key === focusMode)?.title}

) : ( )}
{focusModes.map((mode, i) => ( setFocusMode(mode.key)} key={i} className={cn( 'p-2 rounded-lg flex flex-col items-start justify-start text-start space-y-2 duration-200 cursor-pointer transition', focusMode === mode.key ? 'bg-light-secondary dark:bg-dark-secondary' : 'hover:bg-light-secondary dark:hover:bg-dark-secondary', )} >
{mode.icon}

{mode.title}

{mode.description}

))}
); }; export default Focus;