50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
import React from 'react'
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { searchGroups, type SearchGroup } from '@/lib/utils'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface SearchGroupsProps {
|
|
selectedGroup: string
|
|
onGroupSelect: (group: SearchGroup) => void
|
|
}
|
|
|
|
export function SearchGroups({ selectedGroup, onGroupSelect }: SearchGroupsProps) {
|
|
return (
|
|
<div className="w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
|
|
{searchGroups.map((group) => {
|
|
const Icon = group.icon
|
|
const isSelected = selectedGroup === group.id
|
|
|
|
return (
|
|
<Card
|
|
key={group.id}
|
|
className={cn(
|
|
"cursor-pointer transition-all duration-200 hover:scale-[1.02]",
|
|
"border border-neutral-200 dark:border-neutral-800",
|
|
isSelected && "ring-2 ring-primary ring-offset-2 dark:ring-offset-neutral-950"
|
|
)}
|
|
onClick={() => onGroupSelect(group)}
|
|
>
|
|
<CardHeader>
|
|
<div className="flex items-start gap-4">
|
|
<div className={cn(
|
|
"p-2 rounded-lg",
|
|
isSelected ? "bg-primary text-primary-foreground" : "bg-neutral-100 dark:bg-neutral-800"
|
|
)}>
|
|
<Icon className="w-6 h-6" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<CardTitle className="text-lg">{group.name}</CardTitle>
|
|
<CardDescription className="mt-1">
|
|
{group.description}
|
|
</CardDescription>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
</Card>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
} |