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> ); }