| "use client"; |
|
|
| import type { StudyIntent } from "@/lib/study-intents"; |
| import { cn } from "@/lib/utils"; |
| import { primaryChips } from "./constants"; |
|
|
| export function QuickActions({ |
| activeIntent, |
| disabled, |
| onAction, |
| layout = "auto", |
| }: { |
| activeIntent: StudyIntent; |
| disabled: boolean; |
| onAction: (intent: StudyIntent, prompt: string) => void; |
| layout?: "auto" | "scroll" | "grid"; |
| }) { |
| const useScroll = layout === "scroll"; |
| const useGrid = layout === "grid" || layout === "auto"; |
|
|
| return ( |
| <div |
| className={cn( |
| "kb-quick-actions", |
| useScroll ? "-mx-1 overflow-x-auto px-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" : "", |
| )} |
| > |
| <div |
| className={cn( |
| "gap-2", |
| useScroll ? "flex min-w-max" : "", |
| useGrid && !useScroll ? "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4" : "", |
| useGrid && useScroll ? "flex min-w-max sm:grid sm:min-w-0 sm:grid-cols-3" : "", |
| )} |
| > |
| {primaryChips.map((chip) => { |
| const Icon = chip.icon; |
| const active = chip.intent === activeIntent; |
| return ( |
| <button |
| key={chip.label} |
| type="button" |
| disabled={disabled} |
| onClick={() => onAction(chip.intent, chip.prompt)} |
| className={cn( |
| "group inline-flex min-h-[2.85rem] shrink-0 items-center justify-center gap-2 rounded-2xl border px-3 py-2 text-center text-xs font-semibold transition duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/24 disabled:cursor-not-allowed disabled:opacity-45 sm:min-h-[3.15rem]", |
| active |
| ? "border-white/[0.22] bg-white text-black shadow-[0_14px_34px_rgba(255,255,255,0.08)]" |
| : "border-white/[0.085] bg-white/[0.028] text-white/58 hover:border-white/[0.17] hover:bg-white/[0.05] hover:text-white", |
| )} |
| > |
| <Icon className="size-3.5 shrink-0" /> |
| <span className="min-w-0 leading-4">{chip.label}</span> |
| </button> |
| ); |
| })} |
| </div> |
| </div> |
| ); |
| } |
