refactor: add isCard flag to grant-item component

jobstash · Aug 1, 2024 · fee48f8 · fee48f8
1 parent 7d2e4f3
commit fee48f8
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 77 deletions.
diff --git a/src/grants/components/grant-card/grant-card.tsx b/src/grants/components/grant-card/grant-card.tsx
@@ -9,5 +9,5 @@ interface Props {
 
 export const GrantCard = ({ grant }: Props) => {
   // TODO: JOB-678
-  return <GrantItem grant={grant} cta={<GrantCardCTA {...grant} />} />;
+  return <GrantItem isCard grant={grant} cta={<GrantCardCTA {...grant} />} />;
 };
diff --git a/src/grants/components/grant-item/content.tsx b/src/grants/components/grant-item/content.tsx
@@ -0,0 +1,79 @@
+import { Avatar, AvatarGroup } from '@nextui-org/react';
+
+import { formatNumber } from '@/shared/utils/format-number';
+
+import { Grant } from '@/grants/core/types';
+
+interface Props {
+  grant: Grant;
+  cta: React.ReactNode;
+}
+
+export const GrantItemContent = ({ grant, cta }: Props) => {
+  const {
+    name,
+    grantees,
+    networks,
+    ecosystem,
+    totalFunds,
+    totalDisbursedFunds,
+    summary,
+    categories,
+    type,
+    reputations,
+  } = grant;
+
+  return (
+    <>
+      <div className="flex flex-col gap-3">
+        <span>{name}</span>
+        <div className="flex items-center gap-6">
+          <span>{`Grantees ${grantees}`}</span>
+          <div className="flex items-center gap-3">
+            <span>Networks</span>
+            <AvatarGroup size="sm">
+              {networks.map(({ name, logo }) => (
+                <Avatar
+                  key={name}
+                  showFallback
+                  name={name}
+                  src={logo ?? ''}
+                  classNames={{
+                    base: 'bg-zinc-700',
+                    fallback: 'bg-white/5',
+                  }}
+                />
+              ))}
+            </AvatarGroup>
+          </div>
+          <span>{`Ecosystem ${ecosystem}`}</span>
+          <span>{`Total Funds $${formatNumber(totalFunds)}`}</span>
+          <span>{`Total Disbursed Funds $${formatNumber(totalDisbursedFunds)}`}</span>
+        </div>
+
+        <div className="flex items-start gap-4">
+          <span>{summary}</span>
+          <div className="flex shrink-0 items-center gap-4">
+            <span>Categories</span>
+            {categories.map((category) => (
+              <span key={category}>{category}</span>
+            ))}
+          </div>
+          <div className="flex shrink-0 gap-4">
+            <span>Type</span>
+            <span className="">{type}</span>
+          </div>
+        </div>
+
+        <div className="flex gap-4">
+          <span>Reputations</span>
+          {reputations.map((reputation) => (
+            <span key={reputation}>{reputation}</span>
+          ))}
+        </div>
+      </div>
+
+      {cta}
+    </>
+  );
+};
diff --git a/src/grants/components/grant-item/grant-item.tsx b/src/grants/components/grant-item/grant-item.tsx
@@ -1,96 +1,54 @@
 import Link from 'next/link';
 
-import { Avatar, AvatarGroup } from '@nextui-org/react';
-
-import { formatNumber } from '@/shared/utils/format-number';
+import { cn } from '@/shared/utils/cn';
 
 import { GRANT_TEST_IDS } from '@/grants/core/constants';
 import { Grant } from '@/grants/core/types';
 
+import { GrantItemContent } from './content';
+
+const WRAPPER_CLASSNAME =
+  'flex items-center justify-between gap-6 rounded-lg p-6';
+
+const CARD_CLASSNAME = 'bg-gradient-to-l from-[#0D0D0D] to-primary';
+
+const LINK_CLASSNAME =
+  'bg-white/5 transition-all duration-300 hover:bg-white/10';
+
 interface Props {
-  grant: Omit<Grant, 'logo' | 'url' | 'discord' | 'twitter'>;
+  grant: Grant;
   cta: React.ReactNode;
+  isCard?: boolean;
 }
 
-export const GrantItem = (props: Props) => {
-  const {
-    grant: {
-      id,
-      name,
-      grantees,
-      networks,
-      ecosystem,
-      totalFunds,
-      totalDisbursedFunds,
-      summary,
-      categories,
-      type,
-      reputations,
-    },
-    cta,
-  } = props;
+export const GrantItem = ({ isCard, grant, cta }: Props) => {
+  // TODO: Complete JOB-679
 
-  const href = `/grants/${id}`;
+  const href = `/grants/${grant.id}`;
 
-  // TODO: JOB-679
+  const className = cn(
+    WRAPPER_CLASSNAME,
+    isCard ? CARD_CLASSNAME : LINK_CLASSNAME,
+  );
 
-  return (
-    <Link
-      href={href}
-      data-testid={GRANT_TEST_IDS.GRANT_ITEM}
-      data-uuid={id}
-      prefetch={true}
-      className="flex items-center justify-between gap-6 rounded-lg bg-white/5 p-6 transition-all duration-300 hover:bg-white/10"
-    >
-      <div className="flex flex-col gap-3">
-        <span>{name}</span>
-        <div className="flex items-center gap-6">
-          <span>{`Grantees ${grantees}`}</span>
-          <div className="flex items-center gap-3">
-            <span>Networks</span>
-            <AvatarGroup size="sm">
-              {networks.map(({ name, logo }) => (
-                <Avatar
-                  key={name}
-                  showFallback
-                  name={name}
-                  src={logo ?? ''}
-                  classNames={{
-                    base: 'bg-zinc-700',
-                    fallback: 'bg-white/5',
-                  }}
-                />
-              ))}
-            </AvatarGroup>
-          </div>
-          <span>{`Ecosystem ${ecosystem}`}</span>
-          <span>{`Total Funds $${formatNumber(totalFunds)}`}</span>
-          <span>{`Total Disbursed Funds $${formatNumber(totalDisbursedFunds)}`}</span>
-        </div>
+  const content = <GrantItemContent grant={grant} cta={cta} />;
 
-        <div className="flex items-start gap-4">
-          <span>{summary}</span>
-          <div className="flex shrink-0 items-center gap-4">
-            <span>Categories</span>
-            {categories.map((category) => (
-              <span key={category}>{category}</span>
-            ))}
-          </div>
-          <div className="flex shrink-0 gap-4">
-            <span>Type</span>
-            <span className="">{type}</span>
-          </div>
-        </div>
+  const testProps = {
+    'data-uuid': grant.id,
+    'data-testid': GRANT_TEST_IDS.GRANT_ITEM,
+  };
 
-        <div className="flex gap-4">
-          <span>Reputations</span>
-          {reputations.map((reputation) => (
-            <span key={reputation}>{reputation}</span>
-          ))}
-        </div>
+  if (isCard) {
+    return (
+      <div className={className} {...testProps}>
+        {content}
       </div>
+    );
+  }
 
-      {cta}
+  return (
+    <Link prefetch href={href} className={className} {...testProps}>
+      {content}
     </Link>
   );
 };
diff --git a/src/grants/core/constants.ts b/src/grants/core/constants.ts
@@ -1,4 +1,5 @@
 export const GRANT_TEST_IDS = {
   GRANT_ITEM: 'grant-item',
+  GRANT_CARD: 'grant-card',
   GRANTEE_ITEM: 'grantee-item',
 } as const;