feat: show phase in each startups list item (#1035)

src/app/startups/[id]/page.tsx

@@ -22,17 +22,19 @@ export default async function Details({
 }) {
   const startup = getStartup(id)
 
-  const { attributes } = startup
   const {
-    name,
-    link,
-    pitch,
-    contact,
-    stats_url,
-    repository,
-    accessibility_status,
-    content_url_encoded_markdown,
-  } = attributes
+    attributes: {
+      name,
+      link,
+      pitch,
+      phases,
+      contact,
+      stats_url,
+      repository,
+      accessibility_status,
+      content_url_encoded_markdown,
+    },
+  } = startup
 
   const markdown = await remark().process(
     decodeURIComponent(content_url_encoded_markdown)
@@ -102,8 +104,18 @@ export default async function Details({
           <div>
             <b>accessibility status</b>: {accessibility_status}
           </div>
+          <div>
+            {phases.map((phase, i) => (
+              <div key={i}>
+                <div>{phase.name}</div>
+                <div>{phase.start}</div>
+                <div>{phase.end}</div>
+              </div>
+            ))}
+          </div>
         </div>
       </div>
+
       <div className="fr-py-6w">
         <div className="fr-container">
           <MDXRemote source={markdown} components={component} />

src/app/startups/list.tsx

@@ -1,23 +1,40 @@
 import { Card } from "@codegouvfr/react-dsfr/Card"
+import { Badge } from "@codegouvfr/react-dsfr/Badge"
 
 import getStartups from "./get-startups"
 
 export default function List() {
   const startups = getStartups()
 
   return (
-    <div className="startups-list grid grid-cols-4 gap-6">
-      {startups.map(({ id, attributes: { name, pitch } }) => (
-        <Card
-          key={id}
-          enlargeLink
-          title={name}
-          desc={pitch}
-          linkProps={{ href: `/startups/${id}` }}
-          imageAlt="image d'illustration de la startup"
-          imageUrl={`https://beta.gouv.fr/img/startups/${id}.png`}
-        />
-      ))}
+    <div className="startups-list grid grid-cols-4 gap-6 fr-mt-6w">
+      {startups.map(({ id, attributes: { name, pitch, phases } }) => {
+        const phase = phases.pop()?.name
+        const severity = phase === "success" ? "success" : "info"
+
+        return (
+          <Card
+            key={id}
+            enlargeLink
+            title={name}
+            desc={pitch}
+            linkProps={{ href: `/startups/${id}` }}
+            imageAlt="image d'illustration de la startup"
+            imageUrl={`https://beta.gouv.fr/img/startups/${id}.png`}
+            start={
+              <ul className="fr-badges-group">
+                {phase && (
+                  <li>
+                    <Badge key={1} noIcon severity={severity} small>
+                      {phase === "success" ? "succès" : phase}
+                    </Badge>
+                  </li>
+                )}
+              </ul>
+            }
+          />
+        )
+      })}
     </div>
   )
 }