refactor: tag + usages

core/app/[locale]/(default)/(faceted)/_components/refine-by.tsx

@@ -4,7 +4,7 @@ import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import { useTransition } from 'react';
 
-import { Tag, TagAction, TagContent } from '~/components/ui/tag';
+import { Tag } from '~/components/ui/tag';
 
 import type { Facet, PageType, PublicParamKeys } from '../types';
 
@@ -150,10 +150,10 @@ export const RefineBy = (props: Props) => {
       <ul className="mb-4 flex flex-row flex-wrap gap-2 py-2">
         {refinements.map((refinement) => (
           <li key={`${refinement.key}-${refinement.value}`}>
-            <Tag>
-              <TagContent>{refinement.display_name}</TagContent>
-              <TagAction onClick={() => removeRefinement(refinement)} />
-            </Tag>
+            <Tag
+              tagAction={() => removeRefinement(refinement)}
+              tagContent={refinement.display_name}
+            />
           </li>
         ))}
       </ul>

core/app/[locale]/(default)/blog/[blogId]/page.tsx

@@ -11,7 +11,7 @@ import {
   BlogPostImage,
   BlogPostTitle,
 } from '~/components/ui/blog-post-card';
-import { Tag, TagContent } from '~/components/ui/tag';
+import { Tag } from '~/components/ui/tag';
 import { LocaleType } from '~/i18n';
 
 import { SharingLinks } from './_components/sharing-links';
@@ -83,9 +83,7 @@ export default async function BlogPostPage({ params: { blogId, locale } }: Props
       <div className="mb-10 flex">
         {blogPost.tags.map((tag) => (
           <Link className="me-3 block cursor-pointer" href={`/blog/tag/${tag}`} key={tag}>
-            <Tag>
-              <TagContent>{tag}</TagContent>
-            </Tag>
+            <Tag tagContent={tag} />
           </Link>
         ))}
       </div>

core/components/ui/tag/tag.tsx

@@ -1,57 +1,34 @@
 import { X } from 'lucide-react';
-import { ComponentPropsWithRef, ElementRef, forwardRef } from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 
 import { cn } from '~/lib/utils';
 
-type TagProps = ComponentPropsWithRef<'div'>;
+interface Props extends ComponentPropsWithoutRef<'div'> {
+  tagContent: string;
+  tagAction?: () => void;
+}
 
-const Tag = forwardRef<ElementRef<'div'>, TagProps>(({ className, ...props }, ref) => {
+const Tag = ({ className, tagContent, tagAction, ...props }: Props) => {
   return (
     <div
       className={cn(
         'inline-flex h-[40px] flex-row items-center whitespace-nowrap bg-gray-100',
         className,
       )}
-      ref={ref}
       {...props}
-    />
+    >
+      <span className="pe-2 ps-4 font-semibold only:px-4">{tagContent}</span>
+      {tagAction && (
+        <button
+          className="box-content inline-flex h-8 w-8 items-center justify-center p-1 hover:bg-primary/10 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-inset focus-visible:ring-primary/20"
+          onClick={tagAction}
+          type="button"
+        >
+          <X className="h-4 w-4" />
+        </button>
+      )}
+    </div>
   );
-});
-
-Tag.displayName = 'Tag';
-
-type TagContentProps = ComponentPropsWithRef<'span'>;
-
-const TagContent = forwardRef<ElementRef<'span'>, TagContentProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <span className={cn('pe-2 ps-4 font-semibold only:px-4', className)} ref={ref} {...props} />
-    );
-  },
-);
-
-TagContent.displayName = 'TagContent';
-
-type TagActionProps = ComponentPropsWithRef<'button'>;
-
-const TagAction = forwardRef<ElementRef<'button'>, TagActionProps>(
-  ({ className, children, ...props }, ref) => {
-    return (
-      <button
-        className={cn(
-          'box-content inline-flex h-8 w-8 items-center justify-center p-1 hover:bg-primary/10 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-inset focus-visible:ring-primary/20',
-        )}
-        ref={ref}
-        type="button"
-        {...props}
-      >
-        {children || <X className="h-4 w-4" />}
-      </button>
-    );
-  },
-);
-
-TagAction.displayName = 'TagAction';
+};
 
-export { Tag, TagContent, TagAction };
-export type { TagProps, TagContentProps, TagActionProps };
+export { Tag };