overview tab

usecannon · Nov 1, 2024 · fe89587 · fe89587
1 parent c1e5653
commit fe89587
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 28 deletions.
diff --git a/packages/website/src/features/Packages/CannonfileExplorer.tsx b/packages/website/src/features/Packages/CannonfileExplorer.tsx
@@ -152,7 +152,7 @@ export const CannonfileExplorer: FC<{ pkg: ApiPackage }> = ({ pkg }) => {
               </div>
 
               <div
-                className={`container mx-auto max-w-4xl py-14 ${
+                className={`container mx-auto max-w-5xl py-14 ${
                   displayMode === 2 ? 'block' : 'hidden'
                 }`}
               >

diff --git a/packages/website/src/pages/packages/[name]/[tag]/[variant]/_layout.tsx b/packages/website/src/pages/packages/[name]/[tag]/[variant]/_layout.tsx
@@ -20,7 +20,6 @@ import { useQueryIpfsDataParsed } from '@/hooks/ipfs';
 import { DeploymentInfo } from '@usecannon/builder';
 
 import PageLoading from '@/components/PageLoading';
-import PackageAccordionHelper from '@/features/Packages/PackageAccordionHelper';
 import { usePackageNameTagVariantUrlParams } from '@/hooks/routing/usePackageNameTagVariantUrlParams';
 import { usePackageByRef } from '@/hooks/api/usePackage';
 
@@ -88,19 +87,20 @@ function TagVariantLayout({ children }: { children: ReactNode }) {
                 </div>
               </div>
 
-              <PackageAccordionHelper
-                name={name}
-                tag={tag}
-                chainId={chainId}
-                preset={preset}
-              />
-
-              {/* Package Tabs */}
               <div className="flex gap-8 items-center max-w-full overflow-x-auto overflow-y-hidden">
                 <NavLink
                   isActive={pathname == '/packages/[name]/[tag]/[variant]'}
                   href={`/packages/${packagesQuery.data.name}/${params.tag}/${params.variant}`}
                   isSmall
+                >
+                  Overview
+                </NavLink>
+                <NavLink
+                  isActive={pathname.startsWith(
+                    '/packages/[name]/[tag]/[variant]/deployment'
+                  )}
+                  href={`/packages/${packagesQuery.data.name}/${params.tag}/${params.variant}/deployment`}
+                  isSmall
                 >
                   Deployment
                 </NavLink>

diff --git a/packages/website/src/pages/packages/[name]/[tag]/[variant]/deployment/index.tsx b/packages/website/src/pages/packages/[name]/[tag]/[variant]/deployment/index.tsx
@@ -0,0 +1,31 @@
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/router';
+
+import TagVariantLayout from '../_layout';
+import { ReactElement } from 'react';
+
+const DeploymentTab = dynamic(
+  async () => {
+    return import('@/features/Packages/Tabs/DeploymentTab');
+  },
+  {
+    ssr: false,
+  }
+);
+
+export default function Deployment() {
+  const params = useRouter().query;
+  return (
+    <>
+      <DeploymentTab
+        name={decodeURIComponent(params.name as string)}
+        tag={decodeURIComponent(params.tag as string)}
+        variant={decodeURIComponent(params.variant as string)}
+      />
+    </>
+  );
+}
+
+Deployment.getLayout = function getLayout(page: ReactElement) {
+  return <TagVariantLayout>{page}</TagVariantLayout>;
+};
diff --git a/packages/website/src/pages/packages/[name]/[tag]/[variant]/index.tsx b/packages/website/src/pages/packages/[name]/[tag]/[variant]/index.tsx
@@ -1,4 +1,3 @@
-import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import { NextSeo } from 'next-seo';
 import defaultSEO from '@/constants/defaultSeo';
@@ -7,15 +6,8 @@ import { PackageReference } from '@usecannon/builder';
 import TagVariantLayout from './_layout';
 import { ReactElement } from 'react';
 import { useCannonChains } from '@/providers/CannonProvidersProvider';
-
-const DeploymentTab = dynamic(
-  async () => {
-    return import('@/features/Packages/Tabs/DeploymentTab');
-  },
-  {
-    ssr: false,
-  }
-);
+import PackageAccordionHelper from '@/features/Packages/PackageAccordionHelper';
+import { usePackageNameTagVariantUrlParams } from '@/hooks/routing/usePackageNameTagVariantUrlParams';
 
 function generateMetadata({
   params,
@@ -53,10 +45,13 @@ function generateMetadata({
   return metadata;
 }
 
-export default function Deployment() {
-  const params = useRouter().query;
+export default function Overview() {
+  const { query: params } = useRouter();
   const { getChainById } = useCannonChains();
   const metadata = generateMetadata({ params: params as any, getChainById });
+
+  const { name, tag, chainId, preset } = usePackageNameTagVariantUrlParams();
+
   return (
     <>
       <NextSeo
@@ -69,15 +64,20 @@ export default function Deployment() {
           description: metadata.description,
         }}
       />
-      <DeploymentTab
-        name={decodeURIComponent(params.name as string)}
-        tag={decodeURIComponent(params.tag as string)}
-        variant={decodeURIComponent(params.variant as string)}
-      />
+      <div className="flex flex-col w-full">
+        <div className="container mx-auto max-w-5xl">
+          <PackageAccordionHelper
+            name={name}
+            tag={tag}
+            chainId={chainId}
+            preset={preset}
+          />
+        </div>
+      </div>
     </>
   );
 }
 
-Deployment.getLayout = function getLayout(page: ReactElement) {
+Overview.getLayout = function getLayout(page: ReactElement) {
   return <TagVariantLayout>{page}</TagVariantLayout>;
 };