refactor: add project-details tab card components (#147)

jobstash · Apr 7, 2024 · 72c3907 · 72c3907
1 parent 3d40563
commit 72c3907
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 8 deletions.
diff --git a/src/projects/components/project-details-cards/index.tsx b/src/projects/components/project-details-cards/index.tsx
@@ -12,7 +12,7 @@ export const ProjectDetailsCards = ({ projects }: Props) => {
   return (
     <div className="flex flex-col gap-6">
       {projects.map((project) => (
-        <ProjectDetailsCard key={project.id} project={project} />
+        <ProjectDetailsCard key={project.id} withActions project={project} />
       ))}
     </div>
   );

diff --git a/src/projects/components/project-details-cards/project-details-card.tsx b/src/projects/components/project-details-cards/project-details-card.tsx
@@ -18,9 +18,10 @@ import { ProjectDetailsCardLinks } from './links';
 
 interface Props {
   project: ProjectAllInfo;
+  withActions?: boolean;
 }
 
-export const ProjectDetailsCard = ({ project }: Props) => {
+export const ProjectDetailsCard = ({ project, withActions }: Props) => {
   const { name, website, logo, description, chains } = project;
 
   const src = getLogoUrl(website, logo);
@@ -62,11 +63,15 @@ export const ProjectDetailsCard = ({ project }: Props) => {
 
       <ChainsInfoTag chains={chains} />
 
-      <Divider />
+      {withActions && (
+        <>
+          <Divider />
 
-      <DetailsPanelActionsWrapper>
-        <DetailsPanelCTA text={CTA_TEXT} />
-      </DetailsPanelActionsWrapper>
+          <DetailsPanelActionsWrapper>
+            <DetailsPanelCTA text={CTA_TEXT} />
+          </DetailsPanelActionsWrapper>
+        </>
+      )}
     </DetailsPanelCardWrapper>
   );
 };

diff --git a/src/projects/pages/project-params-page.tsx b/src/projects/pages/project-params-page.tsx
@@ -1,5 +1,7 @@
 'use client';
 
+import dynamic from 'next/dynamic';
+
 import { ROUTE_TABS } from '~/shared/core/constants';
 
 import { useProjectDetails } from '~/projects/hooks/use-project-details';
@@ -16,8 +18,23 @@ export const ProjectParamsPage = ({ params: { id, tab } }: Props) => {
 
   if (!data) return null;
 
-  if (tab === ROUTE_TABS.SHARED.DETAILS) return <p>ProjectDetailsCard</p>;
-  if (tab === ROUTE_TABS.SHARED.ORG) return <p>ProjectOrgCard</p>;
+  if (tab === ROUTE_TABS.SHARED.DETAILS) {
+    return <ProjectDetailsCard project={data} />;
+  }
+
+  if (tab === ROUTE_TABS.SHARED.ORG) {
+    return <OrgDetailsCard withActions org={data.organization} />;
+  }
 
   return null;
 };
+
+const ProjectDetailsCard = dynamic(() =>
+  import(
+    '~/projects/components/project-details-cards/project-details-card'
+  ).then((m) => m.ProjectDetailsCard),
+);
+
+const OrgDetailsCard = dynamic(() =>
+  import('~/orgs/components/org-details-card').then((m) => m.OrgDetailsCard),
+);