File size: 2,157 Bytes
65d68f5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | "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>
);
} |