refactor: add project-details-cards shared component (#133)

src/jobs/components/job-project-cards.tsx

@@ -1,6 +1,5 @@
 import { JobDetails } from '~/jobs/core/schemas';
-
-import { JobProjectCard } from './job-project-card';
+import { ProjectDetailsCards } from '~/projects/components/project-details-cards';
 
 interface Props {
   job: JobDetails;
@@ -13,11 +12,5 @@ export const JobProjectCards = ({ job }: Props) => {
 
   if (!projects.length) return null;
 
-  return (
-    <div className="flex flex-col gap-6">
-      {projects.map((project) => (
-        <JobProjectCard key={project.id} project={project} />
-      ))}
-    </div>
-  );
+  return <ProjectDetailsCards projects={projects} />;
 };

src/jobs/pages/job-params-page.tsx

@@ -28,7 +28,8 @@ const getPageContent = (job: JobDetails, tab: string) => {
   if (tab === ROUTE_TABS.SHARED.DETAILS) return <JobDetailsCard job={job} />;
   if (tab === ROUTE_TABS.SHARED.ORG)
     return <OrgDetailsCard withActions org={job.organization} />;
-  if (tab === ROUTE_TABS.JOBS.PROJECTS) return <JobProjectCards job={job} />;
+  if (tab === ROUTE_TABS.JOBS.PROJECTS)
+    return <ProjectDetailsCards projects={job.organization.projects} />;
 
   if (tab === ROUTE_TABS.JOBS.COMPETITORS) {
     return <JobCompetitorCards job={job} />;
@@ -48,8 +49,10 @@ const OrgDetailsCard = dynamic(() =>
   import('~/orgs/components/org-details-card').then((m) => m.OrgDetailsCard),
 );
 
-const JobProjectCards = dynamic(() =>
-  import('~/jobs/components/job-project-cards').then((m) => m.JobProjectCards),
+const ProjectDetailsCards = dynamic(() =>
+  import('~/projects/components/project-details-cards').then(
+    (m) => m.ProjectDetailsCards,
+  ),
 );
 
 const JobCompetitorCards = dynamic(() =>

src/orgs/pages/org-params-page.tsx

@@ -4,6 +4,7 @@ import { ROUTE_TABS } from '~/shared/core/constants';
 
 import { useOrgDetails } from '~/orgs/hooks/use-org-details';
 import { OrgDetailsCard } from '~/orgs/components/org-details-card';
+import { ProjectDetailsCards } from '~/projects/components/project-details-cards';
 
 interface Props {
   params: {
@@ -18,7 +19,8 @@ export const OrgParamsPage = ({ params: { id, tab } }: Props) => {
   if (!data) return null;
 
   if (tab === ROUTE_TABS.SHARED.DETAILS) return <OrgDetailsCard org={data} />;
-  if (tab === ROUTE_TABS.ORGS.PROJECTS) return <p>OrgProjectsCard</p>;
+  if (tab === ROUTE_TABS.ORGS.PROJECTS)
+    return <ProjectDetailsCards projects={data.projects} />;
   if (tab === ROUTE_TABS.ORGS.JOBS) return <p>OrgJobsCard</p>;
   if (tab === ROUTE_TABS.ORGS.REVIEWS) return <p>OrgReviewsCard</p>;
 

src/projects/components/project-details-cards/index.tsx

@@ -0,0 +1,19 @@
+import { ProjectAllInfo } from '~/shared/core/schemas';
+
+import { ProjectDetailsCard } from './project-details-card';
+
+interface Props {
+  projects: ProjectAllInfo[];
+}
+
+export const ProjectDetailsCards = ({ projects }: Props) => {
+  if (!projects.length) return null;
+
+  return (
+    <div className="flex flex-col gap-6">
+      {projects.map((project) => (
+        <ProjectDetailsCard key={project.id} project={project} />
+      ))}
+    </div>
+  );
+};

src/jobs/components/job-project-card/links.tsx → src/projects/components/project-details-cards/links.tsx

@@ -8,7 +8,7 @@ interface Props {
   project: ProjectAllInfo;
 }
 
-export const JobProjectCardLinks = ({ project }: Props) => {
+export const ProjectDetailsCardLinks = ({ project }: Props) => {
   const tags = createSocialsInfoTagProps(project);
 
   if (!tags.length) return null;

src/jobs/components/job-project-card/index.tsx → src/projects/components/project-details-cards/project-details-card.tsx

@@ -14,13 +14,13 @@ import { LogoTitle } from '~/shared/components/logo-title';
 import { ShareButton } from '~/shared/components/share-button';
 import { Text } from '~/shared/components/text';
 
-import { JobProjectCardLinks } from './links';
+import { ProjectDetailsCardLinks } from './links';
 
 interface Props {
   project: ProjectAllInfo;
 }
 
-export const JobProjectCard = ({ project }: Props) => {
+export const ProjectDetailsCard = ({ project }: Props) => {
   const { name, website, logo, description, chains } = project;
 
   const src = getLogoUrl(website, logo);
@@ -40,7 +40,7 @@ export const JobProjectCard = ({ project }: Props) => {
         </DetailsPanelActionsWrapper>
       </div>
 
-      <JobProjectCardLinks project={project} />
+      <ProjectDetailsCardLinks project={project} />
 
       <Divider />
       <Heading