kyle/flxn-app
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

profile and stats improvements

Browse Source
This commit is contained in:
yohlo
2025-09-13 23:05:35 -05:00
parent 4bc25fb0bc
commit d11e50d4ef
5 changed files with 171 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/features/players/components/profile/header.tsx
View File

@@ -20,12 +20,24 @@ const Header = ({ player }: HeaderProps) => {
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 px='xl' w='100%' align='self-end' gap='md'>
<Avatar name={name} size={125} />
<Flex px='lg' 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' order={2}>{name}</Title>
<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>