move graphic intro from page into member graphic component

armada-ths · Sep 9, 2024 · fce1a6b · fce1a6b
1 parent d31d6a5
commit fce1a6b
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 37 deletions.
diff --git a/src/app/_components/OrganisationMembersGraphic.tsx b/src/app/_components/OrganisationMembersGraphic.tsx
@@ -1,4 +1,6 @@
 "use client"
+import { OrganisationMembersInfo } from "@/app/_components/OrganisationMemberInfo"
+import { CircleDashed } from "lucide-react"
 import { useEffect, useState } from "react"
 
 /*
@@ -228,13 +230,48 @@ export function OrganisationMembersGraphic() {
   })
 
   return (
-    <div className="mt-5">
+    <figure className="relative mt-5">
       <svg viewBox="0 0 170 170" xmlns="http://www.w3.org/2000/svg">
         <circle fill="orange" cx="85" cy="85" r={memberRadius} />
         {pgCircles}
         {otCircles}
         {hostCircles}
       </svg>
-    </div>
+      <figcaption className="absolute bottom-0 opacity-90">
+        <OrganisationMembersInfo title="Infographics guide">
+          The graphics below contain our current organisation structure.
+          <ul>
+            <li>
+              <CircleDashed
+                size={20}
+                className="mr-1 inline-block text-green-700"
+              />
+              Hosts
+            </li>
+            <li>
+              <CircleDashed
+                size={20}
+                className="mr-1 inline-block text-green-300"
+              />
+              Operation team
+            </li>
+            <li>
+              <CircleDashed
+                size={20}
+                className="mr-1 inline-block text-red-500"
+              />
+              Project group
+            </li>
+            <li>
+              <CircleDashed
+                size={20}
+                className="mr-1 inline-block text-orange-400"
+              />
+              Project manager
+            </li>
+          </ul>
+        </OrganisationMembersInfo>
+      </figcaption>
+    </figure>
   )
 }
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -1,9 +1,7 @@
-import { OrganisationMembersInfo } from "@/app/_components/OrganisationMemberInfo"
 import { OrganisationMembersGraphic } from "@/app/_components/OrganisationMembersGraphic"
 import { P } from "@/app/_components/Paragraph"
 import { PhotoSlideCarousel } from "@/app/_components/PhotoSlideCarousel"
 import { Page } from "@/components/shared/Page"
-import { CircleDashed } from "lucide-react"
 import { Metadata } from "next"
 import Link from "next/link"
 
@@ -56,39 +54,6 @@ export default async function RecruitmentPage() {
           , the student union at KTH, any profit Armada makes goes back to the
           students, funding THS initiatives for a better student life.
         </P>
-        <OrganisationMembersInfo title="Infographics guide">
-          The graphics below contain our current organisation structure.
-          <ul>
-            <li>
-              <CircleDashed
-                size={20}
-                className="mr-1 inline-block text-green-700"
-              />
-              Hosts
-            </li>
-            <li>
-              <CircleDashed
-                size={20}
-                className="mr-1 inline-block text-green-300"
-              />
-              Operation team
-            </li>
-            <li>
-              <CircleDashed
-                size={20}
-                className="mr-1 inline-block text-red-500"
-              />
-              Project group
-            </li>
-            <li>
-              <CircleDashed
-                size={20}
-                className="mr-1 inline-block text-orange-400"
-              />
-              Project manager
-            </li>
-          </ul>
-        </OrganisationMembersInfo>
         <OrganisationMembersGraphic />
       </Page.Boundary>
     </Page.Background>