53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
import Sheet from "@/components/sheet/sheet";
|
|
import { useAuth } from "@/contexts/auth-context";
|
|
import { Flex, Title, ActionIcon } from "@mantine/core";
|
|
import { PencilIcon } from "@phosphor-icons/react";
|
|
import { useMemo } from "react";
|
|
import NameUpdateForm from "./name-form";
|
|
import Avatar from "@/components/avatar";
|
|
import { useSheet } from "@/hooks/use-sheet";
|
|
import { Player } from "../../types";
|
|
|
|
interface HeaderProps {
|
|
player: Player;
|
|
}
|
|
|
|
const Header = ({ player }: HeaderProps) => {
|
|
const sheet = useSheet();
|
|
const { user: authUser } = useAuth();
|
|
|
|
const owner = useMemo(() => authUser?.id === player.id, [authUser?.id, player.id]);
|
|
const name = useMemo(() => `${player.first_name} ${player.last_name}`, [player.first_name, player.last_name]);
|
|
|
|
const fontSize = useMemo(() => {
|
|
const baseSize = 24;
|
|
const maxLength = 20;
|
|
|
|
if (name.length <= maxLength) {
|
|
return `${baseSize}px`;
|
|
}
|
|
|
|
const scaleFactor = Math.max(0.6, maxLength / name.length);
|
|
return `${Math.floor(baseSize * scaleFactor)}px`;
|
|
}, [name]);
|
|
|
|
return (
|
|
<>
|
|
<Flex h="15dvh" px='xl' w='100%' align='self-end' gap='md'>
|
|
<Avatar name={name} size={100} />
|
|
<Flex align='center' justify='center' gap={4} pb={20} w='100%'>
|
|
<Title ta='center' style={{ fontSize, lineHeight: 1.2 }}>{name}</Title>
|
|
<ActionIcon display={owner ? 'block' : 'none'} radius='xl' variant='subtle' onClick={sheet.open}>
|
|
<PencilIcon size={20} />
|
|
</ActionIcon>
|
|
</Flex>
|
|
</Flex>
|
|
|
|
<Sheet title='Update Name' {...sheet.props}>
|
|
<NameUpdateForm player={player} toggle={sheet.toggle} />
|
|
</Sheet>
|
|
</>
|
|
)
|
|
};
|
|
|
|
export default Header; |