52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
"use client"
|
|
|
|
import { ArrowRightIcon, CircleHelpIcon } from "lucide-react"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
import { useI18n } from "@/i18n/provider"
|
|
|
|
export type PromptStartersProps = {
|
|
items?: string[] | null
|
|
onSelect?: (text: string) => void
|
|
disabled?: boolean
|
|
className?: string
|
|
}
|
|
|
|
export function PromptStarters({
|
|
items,
|
|
onSelect,
|
|
disabled = false,
|
|
className,
|
|
}: PromptStartersProps) {
|
|
const t = useI18n()
|
|
const safeItems = Array.isArray(items)
|
|
? items.map((item) => item.trim()).filter(Boolean)
|
|
: []
|
|
|
|
if (safeItems.length === 0) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div
|
|
role="group"
|
|
aria-label={t("promptStarters.title")}
|
|
className={cn("flex w-full max-w-md flex-col gap-2", className)}
|
|
>
|
|
{safeItems.map((item, index) => (
|
|
<button
|
|
key={`${index}-${item}`}
|
|
type="button"
|
|
disabled={disabled}
|
|
onClick={() => onSelect?.(item)}
|
|
className="group flex w-full items-center gap-2.5 rounded-lg border border-border/80 bg-card/80 px-3.5 py-2.5 text-left text-sm text-card-foreground shadow-xs transition-all hover:border-primary/40 hover:bg-accent/60 hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.99] disabled:pointer-events-none disabled:opacity-50 dark:bg-card/50"
|
|
>
|
|
<CircleHelpIcon className="size-4 shrink-0 text-muted-foreground transition-colors group-hover:text-primary" />
|
|
<span className="flex-1 font-normal leading-snug break-words">{item}</span>
|
|
<ArrowRightIcon className="size-3.5 shrink-0 text-muted-foreground/60 opacity-0 transition-all group-hover:opacity-100 group-hover:translate-x-0.5" />
|
|
</button>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|