Merge branch 'main' into add_biome_lefthook

hackdays-io · Jan 9, 2025 · dd94c29 · dd94c29
2 parents 2af5841 + 4d856cc
commit dd94c29
Show file tree

Hide file tree

Showing 18 changed files with 984 additions and 141 deletions.
diff --git a/pkgs/frontend/app/components/PageHeader.tsx b/pkgs/frontend/app/components/PageHeader.tsx
@@ -1,4 +1,4 @@
-import { HStack, IconButton, Text } from "@chakra-ui/react";
+import { Box, HStack, IconButton } from "@chakra-ui/react";
 import { useNavigate } from "@remix-run/react";
 import { type ReactNode, useCallback } from "react";
 import { FaChevronLeft } from "react-icons/fa6";
@@ -31,7 +31,7 @@ export const PageHeader: React.FC<Props> = ({ title, backLink }) => {
       >
         <FaChevronLeft />
       </IconButton>
-      <Text>{title}</Text>
+      <Box>{title}</Box>
     </HStack>
   );
 };
diff --git a/pkgs/frontend/app/components/common/CommonIcon.tsx b/pkgs/frontend/app/components/common/CommonIcon.tsx
@@ -22,6 +22,7 @@ export const CommonIcon = ({
 
   return (
     <Box
+      as="span"
       height={size}
       width={size}
       display="flex"

diff --git a/pkgs/frontend/app/components/icon/UserIcon.tsx b/pkgs/frontend/app/components/icon/UserIcon.tsx
@@ -11,6 +11,7 @@ export const UserIcon = ({ userImageUrl, size = "full" }: UserIconProps) => {
     <CommonIcon
       imageUrl={userImageUrl}
       size={size}
+      borderRadius="full"
       fallbackIconComponent={
         <FaCircleUser
           style={{

diff --git a/pkgs/frontend/app/components/roles/HolderDetail.tsx b/pkgs/frontend/app/components/roles/HolderDetail.tsx
@@ -0,0 +1,211 @@
+import { FC, useMemo } from "react";
+import { HatsDetailSchama } from "types/hats";
+import { RoleIcon } from "../icon/RoleIcon";
+import {
+  Box,
+  Heading,
+  HStack,
+  Icon,
+  List,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
+import { Link } from "@remix-run/react";
+import { UserIcon } from "../icon/UserIcon";
+import { ipfs2https } from "utils/ipfs";
+import { FaChevronLeft, FaLink } from "react-icons/fa6";
+import { abbreviateAddress } from "utils/wallet";
+import dayjs from "dayjs";
+import { PageHeader } from "../PageHeader";
+
+interface HolderDetailProps {
+  detail?: HatsDetailSchama;
+  imageUri?: string;
+  treeId?: string;
+  hatId?: string;
+  wearerId?: string;
+  wearerName?: string;
+  wearerIcon?: string;
+  isActive?: boolean;
+  woreTime?: number;
+  wearingElapsedTime?: number;
+}
+
+export const RoleName: FC<HolderDetailProps> = ({ detail, treeId }) => (
+  <PageHeader
+    title={
+      detail?.data.name ? (
+        detail.data.name
+      ) : (
+        <Box as="span" fontStyle="italic" color="gray.400">
+          No name
+        </Box>
+      )
+    }
+  />
+);
+
+export const RoleNameWithWearer: FC<HolderDetailProps> = ({
+  detail,
+  wearerId,
+  wearerName,
+  wearerIcon,
+}) => (
+  <PageHeader
+    title={
+      detail?.data.name ? (
+        <HStack>
+          <Box fontWeight="bold" fontSize="lg" mr={3}>
+            {detail.data.name}
+          </Box>
+          <UserIcon userImageUrl={ipfs2https(wearerIcon)} size={5} />
+          {wearerName ? wearerName : abbreviateAddress(wearerId || "")}
+        </HStack>
+      ) : (
+        <Box as="span" fontStyle="italic" color="gray.400">
+          No name
+        </Box>
+      )
+    }
+  />
+);
+
+export const ActiveState: FC<HolderDetailProps> = ({
+  isActive,
+  woreTime,
+  wearingElapsedTime,
+}) => {
+  const formattedWoreTime = useMemo(() => {
+    if (!woreTime) return;
+    return dayjs.unix(woreTime).format("YYYY/MM/DD");
+  }, [woreTime]);
+
+  const formattedWearingElapsedTime = useMemo(() => {
+    if (!wearingElapsedTime) return;
+    return Math.floor(wearingElapsedTime / 86400);
+  }, [wearingElapsedTime]);
+
+  return (
+    <HStack mt={4} mb={6}>
+      {isActive ? (
+        <Box
+          width="fit"
+          paddingX={4}
+          paddingY={2}
+          rounded="md"
+          bgColor="blue.400"
+          fontWeight="medium"
+          fontSize="sm"
+        >
+          Active
+        </Box>
+      ) : (
+        <Box
+          width="fit"
+          paddingX={4}
+          paddingY={2}
+          rounded="md"
+          bgColor="gray.200"
+          fontWeight="medium"
+          fontSize="sm"
+        >
+          Inactive
+        </Box>
+      )}
+      {formattedWoreTime && formattedWearingElapsedTime && (
+        <Box fontSize="sm">
+          {isActive && (
+            <Text>
+              Activated on{" "}
+              <Text as="span" fontWeight="medium">
+                {formattedWoreTime}
+              </Text>
+            </Text>
+          )}
+          <Text>
+            Active in{" "}
+            <Text as="span" fontWeight="medium">
+              {formattedWearingElapsedTime}days
+            </Text>
+          </Text>
+        </Box>
+      )}
+    </HStack>
+  );
+};
+
+export const HatDetail: FC<HolderDetailProps> = ({ detail, imageUri }) => (
+  <Box>
+    <HStack alignItems="start" my={4} columnGap={4}>
+      <Box>
+        <RoleIcon roleImageUrl={imageUri} size={20} />
+      </Box>
+      <VStack gap={4} alignItems="start">
+        <Box>
+          <Heading fontSize="lg">説明</Heading>
+
+          <Text fontSize="sm" color="gray.600">
+            {detail?.data.description ? (
+              detail.data.description
+            ) : (
+              <Text as="span" fontStyle="italic" color="gray.400" fontSize="md">
+                No responsibilities
+              </Text>
+            )}
+            {detail?.data.description}
+          </Text>
+        </Box>
+
+        <Box>
+          <Heading fontSize="lg">役割</Heading>
+          {(detail?.data.responsabilities?.length ?? 0 > 0) ? (
+            <List.Root pl={5} listStyle="disc">
+              {detail?.data.responsabilities?.map((r) => (
+                <List.Item key={r.label}>
+                  <Text fontWeight="bold">{r.label}</Text>
+                  <Text fontSize="sm">{r.description}</Text>
+                  {r.link && (
+                    <Box fontSize="sm" as="span" color="blue.500">
+                      <Link target="_blank" to={r.link}>
+                        リンク
+                      </Link>
+                    </Box>
+                  )}
+                </List.Item>
+              ))}
+            </List.Root>
+          ) : (
+            <Text fontStyle="italic" color="gray.400" fontSize="md">
+              No responsibilities
+            </Text>
+          )}
+        </Box>
+
+        <Box>
+          <Heading fontSize="lg">権限</Heading>
+          {(detail?.data.authorities?.length ?? 0 > 0) ? (
+            <List.Root pl={5} listStyle="disc">
+              {detail?.data.authorities?.map((a) => (
+                <List.Item key={a.label}>
+                  <Text fontWeight="bold">{a.label}</Text>
+                  <Text fontSize="sm">{a.description}</Text>
+                  {a.link && (
+                    <Box fontSize="sm" as="span" color="blue.500">
+                      <Link target="_blank" to={a.link}>
+                        リンク
+                      </Link>
+                    </Box>
+                  )}
+                </List.Item>
+              ))}
+            </List.Root>
+          ) : (
+            <Text fontStyle="italic" color="gray.400" fontSize="md">
+              No authorities
+            </Text>
+          )}
+        </Box>
+      </VStack>
+    </HStack>
+  </Box>
+);
diff --git a/pkgs/frontend/app/components/roles/RoleTag.tsx b/pkgs/frontend/app/components/roles/RoleTag.tsx
@@ -15,9 +15,9 @@ export const RoleTag: FC<BasicRoleProps> = ({
   bgColor = "yellow.400",
 }) => {
   return (
-    <HStack rounded="md" backgroundColor={bgColor} gap={1}>
+    <HStack rounded="md" backgroundColor={bgColor} gap={1} overflow="hidden">
       <RoleIcon size="30px" roleImageUrl={imageUri} borderRadius="md" />
-      <Text pl={1} pr={2}>
+      <Text pl={1} pr={2} fontSize="sm">
         {detail?.data?.name}
       </Text>
     </HStack>