diff --git a/src/components/Header.tsx b/src/components/Header.tsx index f572db3..a779e3f 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -6,7 +6,7 @@ import logo from "../images/logo.svg"; import { UserName } from "../components"; const Header = () => { return ( -
+
{ //Go Back diff --git a/src/components/PageHeading.tsx b/src/components/PageHeading.tsx new file mode 100644 index 0000000..937a2ae --- /dev/null +++ b/src/components/PageHeading.tsx @@ -0,0 +1,9 @@ +const PageHeading = () => { + return ( +
+ New Contact +
+ ); +}; + +export default PageHeading; diff --git a/src/components/UserName.tsx b/src/components/UserName.tsx index 5ec0b5f..a394c38 100644 --- a/src/components/UserName.tsx +++ b/src/components/UserName.tsx @@ -13,7 +13,7 @@ const UserName = () => { alt="text" />

- {"JOhndow.near"} + {"Johndoe.near"}

{ diff --git a/src/components/index.ts b/src/components/index.ts index e647f5a..e2eef66 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,3 +1,4 @@ export { default as CustomInput } from "./CustomInput"; export { default as Header } from "./Header"; export { default as UserName } from "./UserName"; +export { default as PageHeading } from "./PageHeading"; diff --git a/src/layouts/GeneralLayout.tsx b/src/layouts/GeneralLayout.tsx index e29a095..88d8da7 100644 --- a/src/layouts/GeneralLayout.tsx +++ b/src/layouts/GeneralLayout.tsx @@ -4,6 +4,7 @@ const GeneralLayout: React.FC = ({ children }) => { return (
+
New Contact
{children} ); diff --git a/src/pages/CreateContact/Createcontact.tsx b/src/pages/CreateContact/Createcontact.tsx index 7354bf4..c5e58da 100644 --- a/src/pages/CreateContact/Createcontact.tsx +++ b/src/pages/CreateContact/Createcontact.tsx @@ -1,6 +1,6 @@ import { Form, Formik, ErrorMessage } from "formik"; import * as yup from "yup"; -import { CustomInput, Header } from "../../components"; +import { CustomInput, Header, PageHeading } from "../../components"; const fields = [ { title: "Full Name", @@ -52,11 +52,12 @@ const CreateContact = () => { }; const renderError = (message: string) =>

{message}

; const onSubmit = (values: typeof initialValues) => { - console.log(values); + //Handle the form values -> make post request }; return (
+ { ))} )} diff --git a/tailwind.config.js b/tailwind.config.js index 7987625..1fc6847 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -17,6 +17,7 @@ module.exports = { }, spacing: { 1: "1px", + 5: "5px", 8: "8px", 10: "10px", 14: "14px", @@ -41,7 +42,7 @@ module.exports = { }, extend: {}, colors: { - grey: { light: "#FCFCFC", dark: "#BEBEC2" }, + grey: { light: "#FCFCFC", dark: "#BEBEC2", header: "#DFDFE0" }, title: "#6F6E73", white: "#FFFFFF", blue: "#885FFF",