;
+// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
+export type AppDispatch = typeof store.dispatch;
diff --git a/src/Components/RegisterModal/RegisterModal.tsx b/src/Components/RegisterModal/RegisterModal.tsx
new file mode 100644
index 0000000..e9ea675
--- /dev/null
+++ b/src/Components/RegisterModal/RegisterModal.tsx
@@ -0,0 +1,193 @@
+import { useState } from "react";
+import styles from "../../styles";
+import { colors } from "../../styles";
+import TextField from "@mui/material/TextField";
+import InputAdornment from "@mui/material/InputAdornment";
+import IconButton from "@mui/material/IconButton";
+import Visibility from "@mui/icons-material/Visibility";
+import VisibilityOff from "@mui/icons-material/VisibilityOff";
+import { AppRegistration } from "@mui/icons-material";
+import Button from "../Button/Button";
+import { useNavigate } from "react-router-dom";
+import { RegisterAPI } from "../API/API";
+import { toast } from "react-toastify";
+export default function RegisterModal() {
+ const navigate = useNavigate();
+ const [showPassword, setShowPassword] = useState(false);
+
+ const [user, setUser] = useState({
+ first_name: "",
+ last_name: "",
+ username: "",
+ email: "",
+ password: "",
+ confirm_password: "",
+ });
+ const [error, setError] = useState("");
+ return (
+ <>
+
+
+
+ ) => {
+ setUser({ ...user, first_name: e.target.value });
+ setError("");
+ }}
+ value={user.first_name}
+ placeholder={"Enter your first name"}
+ />
+ ) =>
+ setUser({ ...user, last_name: e.target.value })
+ }
+ value={user.last_name}
+ placeholder={"Enter your last name"}
+ />
+ ) =>
+ setUser({ ...user, email: e.target.value })
+ }
+ value={user.email}
+ placeholder={"Enter your email"}
+ />
+ ) => {
+ setUser({ ...user, username: e.target.value });
+ setError("");
+ }}
+ value={user.username}
+ placeholder={"Enter username"}
+ />
+
+ setShowPassword(!showPassword)}
+ edge="end"
+ >
+ {showPassword ? : }
+
+
+ ),
+ }}
+ label="Password"
+ placeholder={"Enter password"}
+ onChange={(e: React.ChangeEvent) =>
+ setUser({ ...user, password: e.target.value })
+ }
+ value={user.password}
+ />
+
+ setShowPassword(!showPassword)}
+ edge="end"
+ >
+ {showPassword ? : }
+
+
+ ),
+ }}
+ label="Confirm Password"
+ placeholder={"Re-enter password"}
+ onChange={(e: React.ChangeEvent) => {
+ setUser({ ...user, confirm_password: e.target.value });
+ setError("");
+ }}
+ value={user.confirm_password}
+ />
+
+ {error}
+
+