From 0c1e426669fa40d1c26b1cf43cb8dc9f2a44b2e2 Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Tue, 4 Feb 2020 15:10:44 +0100 Subject: [PATCH] navbar skeleton --- README.md | 3 +- public/index.html | 10 +- src/components/ContactForm.jsx | 56 +++++----- src/components/Navbar.jsx | 52 ++------- src/components/SearchBar.jsx | 54 ++++++---- src/components/SideNav.jsx | 59 +++++++++++ src/index.js | 2 +- src/{App.js => pages/App.jsx} | 187 +++++++++++++++++++-------------- src/pages/Contact.jsx | 4 +- src/utils/inputHook.js | 17 +++ 10 files changed, 263 insertions(+), 181 deletions(-) create mode 100644 src/components/SideNav.jsx rename src/{App.js => pages/App.jsx} (51%) create mode 100644 src/utils/inputHook.js diff --git a/README.md b/README.md index 4b5c5a5..6db1d24 100644 --- a/README.md +++ b/README.md @@ -97,7 +97,8 @@ Free meal planner for cooks short on ideas! (like me …) 1. add sidenav on mobile 1. send message after contact form validation (confirm to sender and msg+info to admin) -1. Breadcrumb +1. Design & Breadcrumb +1. Cookie bar 1. code cleanup (props and refactoring) 1. Back to top button 1. Take a look at some components [here](http://react-materialize.github.io/react-materialize/?path=/story/css-grid--default) diff --git a/public/index.html b/public/index.html index 9c3796d..2009249 100644 --- a/public/index.html +++ b/public/index.html @@ -5,7 +5,7 @@ - + @@ -28,15 +28,9 @@ href="https://fonts.googleapis.com/css?family=Marck+Script&display=swap" rel="stylesheet" /> - Chef's | Meal Planner + Online Meal Planner | Chef's -
diff --git a/src/components/ContactForm.jsx b/src/components/ContactForm.jsx index 6f007fd..a807a71 100644 --- a/src/components/ContactForm.jsx +++ b/src/components/ContactForm.jsx @@ -1,39 +1,43 @@ import React from "react"; +import { useInput } from "../utils/inputHook"; -export const ContactForm = ({ handleSubmit }) => { +export const ContactForm = ({ onSubmit }) => { // const fields = ["firstname", "lastname", "email", "phone", "message"]; - // const [firstName, setFirstName] = useState(""); + // const [firstName, setFirstName] = useState(""); - const onSubmit = ev => { + const handleSubmit = ev => { ev.preventDefault(); - handleSubmit(true); + onSubmit(true); }; - // const handleChange = ev => { - // const { value } = ev.target; - // setFirstName(value); - // }; + // const handleChange = ev => { + // const { value } = ev.target; + // setFirstName(value); + // }; + // const { value, bind } = useInput(""); + const { bind } = useInput(""); return ( -
+
-
- -
-
- -
- + +
+
+ +
+
+
@@ -45,18 +49,18 @@ export const ContactForm = ({ handleSubmit }) => { ); }; -const ContactFormInput = ({ id, type = "text" }) => { +const ContactFormInput = ({ id, type = "text", value, onChange }) => { return (
{/* account_circle */} - +
); @@ -65,7 +69,7 @@ const ContactFormInput = ({ id, type = "text" }) => { const ContactFormTextArea = ({ id }) => { return (
- +