Skip to content

Commit

Permalink
udpate team members card to add outline color and extract sections fo…
Browse files Browse the repository at this point in the history
…r more control
  • Loading branch information
IhsenBouallegue committed Jul 17, 2024
1 parent ad6f0f7 commit 6706da0
Show file tree
Hide file tree
Showing 5 changed files with 166 additions and 54 deletions.
38 changes: 38 additions & 0 deletions customtypes/section/index.json
Original file line number Diff line number Diff line change
@@ -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": ""
}
}
}
}
}
22 changes: 8 additions & 14 deletions customtypes/team_members/index.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand All @@ -56,6 +42,14 @@
"constraint": {},
"thumbnails": []
}
},
"section": {
"type": "Link",
"config": {
"label": "Section",
"select": "document",
"customtypes": ["section"]
}
}
}
}
Expand Down
84 changes: 67 additions & 17 deletions prismicio-types.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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*
*/
Expand Down Expand Up @@ -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*
*
Expand All @@ -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">;
}

/**
Expand Down Expand Up @@ -519,6 +566,7 @@ export type AllDocumentTypes =
| HeaderDocument
| HomeDocument
| PageDocument
| SectionDocument
| SettingsDocument
| SponsorsDocument
| TeamMembersDocument;
Expand Down Expand Up @@ -1714,6 +1762,8 @@ declare module "@prismicio/client" {
PageDocument,
PageDocumentData,
PageDocumentDataSlicesSlice,
SectionDocument,
SectionDocumentData,
SettingsDocument,
SettingsDocumentData,
SettingsDocumentDataSocialsItem,
Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
74 changes: 52 additions & 22 deletions src/slices/TeamMembers/index.tsx
Original file line number Diff line number Diff line change
@@ -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`.
Expand All @@ -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
Expand All @@ -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>
Expand All @@ -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>
</>
Expand All @@ -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}
Expand All @@ -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})`;
}

0 comments on commit 6706da0

Please sign in to comment.