From c16956cf52cd40aa91294fb78c8f03885e1bcf3f Mon Sep 17 00:00:00 2001
From: John Ballesteros <johnshift.dev@gmail.com>
Date: Thu, 1 Aug 2024 12:58:02 +0800
Subject: [PATCH] refactor: add cta-slot to grant-item component

completes JOB-689
---
 src/grants/components/grant-card.tsx          | 12 ------
 .../components/grant-card/grant-card.tsx      | 38 +++++++++++++++++++
 src/grants/components/grant-card/index.ts     |  1 +
 .../grant-item/grant-item.stories.tsx         |  1 +
 .../components/grant-item/grant-item.tsx      | 36 +++---------------
 src/grants/components/grant-list/cta.tsx      | 31 +++++++++++++++
 .../{ => grant-list}/grant-list.tsx           |  6 ++-
 src/grants/components/grant-list/index.ts     |  1 +
 src/grants/pages/grant-list-page.tsx          |  2 +-
 9 files changed, 82 insertions(+), 46 deletions(-)
 delete mode 100644 src/grants/components/grant-card.tsx
 create mode 100644 src/grants/components/grant-card/grant-card.tsx
 create mode 100644 src/grants/components/grant-card/index.ts
 create mode 100644 src/grants/components/grant-list/cta.tsx
 rename src/grants/components/{ => grant-list}/grant-list.tsx (58%)
 create mode 100644 src/grants/components/grant-list/index.ts

diff --git a/src/grants/components/grant-card.tsx b/src/grants/components/grant-card.tsx
deleted file mode 100644
index ddc9fe0..0000000
--- a/src/grants/components/grant-card.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-interface Props {
-  id: string;
-}
-
-export const GrantCard = ({ id }: Props) => {
-  // TODO: JOB-678
-  return (
-    <div className="flex flex-col gap-3 rounded-lg bg-gradient-to-l from-[#0D0D0D] to-primary p-6 py-16 transition-all duration-300 hover:bg-white/10">
-      <span className="font-bold">{`Grant Program ${id}`}</span>
-    </div>
-  );
-};
diff --git a/src/grants/components/grant-card/grant-card.tsx b/src/grants/components/grant-card/grant-card.tsx
new file mode 100644
index 0000000..772873f
--- /dev/null
+++ b/src/grants/components/grant-card/grant-card.tsx
@@ -0,0 +1,38 @@
+interface Props {
+  id: string;
+}
+
+export const GrantCard = ({ id }: Props) => {
+  // TODO: JOB-678
+  return (
+    <div className="flex flex-col gap-3 rounded-lg bg-gradient-to-l from-[#0D0D0D] to-primary p-6 py-16 transition-all duration-300 hover:bg-white/10">
+      <span className="font-bold">{`Grant Program ${id}`}</span>
+    </div>
+  );
+};
+
+// TODO: Extract to cta-slot for grant-item component
+{
+  /* <div className="flex flex-col gap-3">
+  <div className="flex size-32 items-center justify-center bg-white/5">
+    <span>LOGO HERE: {logo}</span>
+  </div>
+  <div className="flex items-center gap-3">
+    {url && (
+      <Button size="sm" as={Link} href={url} isIconOnly>
+        <WebIcon />
+      </Button>
+    )}
+    {discord && (
+      <Button size="sm" as={Link} href={discord} isIconOnly>
+        <DiscordIcon />
+      </Button>
+    )}
+    {twitter && (
+      <Button size="sm" as={Link} href={twitter} isIconOnly>
+        <TwitterIcon />
+      </Button>
+    )}
+  </div>
+</div>; */
+}
diff --git a/src/grants/components/grant-card/index.ts b/src/grants/components/grant-card/index.ts
new file mode 100644
index 0000000..64175c1
--- /dev/null
+++ b/src/grants/components/grant-card/index.ts
@@ -0,0 +1 @@
+export * from './grant-card';
diff --git a/src/grants/components/grant-item/grant-item.stories.tsx b/src/grants/components/grant-item/grant-item.stories.tsx
index 0a93a03..73ae46a 100644
--- a/src/grants/components/grant-item/grant-item.stories.tsx
+++ b/src/grants/components/grant-item/grant-item.stories.tsx
@@ -8,6 +8,7 @@ const meta: Meta<typeof GrantItem> = {
   component: GrantItem,
   args: {
     grant: fakeGrant,
+    cta: null,
   },
 };
 
diff --git a/src/grants/components/grant-item/grant-item.tsx b/src/grants/components/grant-item/grant-item.tsx
index cd490bf..c4469be 100644
--- a/src/grants/components/grant-item/grant-item.tsx
+++ b/src/grants/components/grant-item/grant-item.tsx
@@ -1,17 +1,15 @@
 import Link from 'next/link';
 
-import { Avatar, AvatarGroup, Button } from '@nextui-org/react';
+import { Avatar, AvatarGroup } from '@nextui-org/react';
 
 import { formatNumber } from '@/shared/utils/format-number';
 
 import { GRANT_TEST_IDS } from '@/grants/core/constants';
 import { Grant } from '@/grants/core/types';
-import { DiscordIcon } from '@/grants/components/icons/discord-icon';
-import { TwitterIcon } from '@/grants/components/icons/twitter-icon';
-import { WebIcon } from '@/grants/components/icons/web-icon';
 
 interface Props {
-  grant: Grant;
+  grant: Omit<Grant, 'logo' | 'url' | 'discord' | 'twitter'>;
+  cta: React.ReactNode;
 }
 
 export const GrantItem = (props: Props) => {
@@ -28,11 +26,8 @@ export const GrantItem = (props: Props) => {
       categories,
       type,
       reputations,
-      logo,
-      url,
-      discord,
-      twitter,
     },
+    cta,
   } = props;
 
   const href = `/grants/${id}`;
@@ -95,28 +90,7 @@ export const GrantItem = (props: Props) => {
         </div>
       </div>
 
-      <div className="flex flex-col gap-3">
-        <div className="flex size-32 items-center justify-center bg-white/5">
-          <span>LOGO HERE: {logo}</span>
-        </div>
-        <div className="flex items-center gap-3">
-          {url && (
-            <Button size="sm" as={Link} href={url} isIconOnly>
-              <WebIcon />
-            </Button>
-          )}
-          {discord && (
-            <Button size="sm" as={Link} href={discord} isIconOnly>
-              <DiscordIcon />
-            </Button>
-          )}
-          {twitter && (
-            <Button size="sm" as={Link} href={twitter} isIconOnly>
-              <TwitterIcon />
-            </Button>
-          )}
-        </div>
-      </div>
+      {cta}
     </Link>
   );
 };
diff --git a/src/grants/components/grant-list/cta.tsx b/src/grants/components/grant-list/cta.tsx
new file mode 100644
index 0000000..022e312
--- /dev/null
+++ b/src/grants/components/grant-list/cta.tsx
@@ -0,0 +1,31 @@
+import { Button } from '@nextui-org/react';
+
+const CaretRightIcon = () => (
+  <svg
+    width="32"
+    height="33"
+    viewBox="0 0 32 33"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.2929 10.7929C12.6834 10.4024 13.3166 10.4024 13.7071 10.7929L18.7071 15.7929C19.0976 16.1834 19.0976 16.8166 18.7071 17.2071L13.7071 22.2071C13.3166 22.5976 12.6834 22.5976 12.2929 22.2071C11.9024 21.8166 11.9024 21.1834 12.2929 20.7929L16.5858 16.5L12.2929 12.2071C11.9024 11.8166 11.9024 11.1834 12.2929 10.7929Z"
+      fill="#F9FAFB"
+    />
+  </svg>
+);
+
+export const GrantListCTA = () => {
+  return (
+    <div className="flex size-40 items-center justify-center">
+      <div className="flex items-center gap-4">
+        <Button color="primary">
+          <span>Apply</span>
+        </Button>
+        <CaretRightIcon />
+      </div>
+    </div>
+  );
+};
diff --git a/src/grants/components/grant-list.tsx b/src/grants/components/grant-list/grant-list.tsx
similarity index 58%
rename from src/grants/components/grant-list.tsx
rename to src/grants/components/grant-list/grant-list.tsx
index 4770e12..1db4a06 100644
--- a/src/grants/components/grant-list.tsx
+++ b/src/grants/components/grant-list/grant-list.tsx
@@ -1,6 +1,8 @@
+import { GrantItem } from '@/grants/components/grant-item';
+
 import { fakeGrant } from '@/grants/testutils/fake-grant';
 
-import { GrantItem } from './grant-item';
+import { GrantListCTA } from './cta';
 
 export const GrantList = () => {
   // TODO: JOB-682
@@ -8,7 +10,7 @@ export const GrantList = () => {
   return (
     <div className="flex flex-col gap-4">
       {Array.from({ length: 64 }).map((_, index) => (
-        <GrantItem key={index} grant={fakeGrant} />
+        <GrantItem key={index} grant={fakeGrant} cta={<GrantListCTA />} />
       ))}
     </div>
   );
diff --git a/src/grants/components/grant-list/index.ts b/src/grants/components/grant-list/index.ts
new file mode 100644
index 0000000..7ccbd5b
--- /dev/null
+++ b/src/grants/components/grant-list/index.ts
@@ -0,0 +1 @@
+export * from './grant-list';
diff --git a/src/grants/pages/grant-list-page.tsx b/src/grants/pages/grant-list-page.tsx
index 985aa86..62b29cd 100644
--- a/src/grants/pages/grant-list-page.tsx
+++ b/src/grants/pages/grant-list-page.tsx
@@ -1,4 +1,4 @@
-import { GrantList } from '@/grants/components/grant-list';
+import { GrantList } from '@/grants/components/grant-list/grant-list';
 
 export const GrantListPage = () => {
   return (