Spaces:
Sleeping
Sleeping
File size: 2,161 Bytes
1ed65e9 1928d7f 1ed65e9 1928d7f 1ed65e9 1928d7f 1ed65e9 | 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 61 62 63 64 65 66 | "use client";
import { useState } from "react";
import { Lightbulb, ChevronDown, ChevronUp } from "lucide-react";
import { quickQuestions } from "@/lib/utils";
import { cn } from "@/lib/utils";
interface QuickQuestionsProps {
onSelect: (question: string) => void;
disabled?: boolean;
}
export function QuickQuestions({ onSelect, disabled }: QuickQuestionsProps) {
const [collapsed, setCollapsed] = useState(false);
return (
<div className="flex flex-col bg-white rounded-2xl border border-neutral-100 shadow-sm overflow-hidden">
{/* Header — always visible */}
<button
type="button"
onClick={() => setCollapsed((v) => !v)}
className={cn(
"flex items-center justify-between px-3 py-2 transition-colors",
collapsed
? "bg-neutral-50 hover:bg-neutral-100"
: "bg-brand-green-50 hover:bg-brand-green-100"
)}
>
<div className="flex items-center gap-1.5">
<Lightbulb className="h-3 w-3 text-brand-green" />
<span className="text-[10px] font-semibold text-neutral-500 uppercase tracking-wider">
Pertanyaan Populer
</span>
</div>
{collapsed ? (
<ChevronDown className="h-3.5 w-3.5 text-neutral-400" />
) : (
<ChevronUp className="h-3.5 w-3.5 text-neutral-400" />
)}
</button>
{/* Collapsible body */}
{!collapsed && (
<div className="flex flex-wrap gap-2 px-3 pb-3">
{quickQuestions.map((q, i) => (
<button
key={i}
onClick={() => onSelect(q)}
disabled={disabled}
className={cn(
"text-xs text-left px-4 py-2 rounded-xl border border-neutral-200 bg-white text-neutral-700",
"hover:border-brand-green hover:text-brand-green hover:bg-brand-green-50",
"transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed",
"max-w-xs"
)}
title={q}
>
{q}
</button>
))}
</div>
)}
</div>
);
}
|