Files
new-api/web/default/src/components/ai-elements/suggestion.tsx
T
t0ng7u 948780e3fa 🎨 fix(theme): align UI controls with global radius tokens
Remove hard-coded and capped border radius overrides so shared controls and feature actions consistently follow the active theme radius.

- Replace fixed radius utilities with semantic theme-aware radius tokens
- Remove redundant `rounded-full` and pixel-based overrides from header, toolbar, Playground, and utility actions
- Drop unused `StatusBadge` rounded prop usage
- Keep existing component behavior intact while improving global theme consistency
2026-05-08 01:50:03 +08:00

54 lines
1.2 KiB
TypeScript
Vendored

'use client'
import type { ComponentProps } from 'react'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
export type SuggestionsProps = ComponentProps<typeof ScrollArea>
export const Suggestions = ({
className,
children,
...props
}: SuggestionsProps) => (
<ScrollArea className='w-full overflow-x-auto whitespace-nowrap' {...props}>
<div className={cn('flex w-max flex-nowrap items-center gap-2', className)}>
{children}
</div>
<ScrollBar className='hidden' orientation='horizontal' />
</ScrollArea>
)
export type SuggestionProps = Omit<ComponentProps<typeof Button>, 'onClick'> & {
suggestion: string
onClick?: (suggestion: string) => void
}
export const Suggestion = ({
suggestion,
onClick,
className,
variant = 'outline',
size = 'sm',
children,
...props
}: SuggestionProps) => {
const handleClick = () => {
onClick?.(suggestion)
}
return (
<Button
className={cn('cursor-pointer px-4', className)}
onClick={handleClick}
size={size}
type='button'
variant={variant}
{...props}
>
{children || suggestion}
</Button>
)
}