wip: SHD

pkgs/frontend/app/components/ContentContainer.tsx

@@ -0,0 +1,18 @@
+import { Box } from "@chakra-ui/react";
+
+export const ContentContainer = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+    >
+      {children}
+    </Box>
+  );
+};

pkgs/frontend/app/components/InputDescription.tsx

@@ -0,0 +1,21 @@
+import { Box } from "@chakra-ui/react";
+import { CommonTextArea } from "./common/CommonTextarea";
+
+export const InputDescription = ({
+  description,
+  setDescription,
+}: {
+  description: string;
+  setDescription: (description: string) => void;
+}) => {
+  return (
+    <Box minH="100px" w="100%" mt={6}>
+      <CommonTextArea
+        minHeight="125px"
+        placeholder="Description"
+        value={description}
+        onChange={(e) => setDescription(e.target.value)}
+      />
+    </Box>
+  );
+};

pkgs/frontend/app/components/InputImage.tsx

@@ -0,0 +1,63 @@
+import { Box, Input, Text } from "@chakra-ui/react";
+import { CommonIcon } from "./common/CommonIcon";
+import { HiOutlinePlus } from "react-icons/hi2";
+
+const EmptyImage = () => {
+  return (
+    <Box
+      borderRadius="3xl"
+      border="1px solid"
+      borderColor="#1e1e1e"
+      bg="#e9ecef"
+      p={5}
+      w={200}
+      h={200}
+    >
+      <Box
+        display="flex"
+        flexDirection="column"
+        justifyContent="center"
+        alignItems="center"
+        w="33%"
+        mx="auto"
+        mt={9}
+        mb={1}
+      >
+        <HiOutlinePlus size="full" />
+      </Box>
+      <Text textAlign="center">画像を選択</Text>
+    </Box>
+  );
+};
+
+export const InputImage = ({
+  imageFile,
+  setImageFile,
+}: {
+  imageFile: File | null;
+  setImageFile: (file: File | null) => void;
+}) => {
+  return (
+    <Box as="label" cursor="pointer" m="100px auto 40px">
+      <Input
+        type="file"
+        accept="image/*"
+        display="none"
+        onChange={(e) => {
+          const file = e.target.files?.[0];
+          if (file && file.type.startsWith("image/")) {
+            setImageFile(file);
+          } else {
+            alert("画像ファイルを選択してください");
+          }
+        }}
+      />
+      <CommonIcon
+        imageUrl={imageFile ? URL.createObjectURL(imageFile) : undefined}
+        fallbackIconComponent={<EmptyImage />}
+        size={200}
+        borderRadius="3xl"
+      />
+    </Box>
+  );
+};

pkgs/frontend/app/components/InputName.tsx

@@ -0,0 +1,21 @@
+import { Box } from "@chakra-ui/react";
+import { CommonInput } from "./common/CommonInput";
+
+export const InputName = ({
+  name,
+  setName,
+}: {
+  name: string;
+  setName: (name: string) => void;
+}) => {
+  return (
+    <Box w="100%" mt={8}>
+      <CommonInput
+        minHeight="45px"
+        placeholder="Name"
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+      />
+    </Box>
+  );
+};

pkgs/frontend/app/routes/$treeId_.roles_.new.tsx

@@ -1,17 +1,139 @@
-import { FC } from "react";
+import { FC, useState } from "react";
 import { useParams } from "@remix-run/react";
-import { Box, Text } from "@chakra-ui/react";
+import { Box, Button, Float, Text } from "@chakra-ui/react";
+import { InputImage } from "~/components/InputImage";
+import { useUploadImageFileToIpfs } from "hooks/useIpfs";
+import { ContentContainer } from "~/components/ContentContainer";
+import { InputName } from "~/components/InputName";
+import { InputDescription } from "~/components/InputDescription";
+import { CommonInput } from "~/components/common/CommonInput";
+import { BasicButton } from "~/components/BasicButton";
+
+const SectionHeading: FC<{ children: React.ReactNode }> = ({ children }) => (
+  <Text mt={7}>{children}</Text>
+);
+
+const PlusButton: FC<{ onClick?: () => void }> = ({ onClick }) => {
+  return (
+    <Button width="full" bg="blue.500" mt={4} color="gray.50" onClick={onClick}>
+      +
+    </Button>
+  );
+};
+
+const DynamicInputList: FC<{
+  items: string[];
+  itemsCount: number;
+  updateArrValueAtIndex: (
+    index: number,
+    value: string,
+    arr: string[],
+    setArr: (value: string[]) => void
+  ) => void;
+  setItems: (value: string[]) => void;
+  itemLabel: string;
+}> = ({ items, itemsCount, updateArrValueAtIndex, setItems, itemLabel }) => {
+  return (
+    <Box w="100%" mt={2}>
+      {[...Array(itemsCount)].map((_, index) => (
+        <CommonInput
+          key={index}
+          minHeight="45px"
+          mt={2}
+          value={items[index]}
+          onChange={(e) =>
+            updateArrValueAtIndex(index, e.target.value, items, setItems)
+          }
+        />
+      ))}
+    </Box>
+  );
+};
+
+const handleSubmit = () => {
+  console.log("submit");
+};
 
 const NewRole: FC = () => {
   const { treeId, hatId, address } = useParams();
+
+  const { uploadImageFileToIpfs, imageFile, setImageFile } =
+    useUploadImageFileToIpfs();
+
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+
+  const [responsibilities, setResponsibilities] = useState<string[]>([]);
+  const [responsibilitiesCount, setResponsibilitiesCount] = useState<number>(0);
+
+  const [authorities, setAuthorities] = useState<string[]>([]);
+  const [authoritiesCount, setAuthoritiesCount] = useState<number>(0);
+
+  const updateArrValueAtIndex = (
+    index: number,
+    newValue: string,
+    arr: string[],
+    setArr: (value: string[]) => void
+  ) => {
+    const newArr = [...arr];
+    newArr[index] = newValue;
+    setArr(newArr);
+  };
+
   return (
     <>
       <Box mt={5} w="100%">
         <Text fontSize="lg">新しいロールを作成</Text>
-        <div>NewRole</div>
-        <>{treeId}</>
-        <>{hatId}</>
-        <>{address}</>
+        <ContentContainer>
+          <InputImage imageFile={imageFile} setImageFile={setImageFile} />
+          <InputName name={name} setName={setName} />
+          <InputDescription
+            description={description}
+            setDescription={setDescription}
+          />
+        </ContentContainer>
+        <SectionHeading>Responsibilities</SectionHeading>
+        <ContentContainer>
+          <DynamicInputList
+            items={responsibilities}
+            itemsCount={responsibilitiesCount}
+            updateArrValueAtIndex={updateArrValueAtIndex}
+            setItems={setResponsibilities}
+            itemLabel="Responsibility"
+          />
+          <PlusButton
+            onClick={() => setResponsibilitiesCount(responsibilitiesCount + 1)}
+          />
+        </ContentContainer>
+        <SectionHeading>Authorities</SectionHeading>
+        <ContentContainer>
+          <DynamicInputList
+            items={authorities}
+            itemsCount={authoritiesCount}
+            updateArrValueAtIndex={updateArrValueAtIndex}
+            setItems={setAuthorities}
+            itemLabel="Authority"
+          />
+          <PlusButton
+            onClick={() => setAuthoritiesCount(authoritiesCount + 1)}
+          />
+        </ContentContainer>
+        <Box
+          mt={10}
+          mb="4vh"
+          width="100%"
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+        >
+          <BasicButton
+            onClick={handleSubmit}
+            disabled={!name || !description || !imageFile}
+            // loading={isLoading}
+          >
+            作成
+          </BasicButton>
+        </Box>
       </Box>
     </>
   );

pkgs/frontend/app/routes/_index.tsx

@@ -31,7 +31,6 @@ export default function Index() {
       topHatImageURI: "https://example.com/top-hat.png",
       hatterHatDetails: "Hatter Hat Details",
       hatterHatImageURI: "https://example.com/hatter-hat.png",
-      trustedForwarder: "0x1234567890123456789012345678901234567890",
     });
 
     console.log(res);