diff --git a/src/assets/icons/sum-yellowbig.png b/src/assets/icons/plus-big.png similarity index 100% rename from src/assets/icons/sum-yellowbig.png rename to src/assets/icons/plus-big.png diff --git a/src/assets/icons/sum-yellow.png b/src/assets/icons/plus.png similarity index 100% rename from src/assets/icons/sum-yellow.png rename to src/assets/icons/plus.png diff --git a/src/assets/icons/sum.png b/src/assets/icons/sum.png deleted file mode 100644 index fc52983..0000000 Binary files a/src/assets/icons/sum.png and /dev/null differ diff --git a/src/components/Category/index.tsx b/src/components/Category/index.tsx index 2bb50a5..9571be8 100644 --- a/src/components/Category/index.tsx +++ b/src/components/Category/index.tsx @@ -2,12 +2,14 @@ import { useRef, useState } from "react"; import Edit from "../../assets/icons/pen.png"; import Editsub from "../../assets/icons/pen-white.png"; import Drop from "../../assets/icons/drop.png"; -import Plus from "../../assets/icons/sum.png"; +import Plus from "../../assets/icons/plus.png"; import trash from "../../assets/icons/trash-white.png" -import imgSum from "../../assets/icons/sum-yellowbig.png"; -import imgSumy from "../../assets/icons/sum-yellow.png" +import PlusBig from "../../assets/icons/plus-big.png"; +import NewItemModal from "../NewItemModal"; + export default function Category() { + const [showModal, setShowModal] = useState(false); const [cards, setCards] = useState(["Pizza"]); const [subcards, setSubcards] = useState([""]); const [isEditable, setIsEditable] = useState(false); @@ -88,7 +90,18 @@ export default function Category() { Adicionar item - + setShowModal(true)} + /> + {showModal ? ( + <> + < NewItemModal + onClick={() => setShowModal(false)}/> + + ) : null} )} @@ -102,7 +115,7 @@ export default function Category() { Adicionar subcategoria{" "}
- +
diff --git a/src/components/NewItemModal/index.tsx b/src/components/NewItemModal/index.tsx new file mode 100644 index 0000000..cefbb87 --- /dev/null +++ b/src/components/NewItemModal/index.tsx @@ -0,0 +1,116 @@ +import { useForm, SubmitHandler } from "react-hook-form"; + +interface IFormValues { + name: string; + itemDescription: string; + price: number; + photoDescription: string; + } + + export default function NewItemModal(props: any) { + const { register, handleSubmit } = useForm(); + + const submit: SubmitHandler = (data) => + alert(JSON.stringify(data)); + + return ( +
+
+

+ Cadastrar novo item +

+
+
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ + + +
+ +
+ +
+
+ +
+ + + +
+
+
+
+ ); + } \ No newline at end of file diff --git a/src/pages/homepage/index.tsx b/src/pages/homepage/index.tsx index d6d00f2..c51bd5b 100644 --- a/src/pages/homepage/index.tsx +++ b/src/pages/homepage/index.tsx @@ -1,29 +1,41 @@ -import { useContext } from 'react'; +import { useContext } from "react"; import { AuthContext } from "../../contexts/Auth/AuthLogin/AuthContext"; -import { useNavigate } from 'react-router-dom'; +import { useNavigate } from "react-router-dom"; export default function Home() { const auth = useContext(AuthContext); const navigate = useNavigate(); - function handleLogout(event: React.MouseEvent){ + function handleLogout( + event: React.MouseEvent + ) { event.preventDefault(); auth.signout(); - navigate('/login') + navigate("/login"); } return (
-

Olá {auth.user?.name}, Tudo bem? -

+

Olá {auth.user?.name}, Tudo bem?

Login Cadastro - Primeiro Cadastro de Estabelecimento - Segunda Página Cadastro de Estabelecimento - {auth.user && Sair} - + + Primeiro Cadastro de Estabelecimento + + + Segunda Página Cadastro de Estabelecimento + + {auth.user && ( + + Sair + + )} +
- ) -} \ No newline at end of file + ); +} diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx index 0e21c6c..706562d 100644 --- a/src/pages/login/index.tsx +++ b/src/pages/login/index.tsx @@ -1,33 +1,36 @@ -import { FormEvent, useCallback, useState, useContext } from 'react'; -import { Link, useNavigate } from 'react-router-dom'; -import { AuthContext } from '../../contexts/Auth/AuthLogin/AuthContext'; -import { IFormInputs } from '../../types'; -import Logo from '../../assets/images/logo.png'; +import { FormEvent, useCallback, useState, useContext } from "react"; +import { Link, useNavigate } from "react-router-dom"; +import { AuthContext } from "../../contexts/Auth/AuthLogin/AuthContext"; +import { IFormInputs } from "../../types"; +import Logo from "../../assets/images/logo.png"; export default function Login() { const [formData, setFormData] = useState({ - email: '', - senha: '', + email: "", + senha: "", }); const auth = useContext(AuthContext); const navigate = useNavigate(); - const handleFormSubmit = useCallback(async (event: FormEvent) => { - event.preventDefault() - const { email, senha } = formData; - const isLogged = await auth.signin(email, senha) - if (email && senha) { - if (isLogged) { - navigate('/'); - return true; + const handleFormSubmit = useCallback( + async (event: FormEvent) => { + event.preventDefault(); + const { email, senha } = formData; + const isLogged = await auth.signin(email, senha); + if (email && senha) { + if (isLogged) { + navigate("/"); + return true; + } + return false; } - return false - } - }, [formData]); + }, + [formData] + ); return ( <>
-
+
Logo
Entrar na Conta -
+
@@ -58,26 +68,35 @@ export default function Login() { Senha setFormData({ ...formData, senha: e.target.value })} + onChange={(e) => + setFormData({ ...formData, senha: e.target.value }) + } />
-
- -
- +
+ Ainda não possui uma conta? - - <> - Registre-se - + <> + Registre-se
@@ -86,4 +105,4 @@ export default function Login() {
); -} \ No newline at end of file +} diff --git a/src/pages/signup/index.tsx b/src/pages/signup/index.tsx index 9453868..cb25398 100644 --- a/src/pages/signup/index.tsx +++ b/src/pages/signup/index.tsx @@ -1,7 +1,5 @@ import { useForm, SubmitHandler } from "react-hook-form"; import { Link } from "react-router-dom"; -import { FormButtonBack } from "../../components/button/ButtonBack"; -import FormButtonForward from "../../components/button/ButtonForward"; import { segmentsArray } from "./data"; type FormValues = { @@ -13,9 +11,14 @@ type FormValues = { }; export default function Signup() { - const { register, handleSubmit, formState:{errors}, watch } = useForm(); + const { + register, + handleSubmit, + formState: { errors }, + watch, + } = useForm(); const onSubmit: SubmitHandler = (data) => - alert(JSON.stringify(data )); + alert(JSON.stringify(data)); return (
@@ -37,7 +40,7 @@ export default function Signup() { placeholder="Digite seu nome" type="text" required - {...register("name", {required: true})} + {...register("name", { required: true })} />
@@ -71,8 +74,12 @@ export default function Signup() { className="block box-border w-full rounded-md border-solid border border-royalblue py-2 px-2 text-sm" required {...register("segment")} - > - {segmentsArray.map(({value, label}, i)=>())} + > + {segmentsArray.map(({ value, label }, i) => ( + + ))}
@@ -91,11 +98,16 @@ export default function Signup() { required {...register("password", { minLength: { - value: 8, - message: "As senhas devem ter no mínimo oito caracteres" - }} )} + value: 8, + message: "As senhas devem ter no mínimo oito caracteres", + }, + })} /> - {errors.password &&

⚠ {errors.password.message}

} + {errors.password && ( +

+ ⚠ {errors.password.message} +

+ )}
@@ -112,21 +124,29 @@ export default function Signup() { type="password" required {...register("confirmedPassword", { - validate: value => value === watch("password") || "As senhas devem ser iguais"})} + validate: (value) => + value === watch("password") || "As senhas devem ser iguais", + })} /> - {errors.confirmedPassword &&

⚠ {errors.confirmedPassword.message}

} + {errors.confirmedPassword && ( +

+ ⚠ {errors.confirmedPassword.message} +

+ )}
- + Voltar - - + +
); -} \ No newline at end of file +}