feat: update tag count display

Author: SidonieBouthors

app/share/page.tsx

@@ -37,9 +37,7 @@ export default function Share() {
       <h1>Share</h1>
       <div className="tag-bar">
         {sortedTags.map((tagItem, index) => (
-          <Tag tag={tagItem.tag} key={index}>
-            {`${tagItem.tag} (${tagItem.frequency.toString()})`}
-          </Tag>
+          <Tag tag={tagItem.tag} tagCount={tagItem.frequency} key={index} />
         ))}
       </div>
       <TagFilteredList>

components/Tag.tsx

@@ -5,15 +5,15 @@ import { Suspense } from "react";
 
 interface TagProps {
   tag: string;
+  tagCount: number;
   disabled?: boolean;
-  children?: string;
 }
 
 /**
  * A tag component that can be used to filter content by tag.
  * If no children are provided, the tag string will be displayed.
  */
-function SuspenseTag({ tag, disabled, children }: TagProps) {
+function SuspenseTag({ tag, tagCount, disabled }: TagProps) {
   const searchParams = useSearchParams();
   const pathname = usePathname();
   const { replace } = useRouter();
@@ -53,17 +53,21 @@ function SuspenseTag({ tag, disabled, children }: TagProps) {
         disabled ? "" : "enabled-tag"
       }`}
     >
-      {children || tag}
+      <span>{tag}</span>
+      {tagCount > 1 ? (
+        <>
+          <span className="median-dot">·</span>
+          <span className="tag-count">{tagCount}</span>
+        </>
+      ) : null}
     </button>
   );
 }
 
-export default function Tag({ tag, disabled, children }: TagProps) {
+export default function Tag({ tag, tagCount, disabled }: TagProps) {
   return (
     <Suspense>
-      <SuspenseTag tag={tag} disabled={disabled}>
-        {children}
-      </SuspenseTag>
+      <SuspenseTag tag={tag} tagCount={tagCount} disabled={disabled} />
     </Suspense>
   );
 }

styles/components/_tag.scss

@@ -21,13 +21,23 @@
 .tag {
   font-family: $font-bold;
   font-size: 0.8rem;
-  display: inline-block;
   padding: 0.15em 0.6em;
   border: 1.6px solid transparent;
   border-radius: 0.7em;
   background-color: var(--collapsible-bg);
   color: inherit;
 
+  display: flex;
+  gap: 0.4rem;
+  align-items: baseline;
+
+  .tag-count,
+  .median-dot {
+    font-size: 0.7rem;
+    font-family: $font-medium;
+    color: var(--secondary-text-color);
+  }
+
   &.enabled-tag {
     cursor: pointer;