Fixing icons to have dropdown

_data/pages/grant.yml

@@ -19,20 +19,25 @@ blocks:
       - title: Application
         description: "Applicants will submit proposals via an Questbook application form
           provided by the Starknet Foundation team. "
+        icon: Application
       - title: Internal Evaluation
         description: " Each application will be assessed by members of the Starknet
           Foundation and Starkware team based on criteria such as potential
           impact, innovation, milestones, community engagement & track record,
           and embeddedness with the Starknet ecosystem."
+        icon: Internal Evaluation
       - title: Results
         description: We plan to communicate decisions on your application within an
           approximate two week timeframe.
+        icon: Results
       - title: Onboarding
         description: "Upon signing a grant agreement and completing KYC, the Starknet
           Foundation will send funds. "
+        icon: Onboarding
       - title: Grant Deliverables
         description: "After completion of the work, the Foundation will assess results
           and share deliverables (blog post, video, AMA) with the team.  "
+        icon: Post Grant Check-in
   - type: container
     blocks:
       - type: flex_layout

workspaces/cms-config/src/blocks.ts

@@ -263,10 +263,17 @@ export const cardDisplayItem = [
     crowdin: false,
   },
   {
-    label: "Image",
+    label: "Icon",
     required: false,
-    name: "image",
-    widget: "image",
+    name: "icon",
+    widget: "select",
+    options: [
+      "Application",
+      "Internal Evaluation",
+      "Results",
+      "Onboarding",
+      "Post Grant Check-in",
+    ],
     crowdin: false,
   },
 ] satisfies CmsField[];

workspaces/website/src/components/Card/DisplayCard.tsx

@@ -7,7 +7,8 @@ import { Results } from "@ui/Icons/DisplayCardIcons/Results";
 import { Heading } from "@ui/Typography/Heading";
 
 type Props = {
-  readonly title:
+  readonly title: string;
+  readonly icon?:
     | "Application"
     | "Internal Evaluation"
     | "Results"
@@ -25,7 +26,12 @@ const images = {
   "Post Grant Check-in": <GrantDeliverables />,
 };
 
-export const DisplayCard = (props: Props) => {
+export const DisplayCard = ({
+  title,
+  icon = "Application",
+  description,
+  index,
+}: Props) => {
   return (
     <Box
       as="li"
@@ -56,7 +62,7 @@ export const DisplayCard = (props: Props) => {
             _dark={{ color: "white" }}
             marginBottom={{ base: "16px", md: "0" }}
           >
-            {images[props?.title]}
+            {images[icon]}
           </Box>
         </Stack>
         <Box flex="1">
@@ -71,7 +77,7 @@ export const DisplayCard = (props: Props) => {
               _dark={{ bg: "white", color: "black" }}
               color="white"
             >
-              {props.index}
+              {index}
             </Circle>
             <Heading
               variant="h4"
@@ -81,10 +87,10 @@ export const DisplayCard = (props: Props) => {
                 color: "button-nav-fg",
               }}
             >
-              {props.title}
+              {title}
             </Heading>
           </Stack>
-          <Text>{props.description}</Text>
+          <Text>{description}</Text>
         </Box>
       </Stack>
     </Box>