app
routes
_index.tsx
about.tsx
admin-application.tsx
appeals.tsx
book-event.tsx
data-transfer.tsx
data-transfer_.complete.tsx
data-transfer_.destination-account.tsx
data-transfer_.start.tsx
delete-account.tsx
et-members.tsx
et-members_.strikes_.$uid.tsx
events-team.tsx
hammer.tsx
me.tsx
mod-queue.tsx
privacy.tsx
report.tsx
rpserver.tsx
support.tsx
team.tsx
terms.tsx
styles
context.tsx
createEmotionCache.ts
entry.client.tsx
entry.server.tsx
root.tsx
components
data
functions
public
.gitignore
.node-version
.prettierignore
OFL.txt
README.md
emotion-server.js
index.css
index.d.ts
package-lock.json
package.json
remix.config.js
server.ts
theme.ts
tsconfig.json
63 lines
1.5 KiB
TypeScript
63 lines
1.5 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>
|
|
);
|
|
}
|