diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100644 index 0000000..d24fdfc --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,4 @@ +#!/usr/bin/env sh +. "$(dirname -- "$0")/_/husky.sh" + +npx lint-staged diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..82f57e9 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,3 @@ +{ + "tabWidth": 2 +} \ No newline at end of file diff --git a/SOLUTION.md b/SOLUTION.md new file mode 100644 index 0000000..ac94b39 --- /dev/null +++ b/SOLUTION.md @@ -0,0 +1,6 @@ +Some additional packages + +react-phone-input -> This package was used to solve an the input field that required international countries flags as well as generate their country code. +headlessui -> To add more spice to the rendering of the sidebar on a mobile screen this was implemented for user to easily navigate through the side navigation while still + to see the screen content. +heroicon/react -> Used along the headlessui diff --git a/package.json b/package.json index 974fad4..e4d086d 100644 --- a/package.json +++ b/package.json @@ -6,18 +6,33 @@ "dev": "next dev", "build": "next build", "start": "next start", - "lint": "next lint" + "lint": "next lint", + "prepare": "husky install" }, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.2.0", + "@fortawesome/free-brands-svg-icons": "^6.2.0", + "@fortawesome/react-fontawesome": "^0.2.0", + "@headlessui/react": "^1.7.0", + "@heroicons/react": "^2.0.10", "next": "12.2.5", "react": "18.2.0", - "react-dom": "18.2.0" + "react-dom": "18.2.0", + "react-phone-input-2": "^2.15.1" }, "devDependencies": { "@types/node": "^18.7.13", "@types/react": "^18.0.17", + "autoprefixer": "^10.4.8", "eslint": "8.23.0", "eslint-config-next": "12.2.5", + "husky": "^8.0.1", + "lint-staged": "^13.0.3", + "postcss": "^8.4.16", + "tailwindcss": "^3.1.8", "typescript": "^4.8.2" + }, + "lint-staged": { + "**/*": "prettier --write --ignore-unknown" } } diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..33ad091 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/src/assets/address.svg b/src/assets/address.svg new file mode 100644 index 0000000..6c097a3 --- /dev/null +++ b/src/assets/address.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/cart-icon.svg b/src/assets/cart-icon.svg new file mode 100644 index 0000000..0fb248f --- /dev/null +++ b/src/assets/cart-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/file-upload.svg b/src/assets/file-upload.svg new file mode 100644 index 0000000..b6970b4 --- /dev/null +++ b/src/assets/file-upload.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/help-center.svg b/src/assets/help-center.svg new file mode 100644 index 0000000..b00e8d0 --- /dev/null +++ b/src/assets/help-center.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/logo.png b/src/assets/logo.png new file mode 100644 index 0000000..0d553c6 Binary files /dev/null and b/src/assets/logo.png differ diff --git a/src/assets/logo.svg b/src/assets/logo.svg new file mode 100644 index 0000000..051cd10 --- /dev/null +++ b/src/assets/logo.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/logout.svg b/src/assets/logout.svg new file mode 100644 index 0000000..98b5fd5 --- /dev/null +++ b/src/assets/logout.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/pen-icon.svg b/src/assets/pen-icon.svg new file mode 100644 index 0000000..1fce391 --- /dev/null +++ b/src/assets/pen-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/person.svg b/src/assets/person.svg new file mode 100644 index 0000000..fdb4623 --- /dev/null +++ b/src/assets/person.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/settings.svg b/src/assets/settings.svg new file mode 100644 index 0000000..6c1deac --- /dev/null +++ b/src/assets/settings.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/FormInput.tsx b/src/components/FormInput.tsx new file mode 100644 index 0000000..2db13a2 --- /dev/null +++ b/src/components/FormInput.tsx @@ -0,0 +1,55 @@ +import React from "react"; + +// One Instance of the input form, ensuring I DRY + +type InputProps = { + name: string; + type?: string; + placeholder?: string; + className: string; + value: string; + label: string; + disabled?: boolean; + onChange: React.ChangeEventHandler; +}; + +const FormInput = ({ + name, + type, + placeholder, + className, + value, + label, + disabled = false, + onChange = () => {}, +}: InputProps) => { + + return ( +
+ + +
+ ); +} + +FormInput.defaultProps = { + type: "text", + className: "" +} + +export default FormInput \ No newline at end of file diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx new file mode 100644 index 0000000..5171960 --- /dev/null +++ b/src/components/Layout/Footer.tsx @@ -0,0 +1,151 @@ +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { + faFacebook, + faLinkedin, + faMedium, + faInstagram +} from "@fortawesome/free-brands-svg-icons"; +import logo from "../../assets/logo.svg"; +import Image from "next/image"; +import Link from "next/link"; + +const footer = () => { + return ( + + ); +}; + +export default footer; diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx new file mode 100644 index 0000000..2b6b399 --- /dev/null +++ b/src/components/Layout/Header.tsx @@ -0,0 +1,140 @@ +import logo from "../../assets/logo.png"; +import person from "../../assets/person.svg"; +import shopcart from "../../assets/cart-icon.svg"; +import { useState } from "react"; +import Link from "next/link"; +import Image from "next/image"; + +const Header = () => { + const [isNavOpen, setIsNavOpen] = useState(false); + { + /* Initiated isNavOpen state with false */ + } + const genericHamburgerLine = `h-1 w-6 my-1 rounded-full bg-black transition ease transform duration-300`; + + return ( + <> +
+ + logo + + +
+ + ); +}; + +export default Header; diff --git a/src/components/Layout/MyAccountSidebar.tsx b/src/components/Layout/MyAccountSidebar.tsx new file mode 100644 index 0000000..85da34a --- /dev/null +++ b/src/components/Layout/MyAccountSidebar.tsx @@ -0,0 +1,161 @@ + +import { Fragment, useState } from "react"; +import { Listbox, Transition } from "@headlessui/react"; +import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid"; +import orders from '../../assets/cart-icon.svg' +import settings from '../../assets/settings.svg'; +import logout from '../../assets/logout.svg'; +import address from '../../assets/address.svg'; +import helpCenter from '../../assets/help-center.svg'; +import Image from "next/image"; +import Link from "next/link"; + + +const people = [ + { id: 1, name: "Account", href: "#" }, + { id: 2, name: "Orders", href: "#" }, + { id: 3, name: "Address", href: "#" }, + { id: 4, name: "Help Center" , href: "#" }, + { id: 5, name: "Logout", href: "#" }, +]; + +const MyAccountSidebar = () => { + const [selected, setSelected] = useState(people[0]); + + return ( + <> + {/* Sidebar for mobile devices created with headless ui package*/} + + + {/* Sidebar for Desktop devices created with headless ui package*/} + + + ); +}; + +export default MyAccountSidebar; diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx new file mode 100644 index 0000000..944d3e2 --- /dev/null +++ b/src/components/Layout/index.tsx @@ -0,0 +1,18 @@ +import Footer from "./Footer" +import Header from "./Header" + +type LayoutProps = { + children: JSX.Element | JSX.Element[] +} + +const index = ({children}: LayoutProps) => { + return ( + <> +
+
{children}
+