Update

resources/js/components/ui/keyword-badge.tsx

@@ -0,0 +1,24 @@
+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>
+  );
+}