diff --git a/pkgs/frontend/app/components/ContentContainer.tsx b/pkgs/frontend/app/components/ContentContainer.tsx
new file mode 100644
index 0000000..874e4dd
--- /dev/null
+++ b/pkgs/frontend/app/components/ContentContainer.tsx
@@ -0,0 +1,18 @@
+import { Box } from "@chakra-ui/react";
+
+export const ContentContainer = ({
+ children,
+}: {
+ children: React.ReactNode;
+}) => {
+ return (
+
+ {children}
+
+ );
+};
diff --git a/pkgs/frontend/app/components/InputDescription.tsx b/pkgs/frontend/app/components/InputDescription.tsx
new file mode 100644
index 0000000..61032dd
--- /dev/null
+++ b/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 (
+
+ setDescription(e.target.value)}
+ />
+
+ );
+};
diff --git a/pkgs/frontend/app/components/InputImage.tsx b/pkgs/frontend/app/components/InputImage.tsx
new file mode 100644
index 0000000..c3fd842
--- /dev/null
+++ b/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 (
+
+
+
+
+ 画像を選択
+
+ );
+};
+
+export const InputImage = ({
+ imageFile,
+ setImageFile,
+}: {
+ imageFile: File | null;
+ setImageFile: (file: File | null) => void;
+}) => {
+ return (
+
+ {
+ const file = e.target.files?.[0];
+ if (file && file.type.startsWith("image/")) {
+ setImageFile(file);
+ } else {
+ alert("画像ファイルを選択してください");
+ }
+ }}
+ />
+ }
+ size={200}
+ borderRadius="3xl"
+ />
+
+ );
+};
diff --git a/pkgs/frontend/app/components/InputName.tsx b/pkgs/frontend/app/components/InputName.tsx
new file mode 100644
index 0000000..d7d82b4
--- /dev/null
+++ b/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 (
+
+ setName(e.target.value)}
+ />
+
+ );
+};
diff --git a/pkgs/frontend/app/routes/$treeId_.roles_.new.tsx b/pkgs/frontend/app/routes/$treeId_.roles_.new.tsx
index c8dcdff..927c213 100644
--- a/pkgs/frontend/app/routes/$treeId_.roles_.new.tsx
+++ b/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 }) => (
+ {children}
+);
+
+const PlusButton: FC<{ onClick?: () => void }> = ({ onClick }) => {
+ return (
+
+ );
+};
+
+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 (
+
+ {[...Array(itemsCount)].map((_, index) => (
+
+ updateArrValueAtIndex(index, e.target.value, items, setItems)
+ }
+ />
+ ))}
+
+ );
+};
+
+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([]);
+ const [responsibilitiesCount, setResponsibilitiesCount] = useState(0);
+
+ const [authorities, setAuthorities] = useState([]);
+ const [authoritiesCount, setAuthoritiesCount] = useState(0);
+
+ const updateArrValueAtIndex = (
+ index: number,
+ newValue: string,
+ arr: string[],
+ setArr: (value: string[]) => void
+ ) => {
+ const newArr = [...arr];
+ newArr[index] = newValue;
+ setArr(newArr);
+ };
+
return (
<>
新しいロールを作成
- NewRole
- <>{treeId}
- <>{hatId}
- <>{address}
+
+
+
+
+
+ Responsibilities
+
+
+ setResponsibilitiesCount(responsibilitiesCount + 1)}
+ />
+
+ Authorities
+
+
+ setAuthoritiesCount(authoritiesCount + 1)}
+ />
+
+
+
+ 作成
+
+
);
diff --git a/pkgs/frontend/app/routes/_index.tsx b/pkgs/frontend/app/routes/_index.tsx
index dabd1c3..5e4f25d 100644
--- a/pkgs/frontend/app/routes/_index.tsx
+++ b/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);
diff --git a/pkgs/frontend/app/routes/workspace.new.tsx b/pkgs/frontend/app/routes/workspace.new.tsx
index f024378..62b58f8 100644
--- a/pkgs/frontend/app/routes/workspace.new.tsx
+++ b/pkgs/frontend/app/routes/workspace.new.tsx
@@ -1,19 +1,19 @@
import { FC, useState } from "react";
-import { Box, Float, Input, Text } from "@chakra-ui/react";
-import { HiOutlinePlus } from "react-icons/hi2";
-import { CommonInput } from "~/components/common/CommonInput";
+import { Box, Float, Text } from "@chakra-ui/react";
import { BasicButton } from "~/components/BasicButton";
-import { CommonTextArea } from "~/components/common/CommonTextarea";
import {
useUploadMetadataToIpfs,
useUploadImageFileToIpfs,
} from "hooks/useIpfs";
import { useNavigate } from "@remix-run/react";
-import { CommonIcon } from "~/components/common/CommonIcon";
import { useBigBang } from "hooks/useBigBang";
import { useActiveWallet } from "hooks/useWallet";
import { Address } from "viem";
import { hatIdToTreeId } from "@hatsprotocol/sdk-v1-core";
+import { InputImage } from "~/components/InputImage";
+import { InputName } from "~/components/InputName";
+import { InputDescription } from "~/components/InputDescription";
+import { ContentContainer } from "~/components/ContentContainer";
const WorkspaceNew: FC = () => {
const [name, setName] = useState("");
@@ -84,82 +84,17 @@ const WorkspaceNew: FC = () => {
}
};
- const EmptyImage = () => {
- return (
-
-
-
-
- 画像を選択
-
- );
- };
-
return (
<>
新しいワークスペースを作成
-
-
- {
- const file = e.target.files?.[0];
- if (file && file.type.startsWith("image/")) {
- setImageFile(file);
- } else {
- alert("画像ファイルを選択してください");
- }
- }}
- />
- }
- size={200}
- borderRadius="3xl"
- />
-
-
- setName(e.target.value)}
- />
-
-
- setDescription(e.target.value)}
- />
-
+
+
+
+
{
作成
-
+
);