From 4993cafe625b1ad5e83ef30ba82727fb4554c92c Mon Sep 17 00:00:00 2001
From: Jeevika R <jeevikar14@gmail.com>
Date: Fri, 12 Dec 2025 22:03:30 +0530
Subject: [PATCH] fix: restore Showcase search by component name and fix result
 links

---
 apps/addon-catalog/components/preview.tsx | 20 ++++++++++++++++++--
 apps/frontpage/app/showcase/page.tsx      | 12 ++++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 apps/frontpage/app/showcase/page.tsx

diff --git a/apps/addon-catalog/components/preview.tsx b/apps/addon-catalog/components/preview.tsx
index bdebec97..0631f558 100644
--- a/apps/addon-catalog/components/preview.tsx
+++ b/apps/addon-catalog/components/preview.tsx
@@ -14,11 +14,27 @@ interface PreviewProps {
 
 export const Preview = ({ element, orientation, type }: PreviewProps) => {
   const isRecipe = type === 'recipe';
-  const Comp = isRecipe ? 'a' : Link;
+  // Determine if the link should be local or external
+  let href = '';
+  let isExternal = false;
+  if (isRecipe) {
+    href = `/recipes/${element.name ?? ''}`;
+  } else {
+    // For addons, check if the name starts with '@' (scoped package) or contains a slash
+    // If so, assume it's not handled locally and link to the external Storybook site
+    if (element.name && (element.name.startsWith('@') || element.name.includes('/'))) {
+      href = `https://storybook.js.org/addons/${element.name}`;
+      isExternal = true;
+    } else {
+      href = `/${element.name ?? ''}`;
+    }
+  }
+  const Comp = isExternal ? 'a' : Link;
 
   return (
     <Comp
-      href={`${isRecipe ? '/recipes' : ''}/${element.name ?? ''}`}
+      href={href}
+      {...(isExternal ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
       className={cn(
         'flex justify-between rounded border border-zinc-300 p-6 transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:border-blue-500 dark:border-slate-800 dark:hover:border-blue-500',
         orientation === 'horizontal'
diff --git a/apps/frontpage/app/showcase/page.tsx b/apps/frontpage/app/showcase/page.tsx
new file mode 100644
index 00000000..07aa9f0e
--- /dev/null
+++ b/apps/frontpage/app/showcase/page.tsx
@@ -0,0 +1,12 @@
+import dynamic from 'next/dynamic';
+
+// Dynamically import HomeWrapper from addon-catalog for SSR compatibility
+const HomeWrapper = dynamic(
+  () => import('../../../addon-catalog/components/home-wrapper').then(mod => mod.HomeWrapper),
+  { ssr: false }
+);
+
+export default function ShowcasePage() {
+  // The HomeWrapper will handle search and display logic
+  return <HomeWrapper />;
+}