Merge pull request #107 from su-its/fix/header/usercard-width

Fix/header/usercard width

typing-app/src/components/molecules/UserCard.tsx

@@ -1,33 +1,42 @@
 import React from "react";
-import { Avatar, Box, Text, HStack, VStack } from "@chakra-ui/react";
+import { Avatar, Text, HStack, VStack, Spacer } from "@chakra-ui/react";
+import type { StackProps } from "@chakra-ui/react";
 import { getCurrentUser } from "@/app/actions";
 import type { User } from "@/types/user";
 
-interface UserCardPresenterProps {
+interface UserCardPresenterProps extends StackProps {
   user?: User;
 }
 
-export const UserCardPresenter = ({ user }: UserCardPresenterProps) => {
+export const UserCardPresenter = ({ user, ...rest }: UserCardPresenterProps) => {
+  const props: StackProps = {
+    width: rest?.width ?? "18%",
+    ...rest,
+  };
+
   return (
-    <HStack spacing={4} bg="blue.600">
+    <HStack spacing={4} bg="blue.600" {...props}>
       <Avatar
         src={"https://www.shizuoka.ac.jp/cms/files/shizudai/MASTER/0100/uISrbYCb_VL033_r03.png"}
         boxSize="100px"
         borderRadius="0"
       />
-      <VStack align="start" paddingRight="8px">
-        <Text fontSize="lg" fontWeight="bold" color="white">
+      <Spacer />
+      <VStack align="start" overflow="hidden">
+        <Text fontSize="lg" fontWeight="bold" color="white" isTruncated width="90%">
           名前: {user ? user.handleName : "ログインしていません"}
         </Text>
-        <Text color="white">学籍番号: {user ? user.studentNumber : "未ログイン"}</Text>
+        <Text color="white" width="90%" isTruncated>
+          学籍番号: {user ? user.studentNumber : "未ログイン"}
+        </Text>
       </VStack>
     </HStack>
   );
 };
 
-const UserCard = async () => {
+const UserCard = async (props?: StackProps) => {
   const user = await getCurrentUser();
-  return <UserCardPresenter user={user} />;
+  return <UserCardPresenter user={user} {...props} />;
 };
 
 export default UserCard;

typing-app/src/components/organism/Header.tsx

@@ -10,7 +10,7 @@ const Header: React.FC = () => {
     <>
       <Flex alignItems="center" justifyContent="space-between">
         <Banner />
-        <UserCard />
+        <UserCard width="300px" />
       </Flex>
       <Separator />
     </>