63 lines
2.2 KiB
JavaScript
63 lines
2.2 KiB
JavaScript
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
|
|
const adminTeam = [
|
|
{ name: 'Chris Chrome', ext: '1000', image: '/chris.webp', discord: '@chrischrome' },
|
|
{ name: 'Cayden', ext: '1001', image: '/cayden.webp', discord: '@freepbx' },
|
|
{ name: 'Nick', ext: '1036', image: '/nick.webp', discord: '@gamewell' },
|
|
{ name: 'Faux_Lemons', ext: '1011', image: '/faux_lemons.webp', discord: '@faux_lemons' },
|
|
]
|
|
|
|
const modTeam = [
|
|
{ name: 'ashton', ext: '1007', image: '/ashton.webp', discord: '@ashtoncarlson' },
|
|
{ name: 'Maddix', ext: '1019', image: '/maddix.webp', discord: '@maddix6859' },
|
|
{ name: 'rocord', ext: '2222', image: '/rocord.webp', discord: '@rocord01' },
|
|
]
|
|
|
|
function TeamMember({ name, ext, image, discord }) {
|
|
return (
|
|
(<Card className="bg-gray-950 text-white">
|
|
<CardHeader className="flex flex-row items-center gap-4 space-y-0">
|
|
<Avatar className="h-14 w-14">
|
|
<AvatarImage src={image} alt={name} />
|
|
<AvatarFallback>{name[0]}</AvatarFallback>
|
|
</Avatar>
|
|
<div>
|
|
<CardTitle>{name}</CardTitle>
|
|
<div className="text-sm text-gray-400">{discord}</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-sm text-gray-300">x{ext}</div>
|
|
</CardContent>
|
|
</Card>)
|
|
);
|
|
}
|
|
|
|
export default function Team() {
|
|
return (
|
|
(<section id="team" className="container py-24">
|
|
<h2 className="mb-12 text-center text-3xl font-bold text-white">Our Team</h2>
|
|
<div className="space-y-12">
|
|
<div>
|
|
<h3 className="mb-4 text-2xl font-semibold text-gray-200">Administration Team</h3>
|
|
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
|
{adminTeam.map((member) => (
|
|
<TeamMember key={member.ext} {...member} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 className="mb-4 text-2xl font-semibold text-gray-200">Moderation Team</h3>
|
|
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
{modTeam.map((member) => (
|
|
<TeamMember key={member.ext} {...member} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>)
|
|
);
|
|
}
|
|
|