75 lines
2.0 KiB
TypeScript
75 lines
2.0 KiB
TypeScript
import { Group, Stack, ThemeIcon, Text, Flex } from "@mantine/core";
|
|
import { Tournament } from "../../types";
|
|
import GlitchAvatar from "@/components/glitch-avatar";
|
|
import {
|
|
CalendarIcon,
|
|
MapPinIcon,
|
|
TrophyIcon,
|
|
UsersIcon,
|
|
} from "@phosphor-icons/react";
|
|
import { useMemo } from "react";
|
|
|
|
const Header = ({ tournament }: { tournament: Tournament }) => {
|
|
const tournamentStart = useMemo(
|
|
() => new Date(tournament.start_time),
|
|
[tournament.start_time]
|
|
);
|
|
|
|
return (
|
|
<Stack align="center" gap={16}>
|
|
<GlitchAvatar
|
|
name={tournament.name}
|
|
contain
|
|
src={
|
|
tournament.logo
|
|
? `/api/files/tournaments/${tournament.id}/${tournament.logo}`
|
|
: undefined
|
|
}
|
|
glitchSrc={
|
|
tournament.glitch_logo
|
|
? `/api/files/tournaments/${tournament.id}/${tournament.glitch_logo}`
|
|
: undefined
|
|
}
|
|
radius="md"
|
|
size={300}
|
|
px="xs"
|
|
withBorder={false}
|
|
>
|
|
<TrophyIcon size={32} />
|
|
</GlitchAvatar>
|
|
<Flex gap="xs" direction="column" justify="space-around" align="center">
|
|
{tournament.location && (
|
|
<Group gap="xs">
|
|
<ThemeIcon size="sm" variant="light" radius="sm">
|
|
<MapPinIcon size={14} />
|
|
</ThemeIcon>
|
|
<Text size="sm" c="dimmed">
|
|
{tournament.location}
|
|
</Text>
|
|
</Group>
|
|
)}
|
|
|
|
<Group gap="xs">
|
|
<ThemeIcon size="sm" variant="light" radius="sm">
|
|
<CalendarIcon size={14} />
|
|
</ThemeIcon>
|
|
<Text size="sm" c="dimmed">
|
|
{tournamentStart.toLocaleDateString(undefined, {
|
|
weekday: "short",
|
|
month: "short",
|
|
day: "numeric",
|
|
})}{" "}
|
|
at{" "}
|
|
{tournamentStart.toLocaleTimeString([], {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
})}
|
|
</Text>
|
|
</Group>
|
|
</Flex>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default Header;
|