Merge pull request #187 from storybookjs/charles/sb-1525-500-error-in…

…-addon-tags

Improve error state on addon tags

apps/addon-catalog/app/(home)/tag/[...name]/not-found.tsx

@@ -0,0 +1,13 @@
+import Link from 'next/link';
+
+export default function NotFound() {
+  return (
+    <div>
+      <h2 className="mb-8 text-2xl font-bold">Not Found</h2>
+      <p className="mb-8">We could not found any information for this tag.</p>
+      <Link href="/" className="text-blue-500">
+        Return to the list of addons
+      </Link>
+    </div>
+  );
+}

apps/addon-catalog/app/(home)/tag/[...name]/page.tsx

@@ -0,0 +1,43 @@
+import { Preview } from '../../../../components/preview';
+import { fetchTagDetailsData } from '../../../../lib/fetch-tag-details-data';
+import { notFound } from 'next/navigation';
+
+interface TagDetailsProps {
+  params: {
+    name: string;
+  };
+}
+
+// export async function generateStaticParams() {
+//   const categories = (await fetchTagsData({ isCategory: true })) || [];
+//   const tags = (await fetchTagsData()) || [];
+//   return [...categories, ...tags].map((name) => ({
+//     params: { name },
+//   }));
+// }
+
+export default async function TagDetails({
+  params: { name },
+}: TagDetailsProps) {
+  const data = (await fetchTagDetailsData(name)) || {};
+
+  if ('error' in data) return notFound();
+
+  return (
+    <>
+      <h3 className="mb-8 text-2xl font-bold">
+        {data.displayName} integrations
+      </h3>
+      <div className="flex flex-col gap-6">
+        {data.topIntegrations?.addons?.map((addon) => (
+          <Preview
+            key={addon.name}
+            element={addon}
+            orientation="horizontal"
+            type="addon"
+          />
+        ))}
+      </div>
+    </>
+  );
+}