25 lines
790 B
TypeScript
25 lines
790 B
TypeScript
import { Link } from '@inertiajs/react';
|
|
import { route } from 'ziggy-js';
|
|
|
|
interface KeywordBadgeProps {
|
|
keyword: string;
|
|
size?: 'default' | 'lg';
|
|
className?: string;
|
|
}
|
|
|
|
const sizeClasses = {
|
|
default: 'px-2.5 py-0.5 text-xs',
|
|
lg: 'px-3 py-1 text-sm',
|
|
};
|
|
|
|
export function KeywordBadge({ keyword, size = 'default', className = '' }: KeywordBadgeProps) {
|
|
return (
|
|
<Link
|
|
href={route('memes.search', keyword.replace(/\s+/g, '+'))}
|
|
className={`inline-flex items-center rounded-full border border-transparent bg-secondary text-secondary-foreground font-semibold transition-colors hover:bg-purple-600 hover:text-white focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 ${sizeClasses[size]} ${className}`}
|
|
>
|
|
{keyword}
|
|
</Link>
|
|
);
|
|
}
|