61 lines
1.4 KiB
TypeScript
61 lines
1.4 KiB
TypeScript
import {
|
|
Card,
|
|
CardFooter,
|
|
Code,
|
|
Container,
|
|
Divider,
|
|
Heading,
|
|
Image,
|
|
Stack,
|
|
Text,
|
|
} from "@chakra-ui/react";
|
|
import team from "../../data/team.json";
|
|
|
|
export function meta() {
|
|
return {
|
|
title: "Our Team - Car Crushers",
|
|
};
|
|
}
|
|
|
|
export default function () {
|
|
return (
|
|
<Container maxW="container.xl" pt="4vh">
|
|
<Heading textAlign="start">Our Team</Heading>
|
|
<br />
|
|
<Text textAlign="start">
|
|
Please respect our staff, and <u>do not send direct messages</u> or
|
|
friend requests in place of official channels.
|
|
</Text>
|
|
<br />
|
|
<div
|
|
style={{
|
|
display: "grid",
|
|
gap: "1rem",
|
|
gridTemplateColumns: "repeat(auto-fill, minmax(16rem, 1fr))",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
{team.map((member) => (
|
|
<Card borderRadius="36px" key={member.id} maxW="xs" p="12px">
|
|
<Image
|
|
alt={member.tag + "'s avatar"}
|
|
borderRadius="50%"
|
|
src={`/files/avatars/${member.id}.webp`}
|
|
/>
|
|
<Stack mb="8" mt="6" spacing="3">
|
|
<b>
|
|
<Heading size="md">{member.tag}</Heading>
|
|
</b>
|
|
<Text>{member.position}</Text>
|
|
</Stack>
|
|
<Divider />
|
|
<CardFooter justifyContent="center">
|
|
<Code>ID: {member.id}</Code>
|
|
</CardFooter>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
);
|
|
}
|