Remix migration
This commit is contained in:
54
app/routes/team.tsx
Normal file
54
app/routes/team.tsx
Normal file
@ -0,0 +1,54 @@
|
||||
import {
|
||||
Card,
|
||||
CardFooter,
|
||||
Code,
|
||||
Container,
|
||||
Divider,
|
||||
Heading,
|
||||
Image,
|
||||
Stack,
|
||||
Text,
|
||||
} from "@chakra-ui/react";
|
||||
import team from "../../data/team.json";
|
||||
|
||||
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 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>
|
||||
);
|
||||
}
|
Reference in New Issue
Block a user