player h2h

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

@@ -1,23 +1,29 @@
 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 { 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 { useSheet } from "@/hooks/use-sheet";
 import { Player } from "../../types";
+import PlayerHeadToHeadSheet from "../player-head-to-head-sheet";
 
 interface HeaderProps {
   player: Player;
 }
 
 const Header = ({ player }: HeaderProps) => {
-  const sheet = useSheet();
+  const nameSheet = useSheet();
+  const h2hSheet = 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 authUserName = useMemo(() => {
+    if (!authUser) return "";
+    return `${authUser.first_name} ${authUser.last_name}`;
+  }, [authUser]);
 
   const fontSize = useMemo(() => {
     const baseSize = 28;
@@ -33,19 +39,62 @@ const Header = ({ player }: HeaderProps) => {
 
   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>
+      <Stack gap="sm" align="center" pt="md">
+        <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={nameSheet.open}>
+              <PencilIcon size={20} />
+            </ActionIcon>
+            <ActionIcon
+              variant="subtle"
+              size="sm"
+              radius="xl"
+              onClick={h2hSheet.open}
+              w={40}
+              display={!owner ? 'block' : 'none'}
+            >
+              <Box style={{ position: 'relative', width: 27.5, height: 16 }}>
+                <FootballHelmetIcon
+                  size={14}
+                  style={{
+                    position: 'absolute',
+                    left: 0,
+                    top: 0,
+                    transform: 'rotate(25deg)'
+                  }}
+                />
+                <FootballHelmetIcon
+                  size={14}
+                  style={{
+                    position: 'absolute',
+                    right: 0,
+                    top: 0,
+                    transform: 'scaleX(-1) rotate(25deg)'
+                  }}
+                />
+              </Box>
+            </ActionIcon>
+          </Flex>
         </Flex>
-      </Flex>
+      </Stack>
 
-      <Sheet title='Update Name' {...sheet.props}>
-        <NameUpdateForm player={player} toggle={sheet.toggle} />
+      <Sheet title='Update Name' {...nameSheet.props}>
+        <NameUpdateForm player={player} toggle={nameSheet.toggle} />
       </Sheet>
+
+      {!owner && authUser && (
+        <Sheet title="Head to Head" {...h2hSheet.props}>
+          <PlayerHeadToHeadSheet
+            player1Id={authUser.id}
+            player1Name={authUserName}
+            player2Id={player.id}
+            player2Name={name}
+            isOpen={h2hSheet.props.opened}
+          />
+        </Sheet>
+      )}
     </>
   )
 };