facehash avatars

src/features/players/components/league-head-to-head.tsx

@@ -5,7 +5,7 @@ import { useAllPlayerStats } from "../queries";
 import { useSheet } from "@/hooks/use-sheet";
 import Sheet from "@/components/sheet/sheet";
 import PlayerHeadToHeadSheet from "./player-head-to-head-sheet";
-import Avatar from "@/components/avatar";
+import PlayerAvatar from "@/components/player-avatar";
 
 const LeagueHeadToHead = () => {
   const [player1Id, setPlayer1Id] = useState<string | null>(null);
@@ -89,7 +89,7 @@ const LeagueHeadToHead = () => {
                 {player1Id ? (
                   <>
                     <Stack gap={4} align="center" style={{ flex: 1 }}>
-                      <Avatar name={player1Name} size={36} />
+                      <PlayerAvatar name={player1Name} size={36} disableFullscreen />
                       <Text size="xs" fw={600} ta="center" lineClamp={1}>
                         {player1Name}
                       </Text>
@@ -110,7 +110,7 @@ const LeagueHeadToHead = () => {
                   </>
                 ) : (
                   <Stack gap={4} align="center">
-                    <Avatar size={36} />
+                    <PlayerAvatar size={36} disableFullscreen />
                     <Text size="xs" c="dimmed" fw={500}>
                       Player 1
                     </Text>
@@ -145,7 +145,7 @@ const LeagueHeadToHead = () => {
                 {player2Id ? (
                   <>
                     <Stack gap={4} align="center" style={{ flex: 1 }}>
-                      <Avatar name={player2Name} size={36} />
+                      <PlayerAvatar name={player2Name} size={36} disableFullscreen />
                       <Text size="xs" fw={600} ta="center" lineClamp={1}>
                         {player2Name}
                       </Text>
@@ -166,7 +166,7 @@ const LeagueHeadToHead = () => {
                   </>
                 ) : (
                   <Stack gap={4} align="center">
-                    <Avatar size={36} />
+                    <PlayerAvatar size={36} disableFullscreen />
                     <Text size="xs" c="dimmed" fw={500}>
                       Player 2
                     </Text>
@@ -241,7 +241,7 @@ const LeagueHeadToHead = () => {
                     },
                   }}
                 >
-                  <Avatar name={player.player_name} size={44} />
+                  <PlayerAvatar name={player.player_name} size={44} disableFullscreen />
                   <Box style={{ flex: 1, minWidth: 0 }}>
                     <Text size="sm" fw={600} truncate>
                       {player.player_name}

src/features/players/components/player-list.tsx

@@ -1,6 +1,6 @@
 import { List, ListItem, Skeleton, Text } from "@mantine/core";
 import { useNavigate } from "@tanstack/react-router";
-import Avatar from "@/components/avatar";
+import PlayerAvatar from "@/components/player-avatar";
 import { Player } from "@/features/players/types";
 import { useCallback } from "react";
 
@@ -29,7 +29,7 @@ const PlayerList = ({ players, loading = false }: PlayerListProps) => {
     {players?.map((player) => (
       <ListItem key={player.id}
         py='xs'
-        icon={<Avatar size={40} name={`${player.first_name} ${player.last_name}`} />}
+        icon={<PlayerAvatar size={40} name={`${player.first_name} ${player.last_name}`} disableFullscreen />}
         style={{ cursor: 'pointer' }}
         onClick={() => handleClick(player.id)}
       >

src/features/players/components/player-stats-table.tsx

@@ -22,7 +22,7 @@ import {
   InfoIcon,
 } from "@phosphor-icons/react";
 import { PlayerStats } from "../types";
-import Avatar from "@/components/avatar";
+import PlayerAvatar from "@/components/player-avatar";
 import { useNavigate } from "@tanstack/react-router";
 import { useAllPlayerStats } from "../queries";
 
@@ -93,7 +93,7 @@ const PlayerListItem = memo(({ stat, onPlayerClick, mmr, onRegisterViewport, onU
         }}
       >
         <Group p={0} gap="sm" align="center" w="100%" wrap="nowrap" style={{ overflow: 'hidden' }}>
-          <Avatar name={stat.player_name} size={40} style={{ flexShrink: 0 }} />
+          <PlayerAvatar name={stat.player_name} size={40} style={{ flexShrink: 0 }} disableFullscreen />
           <Stack gap={2} style={{ flexGrow: 1, overflow: 'hidden', minWidth: 0 }}>
             <Group gap='xs'>
               <Text size="sm" fw={600}>

src/features/players/components/profile/header.tsx

@@ -4,7 +4,7 @@ import { Flex, Title, ActionIcon, Stack, Button, Box } from "@mantine/core";
 import { PencilIcon, FootballHelmetIcon } from "@phosphor-icons/react";
 import { useMemo } from "react";
 import NameUpdateForm from "./name-form";
-import Avatar from "@/components/avatar";
+import PlayerAvatar from "@/components/player-avatar";
 import { useSheet } from "@/hooks/use-sheet";
 import { Player } from "../../types";
 import PlayerHeadToHeadSheet from "../player-head-to-head-sheet";
@@ -41,7 +41,7 @@ const Header = ({ player }: HeaderProps) => {
     <>
       <Stack gap="sm" align="center" pt="md">
         <Flex h="15dvh" px='xl' w='100%' align='self-end' gap='md'>
-          <Avatar name={name} size={100} />
+          <PlayerAvatar 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={nameSheet.open}>