feat: add random-startups component (#1040)

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

@@ -6,6 +6,7 @@ import getStartup from "./get-startup"
 import getStartups from "../get-startups"
 import RemoteContent from "./remote-content"
 import LocalContent from "./local-content"
+import RandomStartups from "@/components/random-startups"
 
 export async function generateStaticParams() {
   const startups = getStartups()
@@ -89,10 +90,11 @@ export default async function StartupPage({
         </div>
       </div>
 
-      <LocalContent id={id} />
       <RemoteContent
         content_url_encoded_markdown={content_url_encoded_markdown}
       />
+      <LocalContent id={id} />
+      <RandomStartups />
     </div>
   )
 }

src/app/startups/get-startups.ts

@@ -1,5 +1,7 @@
 import json from "./startups.json"
 
+export type Startup = (typeof json.data)[number]
+
 export default function getStartups() {
   const { data } = json
   const excludedPhases = ["transfer", "alumni"]

src/app/startups/page.tsx

@@ -1,11 +1,11 @@
 import { fr } from "@codegouvfr/react-dsfr"
-import List from "./list"
+import StartupsList from "@/components/startups-list"
 
 export default function StartupsPage() {
   return (
     <section className={fr.cx("fr-container", "fr-pb-6w")}>
       <h1 className={fr.cx("fr-h1")}>Nos startups</h1>
-      <List />
+      <StartupsList />
     </section>
   )
 }

src/components/random-startups.tsx

@@ -0,0 +1,19 @@
+import Item from "@/components/startups-list/item"
+import getStartups from "@/app/startups/get-startups"
+import getRandomEntries from "@/utils/get-random-entries"
+
+export default function RandomStartups() {
+  const startups = getStartups()
+  const randomStartups = getRandomEntries(startups, 4)
+
+  return (
+    <div className="random-startups fr-container">
+      <h2 className="fr-h2">Découvrez d&apos;autres startups de la Fabrique</h2>
+      <div className="grid grid-cols-4 gap-6 fr-mt-6w">
+        {randomStartups.map((startup) => (
+          <Item key={startup.id} startup={startup} />
+        ))}
+      </div>
+    </div>
+  )
+}

src/components/startups-list/index.tsx

@@ -0,0 +1,14 @@
+import Item from "./item"
+import getStartups from "../../app/startups/get-startups"
+
+export default function StartupsList() {
+  const startups = getStartups()
+
+  return (
+    <div className="startups-list grid grid-cols-4 gap-6 fr-mt-6w">
+      {startups.map((startup) => (
+        <Item key={startup.id} startup={startup} />
+      ))}
+    </div>
+  )
+}

src/components/startups-list/item.tsx

@@ -0,0 +1,36 @@
+import { Card } from "@codegouvfr/react-dsfr/Card"
+import { Badge } from "@codegouvfr/react-dsfr/Badge"
+
+import type { Startup } from "../../app/startups/get-startups"
+
+export default function StartupsListItem({ startup }: { startup: Startup }) {
+  const {
+    id,
+    attributes: { name, pitch, phases },
+  } = startup
+  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>
+      }
+    />
+  )
+}

src/utils/get-random-entries.ts

@@ -0,0 +1,16 @@
+import * as crypto from "crypto"
+
+export default function getRandomEntries<T>(array: T[], count: number): T[] {
+  if (count >= array.length) {
+    return array
+  }
+
+  const newArray: T[] = array.slice()
+
+  for (let i = newArray.length - 1; i > 0; i--) {
+    const j = Math.floor(crypto.randomInt(0, i + 1))
+    ;[newArray[i], newArray[j]] = [newArray[j], newArray[i]]
+  }
+
+  return newArray.slice(0, count)
+}