Fix rendered tag links

storybookjs · Jul 16, 2024 · ed0f3ff · ed0f3ff
1 parent ae8a834
commit ed0f3ff
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 9 deletions.
diff --git a/apps/addon-catalog/components/addon/addon-sidebar.tsx b/apps/addon-catalog/components/addon/addon-sidebar.tsx
@@ -6,7 +6,9 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { useState } from 'react';
 
-export function AddonSidebar({ addon }: { addon: Addon }) {
+
+
+export function AddonSidebar({ addon }: { addon: AddonWithTagLinks }) {
   const [moreAuthorsVisible, setMoreAuthorsVisible] = useState(false);
   const authors = addon?.authors || [];
   const listOfAuthors = moreAuthorsVisible ? authors : authors.slice(0, 6);
@@ -68,9 +70,9 @@ export function AddonSidebar({ addon }: { addon: Addon }) {
             Tags
           </div>
           <ul className="mb-6 flex flex-wrap gap-2">
-            {tags.map((tag) => (
+            {tags.map(({ link, name }) => (
               <Pill>
-                <Link href={`/tag/${tag.name.toLowerCase()}`}>{tag.name}</Link>
+                <Link href={link}>{name}</Link>
               </Pill>
             ))}
           </ul>

diff --git a/apps/addon-catalog/components/tag-list.tsx b/apps/addon-catalog/components/tag-list.tsx
@@ -4,13 +4,8 @@ import React, { useState } from 'react';
 import Link from 'next/link';
 import { Pill } from '@repo/ui';
 
-interface TagProps {
-  name: string;
-  link: string;
-}
-
 interface TagListProps {
-  tagLinks: TagProps[];
+  tagLinks: TagLinkType[];
 }
 
 export const TagList = ({ tagLinks }: TagListProps) => {

diff --git a/apps/addon-catalog/types.ts b/apps/addon-catalog/types.ts
@@ -26,6 +26,8 @@ interface Addon {
   yearlyDownloads?: number | null;
 }
 
+interface AddonWithTagLinks extends Omit<Addon, 'tags'> { tags: TagLinkType[] }
+
 interface Framework extends Pick<Tag, 'displayName' | 'icon' | 'name'> {}
 
 interface Recipe {