init

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

@@ -0,0 +1,42 @@
+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]);
+
+  return (
+    <>
+      <Flex px='xl' w='100%' align='self-end' gap='md'>
+        <Avatar name={name} size={125} />
+        <Flex align='center' justify='center' gap={4} pb={20} w='100%'>
+          <Title ta='center' order={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;