refactor: add cta-slot to grant-item component

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>; */
+}

src/grants/components/grant-card/index.ts

@@ -0,0 +1 @@
+export * from './grant-card';

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,
   },
 };
 

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>
   );
 };

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>
+  );
+};

src/grants/components/grant-list.tsx → src/grants/components/grant-list/grant-list.tsx

@@ -1,14 +1,16 @@
+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
 
   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>
   );

src/grants/components/grant-list/index.ts

@@ -0,0 +1 @@
+export * from './grant-list';

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 (