feat: Add tags to team members

assets/data/team.json

@@ -70,7 +70,14 @@
         "name": "Spottedleaf",
         "avatar": "https://avatars.githubusercontent.com/u/6100722?v=4",
         "discord": "spottedleaf",
-        "github": "Spottedleaf"
+        "github": "Spottedleaf",
+        "tags": [
+          {
+            "name": "Folia",
+            "color": "#bf026b",
+            "description": "Maintains Folia"
+          }
+        ]
       }
     ]
   },
@@ -193,7 +200,14 @@
         "name": "Ollie",
         "avatar": "https://avatars.githubusercontent.com/u/69084614?v=4",
         "discord": "ollieee_",
-        "github": "olijeffers0n"
+        "github": "olijeffers0n",
+        "tags": [
+          {
+            "name": "Docs",
+            "color": "#029ffa",
+            "description": "Handles documentation for PaperMC projects"
+          }
+        ]
       }
     ]
   },
@@ -264,6 +278,7 @@
       },
       {
         "name": "stefvanschie",
+        "avatar": "https://avatars.githubusercontent.com/u/12550728?v=4",
         "discord": "stefvanschie",
         "github": "stefvanschie"
       },

src/components/layout/SoftwareHeader.tsx

@@ -22,7 +22,7 @@ const SoftwareHeader = ({
   description,
   github,
 }: SoftwareHeaderProps): ReactElement => (
-  <header className="max-w-7xl flex flex-row mx-auto px-4 pt-32 pb-26 lg:(pt-48 pb-46) gap-16">
+  <header className="hero">
     <div className="flex-1">
       <div className="flex flex-row mb-6 gap-4 items-center">
         <div className="w-12 h-12 rounded-lg bg-gray-800 p-3">

src/pages/team.tsx

@@ -1,7 +1,7 @@
 import type { NextPage } from "next";
 import Image from "next/image";
 
-import teams from "@/assets/data/team.json";
+import teamData from "@/assets/data/team.json";
 import DiscordIcon from "@/assets/icons/fontawesome/discord-brands.svg";
 import GitHubIcon from "@/assets/icons/fontawesome/github-brands.svg";
 import Button from "@/components/input/Button";
@@ -10,8 +10,30 @@ import { useGitHubContributors } from "@/lib/service/github";
 
 const HIDDEN_USERS = [1007849, 23557539, 49699333]; // md_5, EcoCityCraftCI, dependabot
 
+interface Tag {
+  name: string;
+  color: string;
+  description?: string;
+}
+
+interface Member {
+  name: string;
+  github?: string;
+  discord?: string;
+  avatar?: string;
+  tags?: Tag[];
+}
+
+interface Team {
+  id: string;
+  name: string;
+  description: string;
+  members: Member[];
+}
+
 const Team: NextPage = () => {
   const { data: contributors } = useGitHubContributors();
+  const teams: Team[] = teamData;
 
   return (
     <>
@@ -21,7 +43,7 @@ const Team: NextPage = () => {
           the game’s ecosystem with faster and more secure software."
         keywords={["papermc", "paper", "minecraft", "team"]}
       />
-      <header className="max-w-7xl flex flex-row mx-auto px-4 pt-32 pb-26 lg:(pt-48 pb-46) gap-16">
+      <header className="hero">
         <div className="flex-1">
           <h1 className="font-medium leading-normal lg:(text-5xl leading-normal) text-4xl">
             Meet our team
@@ -61,7 +83,7 @@ const Team: NextPage = () => {
                 className="border border-gray-300 dark:border-gray-700 rounded-md hover:shadow-md transition-shadow p-4"
               >
                 <div className="flex flex-row gap-6">
-                  <div className="w-20 h-20 relative bg-gray-600 rounded-md overflow-clip ">
+                  <div className="w-68px h-68px relative bg-gray-600 rounded-md overflow-clip">
                     {member.avatar && (
                       <Image
                         alt={`${member.name}'s avatar`}
@@ -73,7 +95,23 @@ const Team: NextPage = () => {
                     )}
                   </div>
                   <div className="min-w-0 flex-1 break-all">
-                    <span className="font-semibold">{member.name}</span>
+                    <div className="flex items-center relative w-max">
+                      <span className="font-semibold leading-4">
+                        {member.name}
+                      </span>
+                      {member.tags?.map((tag) => (
+                        <span
+                          key={tag.name}
+                          className="ml-2 px-2 py-1 rounded-md text-xs font-medium absolute left-[100%] w-max"
+                          style={{ backgroundColor: tag.color, color: "white" }}
+                          title={`${tag.name} ${
+                            tag.description ? `- ${tag.description}` : ""
+                          }`}
+                        >
+                          {tag.name}
+                        </span>
+                      ))}
+                    </div>
                     {member.github && (
                       <a
                         href={`https://github.com/${member.github}`}

windi.config.ts

@@ -58,5 +58,7 @@ export default defineConfig({
       },
     },
   },
-  shortcuts: {},
+  shortcuts: {
+    hero: "max-w-7xl flex flex-row mx-auto px-4 pt-20 pb-16 lg:pt-30 lg:pb-26 gap-16",
+  },
 });