feat: move over changes

src/components/team/Person.astro

@@ -1,27 +1,28 @@
 ---
-import type { ComponentProps } from "astro/types";
-import SocialMediaList from "./SocialMediaList.astro";
+import { TeamMember } from "../../utils/async_helper";
+import type { PropsOf } from "../../utils/types";
+import SocialMediaList from "../social_media/SocialMediaList.astro";
+import { PersonImage } from "./PersonImage";
 
-type Props = ComponentProps<typeof SocialMediaList> & {
-  name: string;
-  img: string;
-  info?: string;
-};
+type Props = TeamMember;
 
-const { name, img, info, links = [] } = Astro.props;
+const { name, img, lastRole, skill, hasMultipleRoles } = Astro.props;
 ---
 
 <div class="space-y-6">
-  <img
-    class="mx-auto h-40 w-40 rounded-full object-cover shadow-lg xl:h-56 xl:w-56"
-    src={img}
-    alt=""
-  />
-  <div class="space-y-2">
-    <div class="space-y-1 text-lg font-medium leading-6">
-      <h3>{name}</h3>
-      {info && <p class="text-wsg-orange-500">{info}</p>}
+  <PersonImage img={img} />
+  <div class="text-center text-md font-light">
+    <h3 class="text-lg font-medium mb-1">{name}</h3>
+    <div>
+      <p class="inline-block">
+        {lastRole}
+      </p>
+      <p class="inline-block">
+        {hasMultipleRoles && t("team.more")}
+      </p>
     </div>
-    <SocialMediaList links={links} />
+    <p>
+      {skill || <br />}
+    </p>
   </div>
 </div>

src/components/team/PersonImage.tsx

@@ -0,0 +1,14 @@
+export type PersonImageProps = {
+  img?: string;
+};
+
+export const PersonImage = ({ img }: PersonImageProps) => {
+  const padding = !img ? "p-5" : "";
+  return (
+    <img
+      className={`mx-auto h-40 w-40 rounded-full shadow-lg xl:h-56 xl:w-56 object-cover ${padding}`}
+      src={img ?? "/imgs/wsg/wsg_hands.svg"}
+      alt=""
+    />
+  );
+};

src/components/team/Team.astro

@@ -1,23 +1,26 @@
 ---
-import type { ComponentProps } from "astro/types";
+import { load_team } from "../../utils/async_helper";
 import Person from "./Person.astro";
 
-interface Props {
-  members: ComponentProps<typeof Person>[];
-}
-
-const { members } = Astro.props;
+const team = await load_team();
 ---
 
-<ul
-  role="list"
-  class="mx-auto space-y-16 sm:grid sm:grid-cols-2 sm:gap-16 sm:space-y-0 lg:max-w-5xl lg:grid-cols-3"
->
-  {
-    members.map((member) => (
-      <li>
-        <Person {...member} />
-      </li>
-    ))
-  }
-</ul>
+<div class="bg-white py-16">
+  <div
+    class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-y-16 mx-8 md:mx-24 mx-32"
+  >
+    {
+      team
+        .sort((first, second) => first["name"].localeCompare(second["name"]))
+        .map((member) => (
+          <Person
+            name={member["name"]}
+            img={member["img"]}
+            lastRole={member["lastRole"]}
+            skill={member["skill"]}
+            hasMultipleRoles={member["hasMultipleRoles"]}
+          />
+        ))
+    }
+  </div>
+</div>

src/pages/[lang]/our-team.astro

@@ -0,0 +1,18 @@
+---
+import Hero from "../../components/Hero.astro";
+import TeamPage from "../../components/team/Team.astro";
+import Layout from "../../layouts/Layout.astro";
+import { getStaticLangPaths, updateLang } from "../../routing/lang";
+import { t } from "i18next";
+
+export const getStaticPaths = getStaticLangPaths;
+updateLang(Astro.url.pathname);
+---
+
+<Layout title={t("team.title")}>
+  <Hero
+    title={t("team.title")}
+    img="https:////live.staticflickr.com/65535/52434467221_676ae1bf70_h.jpg"
+  />
+  <TeamPage />
+</Layout>