feat: org card component (#112)

src/orgs/atoms/active-org-id-atom.ts

@@ -0,0 +1,3 @@
+import { atom } from 'jotai';
+
+export const activeOrgIdAtom = atom<string | null>(null);

src/orgs/components/org-card/create-org-card-tags.tsx

@@ -0,0 +1,67 @@
+import { InfoTagProps } from '~/shared/core/types';
+import { formatNumber } from '~/shared/utils/format-number';
+import { getPluralText } from '~/shared/utils/get-plural-text';
+import { shortTimestamp } from '~/shared/utils/short-timestamp';
+import { BankIcon } from '~/shared/components/icons/bank-icon';
+import { CodeIcon } from '~/shared/components/icons/code-icon';
+import { PaperBillIcon } from '~/shared/components/icons/paper-bill-icon';
+import { SuitCaseIcon } from '~/shared/components/icons/suit-case-icon';
+import { UsersThreeIcon } from '~/shared/components/icons/users-three-icon';
+
+import { OrgListItem } from '~/orgs/core/schemas';
+
+export const createOrgCardTags = (orgListItem: OrgListItem): InfoTagProps[] => {
+  const {
+    orgId,
+    headcountEstimate,
+    jobCount,
+    projectCount,
+    lastFundingAmount,
+    lastFundingDate,
+  } = orgListItem;
+
+  const tags: InfoTagProps[] = [];
+
+  const baseRoute = `/organizations/${orgId}`;
+
+  if (jobCount > 0) {
+    tags.push({
+      text: `${getPluralText('Job', jobCount)}: ${jobCount}`,
+      icon: <SuitCaseIcon />,
+      link: `${baseRoute}/jobs`,
+      showExternalIcon: false,
+    });
+  }
+
+  if (projectCount > 0) {
+    tags.push({
+      text: `${getPluralText('Project', projectCount)}: ${projectCount}`,
+      icon: <CodeIcon />,
+      link: `${baseRoute}/projects`,
+      showExternalIcon: false,
+    });
+  }
+
+  if (headcountEstimate) {
+    tags.push({
+      text: `Employees ${headcountEstimate}`,
+      icon: <UsersThreeIcon />,
+    });
+  }
+
+  if (lastFundingAmount) {
+    tags.push({
+      text: `Last Funding: $${formatNumber(lastFundingAmount * 1_000_000)}`,
+      icon: <PaperBillIcon />,
+    });
+  }
+
+  if (lastFundingDate) {
+    tags.push({
+      text: `Funding Date: ${shortTimestamp(lastFundingDate)}`,
+      icon: <BankIcon />,
+    });
+  }
+
+  return tags;
+};

src/orgs/components/org-card/index.tsx

@@ -0,0 +1,59 @@
+import Link from 'next/link';
+
+import { HREFS } from '~/shared/core/constants';
+import { getLogoUrl } from '~/shared/utils/get-logo-url';
+import { CardWrapper } from '~/shared/components/card-wrapper';
+import { Divider } from '~/shared/components/divider';
+import { InfoTags } from '~/shared/components/info-tags';
+import { LogoTitle } from '~/shared/components/logo-title';
+
+import { ORG_TEST_IDS } from '~/orgs/core/constants';
+import { OrgListItem } from '~/orgs/core/schemas';
+import { activeOrgIdAtom } from '~/orgs/atoms/active-org-id-atom';
+
+import { createOrgCardTags } from './create-org-card-tags';
+
+interface Props {
+  orgItem: OrgListItem;
+  isInit?: boolean;
+  filterParamsString?: string;
+}
+
+export const OrgCard = ({
+  orgItem,
+  isInit,
+  filterParamsString = '',
+}: Props) => {
+  const { orgId, url, logoUrl, name, location } = orgItem;
+
+  const src = getLogoUrl(url, logoUrl);
+  const tags = createOrgCardTags(orgItem);
+
+  return (
+    <CardWrapper id={orgId} idAtom={activeOrgIdAtom}>
+      <Link
+        href={`${HREFS.ORGS_PAGE}/${orgId}/details${filterParamsString}`}
+        scroll={false}
+        data-testid={ORG_TEST_IDS.ORG_CARD}
+        data-uuid={orgId}
+        data-is-init={isInit ?? undefined}
+        prefetch={true}
+        className="flex flex-col gap-3 p-6"
+      >
+        <div className="flex items-center justify-between">
+          <LogoTitle src={src}>
+            <div className="flex flex-col ">
+              <h3 className={`font-lato text-lg font-bold`}>{name}</h3>
+              <h4 className={`font-lato text-sm text-white/60`}>{location}</h4>
+            </div>
+          </LogoTitle>
+          <p>TODO</p>
+        </div>
+
+        {tags.length > 0 && <Divider />}
+
+        <InfoTags compact tags={tags} />
+      </Link>
+    </CardWrapper>
+  );
+};

src/orgs/components/org-list.tsx

@@ -6,6 +6,8 @@ import { VirtualWrapper } from '~/shared/components/virtual-wrapper';
 import { useOrgList } from '~/orgs/hooks/use-org-list';
 import { useFiltersContext } from '~/filters/providers/filters-provider/context';
 
+import { OrgCard } from './org-card';
+
 export const OrgList = () => {
   const {
     orgs,
@@ -42,9 +44,10 @@ export const OrgList = () => {
             <VirtualWrapper count={orgs.length}>
               {(index) => (
                 <div className={cn({ 'pt-8': index > 0 })}>
-                  <div className="flex flex-col bg-darkest-gray p-4">
-                    <pre>{JSON.stringify(orgs[index], undefined, '\t')}</pre>
-                  </div>
+                  <OrgCard
+                    orgItem={orgs[index]}
+                    filterParamsString={filterParamsString}
+                  />
                 </div>
               )}
             </VirtualWrapper>

src/orgs/core/constants.ts

@@ -30,3 +30,7 @@ export const ORG_REVIEW_TIMEZONES = [
   'GMT+13',
   'GMT+14',
 ] as const;
+
+export const ORG_TEST_IDS = {
+  ORG_CARD: 'org-card',
+} as const;