TeamMemberCard
This commit is contained in:
parent
7f88950f78
commit
4777b5f274
|
@ -18,7 +18,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
margin-top: 0;
|
margin-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.details {
|
.details {
|
||||||
|
|
|
@ -43,9 +43,9 @@ export const MiniEventCard: React.FC<Props> = ({
|
||||||
<div>{name}</div>
|
<div>{name}</div>
|
||||||
<div className={styles.nameSpacer}></div>
|
<div className={styles.nameSpacer}></div>
|
||||||
</h2>
|
</h2>
|
||||||
<p className={styles.info}>
|
<div className={styles.info}>
|
||||||
<EventSetting date={date} location={location} online={online} />
|
<EventSetting date={date} location={location} online={online} />
|
||||||
</p>
|
</div>
|
||||||
<p className={styles.shortDescription}>{short}</p>
|
<p className={styles.shortDescription}>{short}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -5,13 +5,21 @@ import { Image } from "./Image";
|
||||||
interface TeamMemberProps {
|
interface TeamMemberProps {
|
||||||
name: string;
|
name: string;
|
||||||
role: string;
|
role: string;
|
||||||
src: string;
|
image?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const TeamMember: React.FC<TeamMemberProps> = ({ name, role, src }) => {
|
export const TeamMember: React.FC<TeamMemberProps> = ({
|
||||||
|
name,
|
||||||
|
role,
|
||||||
|
image,
|
||||||
|
}) => {
|
||||||
return (
|
return (
|
||||||
<div className={styles.container}>
|
<div className={styles.container}>
|
||||||
<Image className={styles.img} src={src} alt={`${name} | ${role}`} />
|
<Image
|
||||||
|
className={styles.img}
|
||||||
|
src={image ?? "/images/team-member-placeholder.svg"}
|
||||||
|
alt={`Picture of ${name}`}
|
||||||
|
/>
|
||||||
<div className={styles.caption}>
|
<div className={styles.caption}>
|
||||||
<div className={styles.name}>{name}</div>
|
<div className={styles.name}>{name}</div>
|
||||||
<div className={styles.role}>{role}</div>
|
<div className={styles.role}>{role}</div>
|
||||||
|
|
|
@ -0,0 +1,114 @@
|
||||||
|
.card {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 126px auto;
|
||||||
|
grid-template-areas:
|
||||||
|
"picture name"
|
||||||
|
"picture role"
|
||||||
|
"picture description";
|
||||||
|
column-gap: 2rem;
|
||||||
|
row-gap: 0;
|
||||||
|
justify-items: start;
|
||||||
|
align-items: start;
|
||||||
|
|
||||||
|
max-width: 847px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picture {
|
||||||
|
grid-area: picture;
|
||||||
|
justify-self: center;
|
||||||
|
|
||||||
|
max-width: 126px;
|
||||||
|
max-height: 126px;
|
||||||
|
|
||||||
|
clip-path: circle(50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
grid-area: name;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
color: var(--blue-1);
|
||||||
|
font-size: 2.25rem;
|
||||||
|
line-height: 1.1;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.role {
|
||||||
|
grid-area: role;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
color: var(--purple-2);
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
grid-area: description;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
line-height: 1.875;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.card {
|
||||||
|
grid-template-columns: 90px auto;
|
||||||
|
column-gap: 1.375rem;
|
||||||
|
|
||||||
|
max-width: 460px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picture {
|
||||||
|
max-width: 90px;
|
||||||
|
max-height: 90px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name,
|
||||||
|
.role,
|
||||||
|
.description {
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* TODO: Use the correct mobile styles from figma
|
||||||
|
@media only screen and (max-width: 375px) {
|
||||||
|
.card {
|
||||||
|
grid-template-columns: 70px auto;
|
||||||
|
grid-template-rows: auto calc(0.875rem * 1.5 + 0.75rem) auto;
|
||||||
|
grid-template-areas:
|
||||||
|
"picture name"
|
||||||
|
"picture role"
|
||||||
|
"description description";
|
||||||
|
column-gap: 1.4375rem;
|
||||||
|
align-items: end;
|
||||||
|
|
||||||
|
max-width: 190px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picture {
|
||||||
|
max-width: 70px;
|
||||||
|
max-height: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name,
|
||||||
|
.role,
|
||||||
|
.description {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.role {
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
justify-self: top;
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
margin-left: 0.75rem;
|
||||||
|
}
|
||||||
|
} */
|
|
@ -0,0 +1,27 @@
|
||||||
|
import React from "react";
|
||||||
|
import { Image } from "./Image";
|
||||||
|
import styles from "./TeamMemberCard.module.css";
|
||||||
|
|
||||||
|
interface TeamMemberCardProps {
|
||||||
|
name: string;
|
||||||
|
role: string;
|
||||||
|
image?: string; // path to image of person, relative to public directory
|
||||||
|
children: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TeamMemberCard(props: TeamMemberCardProps) {
|
||||||
|
return (
|
||||||
|
<article className={styles.card}>
|
||||||
|
<div className={styles.picture}>
|
||||||
|
<Image
|
||||||
|
className={styles.image}
|
||||||
|
src={props.image ?? "/images/team-member-placeholder.svg"}
|
||||||
|
alt={`Picture of ${props.name}`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<h1 className={styles.name}>{props.name}</h1>
|
||||||
|
<h2 className={styles.role}>{props.role}</h2>
|
||||||
|
<div className={styles.description}>{props.children}</div>
|
||||||
|
</article>
|
||||||
|
);
|
||||||
|
}
|
|
@ -15,13 +15,17 @@ import AltTab, {
|
||||||
import UnavailableContent, {
|
import UnavailableContent, {
|
||||||
metadata as unavailableMetadata,
|
metadata as unavailableMetadata,
|
||||||
} from "../content/playground/unavailable.news.mdx";
|
} from "../content/playground/unavailable.news.mdx";
|
||||||
import { metadata as teamMemberMetadata } from "../content/playground/demo.teammember.mdx";
|
import { metadata as dogeMetadata } from "../content/playground/doge.team-member.mdx";
|
||||||
|
import CodeyInfo, {
|
||||||
|
metadata as codeyMetadata,
|
||||||
|
} from "../content/playground/codey.team-member.mdx";
|
||||||
|
|
||||||
import { MiniEventCard } from "./MiniEventCard";
|
import { MiniEventCard } from "./MiniEventCard";
|
||||||
import { NewsCard } from "./NewsCard";
|
import { NewsCard } from "./NewsCard";
|
||||||
import { EventCard } from "./EventCard";
|
import { EventCard } from "./EventCard";
|
||||||
import { EventDescriptionCard } from "./EventDescriptionCard";
|
import { EventDescriptionCard } from "./EventDescriptionCard";
|
||||||
import { TeamMember } from "./TeamMember";
|
import { TeamMember } from "./TeamMember";
|
||||||
|
import { TeamMemberCard } from "./TeamMemberCard";
|
||||||
|
|
||||||
const events = [
|
const events = [
|
||||||
{ Content: OOTBReact, metadata: OOTBReactEventMetadata },
|
{ Content: OOTBReact, metadata: OOTBReactEventMetadata },
|
||||||
|
@ -98,17 +102,27 @@ export function TeamMemberDemo() {
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
<div className={styles.teamMembers}>
|
<div className={styles.teamMembers}>
|
||||||
<TeamMember {...teamMemberMetadata} />
|
<TeamMember {...dogeMetadata} />
|
||||||
<TeamMember {...teamMemberMetadata} />
|
<TeamMember {...dogeMetadata} />
|
||||||
<TeamMember {...teamMemberMetadata} />
|
<TeamMember {...dogeMetadata} />
|
||||||
<TeamMember {...teamMemberMetadata} />
|
<TeamMember {...dogeMetadata} />
|
||||||
<TeamMember {...teamMemberMetadata} />
|
<TeamMember {...dogeMetadata} />
|
||||||
<TeamMember {...teamMemberMetadata} />
|
<TeamMember {...dogeMetadata} />
|
||||||
<TeamMember {...teamMemberMetadata} />
|
<TeamMember {...dogeMetadata} />
|
||||||
<TeamMember {...teamMemberMetadata} />
|
<TeamMember {...dogeMetadata} />
|
||||||
<TeamMember {...teamMemberMetadata} />
|
<TeamMember {...dogeMetadata} />
|
||||||
<TeamMember {...teamMemberMetadata} />
|
<TeamMember {...dogeMetadata} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function TeamMemberCardDemo() {
|
||||||
|
return (
|
||||||
|
<div className={styles.teamMemberCardDemo}>
|
||||||
|
<TeamMemberCard {...codeyMetadata}>
|
||||||
|
<CodeyInfo />
|
||||||
|
</TeamMemberCard>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
|
@ -0,0 +1,9 @@
|
||||||
|
export const metadata = {
|
||||||
|
name: "Codey",
|
||||||
|
role: "Mascot",
|
||||||
|
image: "/images/playground/codeyHi.png"
|
||||||
|
}
|
||||||
|
|
||||||
|
The one, the only, Codey! Codey is ecstatic to be your mascot for this term.
|
||||||
|
Codey loves programming and playing on their laptop. You can often find Codey
|
||||||
|
posing for event promo graphics, or chilling in the CSC discord.
|
|
@ -1,5 +0,0 @@
|
||||||
export const metadata = {
|
|
||||||
name: "Name Name",
|
|
||||||
role: "Role",
|
|
||||||
src: "images/playground/team-member.png"
|
|
||||||
}
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
export const metadata = {
|
||||||
|
name: "Woof Woof",
|
||||||
|
role: "Doge",
|
||||||
|
image: "/images/playground/doge.jpg"
|
||||||
|
}
|
|
@ -34,13 +34,13 @@ declare module "*.news.mdx" {
|
||||||
export default ReactComponent;
|
export default ReactComponent;
|
||||||
}
|
}
|
||||||
|
|
||||||
declare module "*.teammember.mdx" {
|
declare module "*.team-member.mdx" {
|
||||||
import { ComponentType } from "react";
|
import { ComponentType } from "react";
|
||||||
|
|
||||||
interface TeamMemberMetadata {
|
interface TeamMemberMetadata {
|
||||||
name: string;
|
name: string;
|
||||||
role: string;
|
role: string;
|
||||||
src: string;
|
image?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const ReactComponent: ComponentType;
|
const ReactComponent: ComponentType;
|
||||||
|
|
|
@ -3,9 +3,12 @@ import {
|
||||||
NewsCardDemo,
|
NewsCardDemo,
|
||||||
EventDescriptionCardDemo,
|
EventDescriptionCardDemo,
|
||||||
EventCardDemo,
|
EventCardDemo,
|
||||||
TeamMemberDemo
|
TeamMemberDemo,
|
||||||
|
TeamMemberCardDemo,
|
||||||
} from "../components/playground";
|
} from "../components/playground";
|
||||||
|
|
||||||
|
import { TeamMemberCard } from "../components/TeamMemberCard";
|
||||||
|
|
||||||
# Playground
|
# Playground
|
||||||
|
|
||||||
## `<MiniEventCard />`
|
## `<MiniEventCard />`
|
||||||
|
@ -49,3 +52,12 @@ The `<TeamMember />` component has an image of the team member along with their
|
||||||
It is used on the Meet the Team page for non executive members.
|
It is used on the Meet the Team page for non executive members.
|
||||||
|
|
||||||
<TeamMemberDemo />
|
<TeamMemberDemo />
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## `<TeamMemberCard />`
|
||||||
|
|
||||||
|
The `<TeamMemberCard />` component is used on the "Meet the Team!" page to
|
||||||
|
display information about the execs: prez, VP, trez, AVP, and syscom overlord.
|
||||||
|
|
||||||
|
<TeamMemberCardDemo />
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
After Width: | Height: | Size: 63 KiB |
Binary file not shown.
Before Width: | Height: | Size: 210 B |
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="512" height="512" fill="#5CAFF9" fill-opacity="0.2"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 174 B |
Loading…
Reference in New Issue