udpate team members card to add outline color and extract sections fo…

…r more control
IhsenBouallegue · Jul 17, 2024 · 6706da0 · 6706da0
1 parent ad6f0f7
commit 6706da0
Show file tree

Hide file tree

Showing 5 changed files with 166 additions and 54 deletions.
diff --git a/customtypes/section/index.json b/customtypes/section/index.json
@@ -0,0 +1,38 @@
+{
+  "format": "custom",
+  "id": "section",
+  "label": "Section",
+  "repeatable": true,
+  "status": true,
+  "json": {
+    "Main": {
+      "uid": {
+        "config": {
+          "label": "UID"
+        },
+        "type": "UID"
+      },
+      "name": {
+        "type": "Text",
+        "config": {
+          "label": "Name",
+          "placeholder": ""
+        }
+      },
+      "short_name": {
+        "type": "Text",
+        "config": {
+          "label": "Short Name",
+          "placeholder": ""
+        }
+      },
+      "color": {
+        "type": "Color",
+        "config": {
+          "label": "Color",
+          "placeholder": ""
+        }
+      }
+    }
+  }
+}
diff --git a/customtypes/team_members/index.json b/customtypes/team_members/index.json
@@ -26,20 +26,6 @@
                 "placeholder": ""
               }
             },
-            "section": {
-              "type": "Select",
-              "config": {
-                "label": "Section",
-                "placeholder": "",
-                "options": [
-                  "TUDSaT Board",
-                  "RAPID - Rocket Team",
-                  "TRACE - CubeSat Team",
-                  "TUDSaT PR"
-                ],
-                "default_value": "TUDSaT Board"
-              }
-            },
             "highlight": {
               "type": "Boolean",
               "config": {
@@ -56,6 +42,14 @@
                 "constraint": {},
                 "thumbnails": []
               }
+            },
+            "section": {
+              "type": "Link",
+              "config": {
+                "label": "Section",
+                "select": "document",
+                "customtypes": ["section"]
+              }
             }
           }
         }

diff --git a/prismicio-types.d.ts b/prismicio-types.d.ts
@@ -265,6 +265,60 @@ interface PageDocumentData {
 export type PageDocument<Lang extends string = string> =
   prismic.PrismicDocumentWithUID<Simplify<PageDocumentData>, "page", Lang>;
 
+/**
+ * Content for Section documents
+ */
+interface SectionDocumentData {
+  /**
+   * Name field in *Section*
+   *
+   * - **Field Type**: Text
+   * - **Placeholder**: *None*
+   * - **API ID Path**: section.name
+   * - **Tab**: Main
+   * - **Documentation**: https://prismic.io/docs/field#key-text
+   */
+  name: prismic.KeyTextField;
+
+  /**
+   * Short Name field in *Section*
+   *
+   * - **Field Type**: Text
+   * - **Placeholder**: *None*
+   * - **API ID Path**: section.short_name
+   * - **Tab**: Main
+   * - **Documentation**: https://prismic.io/docs/field#key-text
+   */
+  short_name: prismic.KeyTextField;
+
+  /**
+   * Color field in *Section*
+   *
+   * - **Field Type**: Color
+   * - **Placeholder**: *None*
+   * - **API ID Path**: section.color
+   * - **Tab**: Main
+   * - **Documentation**: https://prismic.io/docs/field#color
+   */
+  color: prismic.ColorField;
+}
+
+/**
+ * Section document from Prismic
+ *
+ * - **API ID**: `section`
+ * - **Repeatable**: `true`
+ * - **Documentation**: https://prismic.io/docs/custom-types
+ *
+ * @typeParam Lang - Language API ID of the document.
+ */
+export type SectionDocument<Lang extends string = string> =
+  prismic.PrismicDocumentWithUID<
+    Simplify<SectionDocumentData>,
+    "section",
+    Lang
+  >;
+
 /**
  * Item in *Settings → Socials*
  */
@@ -441,23 +495,6 @@ export interface TeamMembersDocumentDataTeamMembersItem {
    */
   position: prismic.KeyTextField;
 
-  /**
-   * Section field in *Team Members → Team Members*
-   *
-   * - **Field Type**: Select
-   * - **Placeholder**: *None*
-   * - **Default Value**: TUDSaT Board
-   * - **API ID Path**: team_members.team_members[].section
-   * - **Documentation**: https://prismic.io/docs/field#select
-   */
-  section: prismic.SelectField<
-    | "TUDSaT Board"
-    | "RAPID - Rocket Team"
-    | "TRACE - CubeSat Team"
-    | "TUDSaT PR",
-    "filled"
-  >;
-
   /**
    * Highlight field in *Team Members → Team Members*
    *
@@ -478,6 +515,16 @@ export interface TeamMembersDocumentDataTeamMembersItem {
    * - **Documentation**: https://prismic.io/docs/field#image
    */
   image: prismic.ImageField<never>;
+
+  /**
+   * Section field in *Team Members → Team Members*
+   *
+   * - **Field Type**: Content Relationship
+   * - **Placeholder**: *None*
+   * - **API ID Path**: team_members.team_members[].section
+   * - **Documentation**: https://prismic.io/docs/field#link-content-relationship
+   */
+  section: prismic.ContentRelationshipField<"section">;
 }
 
 /**
@@ -519,6 +566,7 @@ export type AllDocumentTypes =
   | HeaderDocument
   | HomeDocument
   | PageDocument
+  | SectionDocument
   | SettingsDocument
   | SponsorsDocument
   | TeamMembersDocument;
@@ -1714,6 +1762,8 @@ declare module "@prismicio/client" {
       PageDocument,
       PageDocumentData,
       PageDocumentDataSlicesSlice,
+      SectionDocument,
+      SectionDocumentData,
       SettingsDocument,
       SettingsDocumentData,
       SettingsDocumentDataSocialsItem,

diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
@@ -7,7 +7,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
     <div
       ref={ref}
       className={cn(
-        "rounded-lg text-card-foreground shadow-sm backdrop-saturate-200 ring-2 ring-accent/90",
+        "rounded-lg text-card-foreground shadow-sm backdrop-saturate-200 outline-2 outline-accent/90 outline-none outline-offset-0",
         className,
       )}
       {...props}

diff --git a/src/slices/TeamMembers/index.tsx b/src/slices/TeamMembers/index.tsx
@@ -1,18 +1,11 @@
 import Bounded from "@/components/bounded";
-import { Icons } from "@/components/icons";
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Content } from "@prismicio/client";
+import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { isFilledRelatedData } from "@/lib/isFilledRelatedData";
+import { createClient } from "@/prismicio";
+import { ColorField, Content, isFilled } from "@prismicio/client";
 import { PrismicNextImage } from "@prismicio/next";
 import { SliceComponentProps } from "@prismicio/react";
-import { createClient } from "@/prismicio";
+import { cx } from "class-variance-authority";
 
 /**
  * Props for `TeamMembers`.
@@ -24,8 +17,10 @@ export type TeamMembersProps = SliceComponentProps<Content.TeamMembersSlice>;
  */
 const TeamMembers = async ({ slice }: TeamMembersProps) => {
   const client = createClient();
-  const teamMembers = await client.getSingle("team_members");
-  const sections = [...new Set(teamMembers.data.team_members.map((member) => member.section))];
+  const teamMembers = await client.getSingle("team_members", {
+    fetchLinks: ["section.name", "section.color"],
+  });
+  const sections = await client.getAllByType("section");
 
   return (
     <Bounded
@@ -35,14 +30,26 @@ const TeamMembers = async ({ slice }: TeamMembersProps) => {
     >
       {slice.variation === "full" ? (
         <div className="flex flex-col gap-32">
-          {sections.map((section) => (
-            <div key={section}>
-              <h2 className="mb-16 text-3xl font-bold">{section}</h2>
+          {sections.reverse().map((section) => (
+            <div key={section.data.name}>
+              <h2 className="mb-16 text-3xl font-bold">{section.data.name}</h2>
               <div className="m-auto grid gap-x-6 gap-y-32 grid-cols-1 md:grid-cols-3 w-full md:max-w-screen-lg place-items-center">
                 {teamMembers.data.team_members
-                  .filter((member) => member.section === section)
+                  .filter(
+                    (member) =>
+                      isFilledRelatedData(member.section, "section", "name") &&
+                      member.section.data.name === section.data.name,
+                  )
                   .map((member) => (
-                    <TeamMemberCard key={member.name} member={member} />
+                    <TeamMemberCard
+                      key={member.name}
+                      member={member}
+                      color={
+                        isFilledRelatedData(member.section, "section", "color")
+                          ? member.section.data.color
+                          : undefined
+                      }
+                    />
                   ))}
               </div>
             </div>
@@ -55,7 +62,15 @@ const TeamMembers = async ({ slice }: TeamMembersProps) => {
             {teamMembers.data.team_members
               .filter((member) => member.highlight)
               .map((member) => (
-                <TeamMemberCard key={member.name} member={member} />
+                <TeamMemberCard
+                  key={member.name}
+                  member={member}
+                  color={
+                    isFilledRelatedData(member.section, "section", "color")
+                      ? member.section.data.color
+                      : undefined
+                  }
+                />
               ))}
           </div>
         </>
@@ -66,9 +81,16 @@ const TeamMembers = async ({ slice }: TeamMembersProps) => {
 
 export default TeamMembers;
 
-function TeamMemberCard({ member }: { member: Content.TeamMembersDocumentDataTeamMembersItem }) {
+function TeamMemberCard({
+  member,
+  color,
+}: { member: Content.TeamMembersDocumentDataTeamMembersItem; color?: ColorField }) {
   return (
-    <Card key={member.name} className="w-64 h-full">
+    <Card
+      key={member.name}
+      className={"w-64 h-full"}
+      style={{ ...(isFilled.color(color) && { outlineColor: hexToRgba(color, 0.8) }) }}
+    >
       <PrismicNextImage
         field={member.image}
         width={150}
@@ -82,3 +104,11 @@ function TeamMemberCard({ member }: { member: Content.TeamMembersDocumentDataTea
     </Card>
   );
 }
+
+function hexToRgba(hex: string, opacity: number): string {
+  const hexValue = hex.replace("#", "");
+  const r = Number.parseInt(hexValue.substring(0, 2), 16);
+  const g = Number.parseInt(hexValue.substring(2, 4), 16);
+  const b = Number.parseInt(hexValue.substring(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}