From 740df892458fc9fed8e342c1170cb21d49bde154 Mon Sep 17 00:00:00 2001 From: Igor Goncalo Date: Fri, 2 Sep 2022 13:46:51 +0100 Subject: [PATCH 1/3] Done! --- .gitignore | 1 + I_AM_A_FRONTEND_HERO | 0 package.json | 8 +- postcss.config.js | 6 + products.json | 142 ++++++++ {src/public => public}/favicon.ico | Bin public/images/aside/baldoriaLogo.svg | 9 + public/images/aside/baldoriaVermouth.svg | 3 + public/images/aside/boxIcon.svg | 4 + public/images/aside/locationPin.svg | 4 + public/images/footer/facebookIcon.svg | 3 + public/images/footer/instagramIcon.svg | 3 + public/images/footer/linkedinIcon.svg | 10 + public/images/footer/logoWhite.svg | 20 + public/images/footer/mediumIcon.svg | 10 + public/images/header/cartIcon.svg | 5 + public/images/header/userIcon.svg | 4 + public/images/logoBlack.svg | 8 + public/images/logoWhite.svg | 20 + public/images/products/audemusGin.svg | 9 + public/images/products/gastonBrandy.svg | 9 + public/images/products/plusIcon.svg | 4 + public/images/products/poolGin.svg | 9 + public/images/products/stockholmsGin.svg | 9 + {src/public => public}/vercel.svg | 0 src/components/Layout.tsx | 41 +++ src/components/footer/index.tsx | 128 +++++++ src/components/footer/listAnchor.tsx | 41 +++ src/components/header/index.tsx | 38 ++ src/components/header/menu.tsx | 54 +++ src/components/modal/modalMenu.tsx | 40 ++ src/components/proudcts/aside.tsx | 130 +++++++ src/components/proudcts/index.tsx | 31 ++ src/components/proudcts/itemComponent.tsx | 44 +++ src/components/proudcts/loadinsProducts.tsx | 32 ++ src/components/util/Anchor.tsx | 33 ++ src/components/util/Button.tsx | 23 ++ src/context/ProductsContext.tsx | 53 +++ src/database/products.ts | 146 ++++++++ src/hook/useProductContext.ts | 7 + src/interfaces/index.tsx | 7 + src/pages/_app.tsx | 7 +- src/pages/api/hello.js | 5 - src/pages/api/products.ts | 11 + src/pages/index.tsx | 27 +- src/styles/globals.css | 4 + tailwind.config.js | 45 +++ yarn.lock | 383 +++++++++++++++++++- 48 files changed, 1595 insertions(+), 35 deletions(-) create mode 100644 I_AM_A_FRONTEND_HERO create mode 100644 postcss.config.js create mode 100644 products.json rename {src/public => public}/favicon.ico (100%) create mode 100644 public/images/aside/baldoriaLogo.svg create mode 100644 public/images/aside/baldoriaVermouth.svg create mode 100644 public/images/aside/boxIcon.svg create mode 100644 public/images/aside/locationPin.svg create mode 100644 public/images/footer/facebookIcon.svg create mode 100644 public/images/footer/instagramIcon.svg create mode 100644 public/images/footer/linkedinIcon.svg create mode 100644 public/images/footer/logoWhite.svg create mode 100644 public/images/footer/mediumIcon.svg create mode 100644 public/images/header/cartIcon.svg create mode 100644 public/images/header/userIcon.svg create mode 100644 public/images/logoBlack.svg create mode 100644 public/images/logoWhite.svg create mode 100644 public/images/products/audemusGin.svg create mode 100644 public/images/products/gastonBrandy.svg create mode 100644 public/images/products/plusIcon.svg create mode 100644 public/images/products/poolGin.svg create mode 100644 public/images/products/stockholmsGin.svg rename {src/public => public}/vercel.svg (100%) create mode 100644 src/components/Layout.tsx create mode 100644 src/components/footer/index.tsx create mode 100644 src/components/footer/listAnchor.tsx create mode 100644 src/components/header/index.tsx create mode 100644 src/components/header/menu.tsx create mode 100644 src/components/modal/modalMenu.tsx create mode 100644 src/components/proudcts/aside.tsx create mode 100644 src/components/proudcts/index.tsx create mode 100644 src/components/proudcts/itemComponent.tsx create mode 100644 src/components/proudcts/loadinsProducts.tsx create mode 100644 src/components/util/Anchor.tsx create mode 100644 src/components/util/Button.tsx create mode 100644 src/context/ProductsContext.tsx create mode 100644 src/database/products.ts create mode 100644 src/hook/useProductContext.ts create mode 100644 src/interfaces/index.tsx delete mode 100644 src/pages/api/hello.js create mode 100644 src/pages/api/products.ts create mode 100644 tailwind.config.js diff --git a/.gitignore b/.gitignore index c87c9b3..ed854fa 100644 --- a/.gitignore +++ b/.gitignore @@ -34,3 +34,4 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts + diff --git a/I_AM_A_FRONTEND_HERO b/I_AM_A_FRONTEND_HERO new file mode 100644 index 0000000..e69de29 diff --git a/package.json b/package.json index 974fad4..76d8260 100644 --- a/package.json +++ b/package.json @@ -9,15 +9,21 @@ "lint": "next lint" }, "dependencies": { + "axios": "^0.27.2", "next": "12.2.5", "react": "18.2.0", - "react-dom": "18.2.0" + "react-dom": "18.2.0", + "react-icons": "^4.4.0", + "uuidv4": "^6.2.13" }, "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", + "postcss": "^8.4.16", + "tailwindcss": "^3.1.8", "typescript": "^4.8.2" } } diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..672fab1 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: { config: './tailwind.config.js' }, + autoprefixer: {}, + }, +}; \ No newline at end of file diff --git a/products.json b/products.json new file mode 100644 index 0000000..d9f43b1 --- /dev/null +++ b/products.json @@ -0,0 +1,142 @@ + [ + { + "id":"1", + "name": "Umami Gin", + "brand": "Audemus", + "price": "28", + "image": "/images/products/audemusGin.svg" + }, + { + "id": "2", + "name": "Pool Gin", + "brand": "Silent Pool", + "price": 32, + "image": "/images/products/poolGin.svg" + }, + { + "id": "3", + "name": "Pink Gin", + "brand": "Stolckholms", + "price": 35, + "image": "/images/products/stockholmsGin.svg" + }, + { + "id":"4", + "name": "Umami Gin", + "brand": "Audemus", + "price": "28", + "image": "/images/products/audemusGin.svg" + }, + { + "id": "5", + "name": "Pool Gin", + "brand": "Silent Pool", + "price": 32, + "image": "/images/products/poolGin.svg" + }, + { + "id": "6", + "name": "Pink Gin", + "brand": "Stolckholms", + "price": 35, + "image": "/images/products/stockholmsGin.svg" + }, + { + "id":"7", + "name": "Umami Gin", + "brand": "Audemus", + "price": "28", + "image": "/images/products/audemusGin.svg" + }, + { + "id": "8", + "name": "Pool Gin", + "brand": "Silent Pool", + "price": 32, + "image": "/images/products/poolGin.svg" + }, + { + "id": "9", + "name": "Pink Gin", + "brand": "Stolckholms", + "price": 35, + "image": "/images/products/stockholmsGin.svg" + }, + { + "id":"10", + "name": "Umami Gin", + "brand": "Audemus", + "price": "28", + "image": "/images/products/audemusGin.svg" + }, + { + "id": "11", + "name": "Pool Gin", + "brand": "Silent Pool", + "price": 32, + "image": "/images/products/poolGin.svg" + }, + { + "id": "12", + "name": "Pink Gin", + "brand": "Stolckholms", + "price": 35, + "image": "/images/products/stockholmsGin.svg" + }, + { + "id":"13", + "name": "Umami Gin", + "brand": "Audemus", + "price": "28", + "image": "/images/products/audemusGin.svg" + }, + { + "id": "14", + "name": "Pool Gin", + "brand": "Silent Pool", + "price": 32, + "image": "/images/products/poolGin.svg" + }, + { + "id": "15", + "name": "Pink Gin", + "brand": "Stolckholms", + "price": 35, + "image": "/images/products/stockholmsGin.svg" + }, + { + "id": "16", + "name": "Pink Gin", + "brand": "Stolckholms", + "price": 35, + "image": "/images/products/stockholmsGin.svg" + }, + { + "id": "17", + "name": "Pink Gin", + "brand": "Stolckholms", + "price": 35, + "image": "/images/products/stockholmsGin.svg" + }, + { + "id": "18", + "name": "Pink Gin", + "brand": "Stolckholms", + "price": 35, + "image": "/images/products/stockholmsGin.svg" + }, + { + "id": "19", + "name": "Pink Gin", + "brand": "Stolckholms", + "price": 35, + "image": "/images/products/stockholmsGin.svg" + }, + { + "id": "20", + "name": "Pink Gin", + "brand": "Stolckholms", + "price": 35, + "image": "/images/products/stockholmsGin.svg" + } +] \ No newline at end of file diff --git a/src/public/favicon.ico b/public/favicon.ico similarity index 100% rename from src/public/favicon.ico rename to public/favicon.ico diff --git a/public/images/aside/baldoriaLogo.svg b/public/images/aside/baldoriaLogo.svg new file mode 100644 index 0000000..d430810 --- /dev/null +++ b/public/images/aside/baldoriaLogo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/images/aside/baldoriaVermouth.svg b/public/images/aside/baldoriaVermouth.svg new file mode 100644 index 0000000..f19cab1 --- /dev/null +++ b/public/images/aside/baldoriaVermouth.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/aside/boxIcon.svg b/public/images/aside/boxIcon.svg new file mode 100644 index 0000000..4a4cd95 --- /dev/null +++ b/public/images/aside/boxIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/aside/locationPin.svg b/public/images/aside/locationPin.svg new file mode 100644 index 0000000..67d0206 --- /dev/null +++ b/public/images/aside/locationPin.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/footer/facebookIcon.svg b/public/images/footer/facebookIcon.svg new file mode 100644 index 0000000..ad1680d --- /dev/null +++ b/public/images/footer/facebookIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/footer/instagramIcon.svg b/public/images/footer/instagramIcon.svg new file mode 100644 index 0000000..30d7146 --- /dev/null +++ b/public/images/footer/instagramIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/footer/linkedinIcon.svg b/public/images/footer/linkedinIcon.svg new file mode 100644 index 0000000..3a0ad82 --- /dev/null +++ b/public/images/footer/linkedinIcon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/images/footer/logoWhite.svg b/public/images/footer/logoWhite.svg new file mode 100644 index 0000000..498c652 --- /dev/null +++ b/public/images/footer/logoWhite.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/footer/mediumIcon.svg b/public/images/footer/mediumIcon.svg new file mode 100644 index 0000000..8f67ba1 --- /dev/null +++ b/public/images/footer/mediumIcon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/images/header/cartIcon.svg b/public/images/header/cartIcon.svg new file mode 100644 index 0000000..2aa3459 --- /dev/null +++ b/public/images/header/cartIcon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/images/header/userIcon.svg b/public/images/header/userIcon.svg new file mode 100644 index 0000000..da06ce1 --- /dev/null +++ b/public/images/header/userIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/logoBlack.svg b/public/images/logoBlack.svg new file mode 100644 index 0000000..78ce5aa --- /dev/null +++ b/public/images/logoBlack.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/images/logoWhite.svg b/public/images/logoWhite.svg new file mode 100644 index 0000000..324d74c --- /dev/null +++ b/public/images/logoWhite.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/products/audemusGin.svg b/public/images/products/audemusGin.svg new file mode 100644 index 0000000..3455791 --- /dev/null +++ b/public/images/products/audemusGin.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/images/products/gastonBrandy.svg b/public/images/products/gastonBrandy.svg new file mode 100644 index 0000000..7467d54 --- /dev/null +++ b/public/images/products/gastonBrandy.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/images/products/plusIcon.svg b/public/images/products/plusIcon.svg new file mode 100644 index 0000000..0d564e0 --- /dev/null +++ b/public/images/products/plusIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/products/poolGin.svg b/public/images/products/poolGin.svg new file mode 100644 index 0000000..bd4786e --- /dev/null +++ b/public/images/products/poolGin.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/images/products/stockholmsGin.svg b/public/images/products/stockholmsGin.svg new file mode 100644 index 0000000..0986c8e --- /dev/null +++ b/public/images/products/stockholmsGin.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/public/vercel.svg b/public/vercel.svg similarity index 100% rename from src/public/vercel.svg rename to public/vercel.svg diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx new file mode 100644 index 0000000..b2ce033 --- /dev/null +++ b/src/components/Layout.tsx @@ -0,0 +1,41 @@ +import React, { ReactNode, useState } from "react"; +import FooterComponent from "./footer"; +import HeaderComponent from "./header"; +import { MenuComponent } from "./header/menu"; +import { ModalMenuComponent } from "./modal/modalMenu"; + +interface Props { + children: ReactNode; +} + +export function LayoutComponent({ children }: Props) { + const [modalIsOpen, setModalIsOpen] = useState(false); + + function handleCloseModal() { + setModalIsOpen(() => false); + } + + function handleOpenModal() { + setModalIsOpen(() => true); + } + + return ( +
+ handleOpenModal()} /> +
+ {children} +
+ + {modalIsOpen ? ( + handleCloseModal()}> + + + ) : null} +
+ ); +} diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx new file mode 100644 index 0000000..20a13de --- /dev/null +++ b/src/components/footer/index.tsx @@ -0,0 +1,128 @@ +import { ButtonComponent } from "@components/util/Button"; +import Image from "next/image"; +import React from "react"; +import ListAnchorComponent from "./listAnchor"; + +export default function FooterComponent() { + return ( + + ); +} diff --git a/src/components/footer/listAnchor.tsx b/src/components/footer/listAnchor.tsx new file mode 100644 index 0000000..4151eb3 --- /dev/null +++ b/src/components/footer/listAnchor.tsx @@ -0,0 +1,41 @@ +import React from "react"; +import { v4 as uuidv4 } from "uuid"; + +interface AnchorPropsList { + title: string; + listAnchor: string[]; +} + +export default function ListAnchorComponent({ + title, + listAnchor, +}: AnchorPropsList) { + return ( +
+

+ {title.toUpperCase()} +

+ +
+ ); +} diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx new file mode 100644 index 0000000..e566a2a --- /dev/null +++ b/src/components/header/index.tsx @@ -0,0 +1,38 @@ +import Image from "next/image"; +import React, { useState } from "react"; +import { GiHamburgerMenu } from "react-icons/gi"; +import { ModalMenuComponent } from "../modal/modalMenu"; +import { MenuComponent } from "./menu"; + +interface HeaderProps { + handleOpenModal: () => void; +} + +export default function HeaderComponent({ handleOpenModal }: HeaderProps) { + return ( +
+
+ cart icon +
+
+ +
+
+ handleOpenModal()} /> +
+
+ ); +} diff --git a/src/components/header/menu.tsx b/src/components/header/menu.tsx new file mode 100644 index 0000000..f9018bc --- /dev/null +++ b/src/components/header/menu.tsx @@ -0,0 +1,54 @@ +import { AnchorComponent } from "@components/util/Anchor"; +import Image from "next/image"; +import React from "react"; + +export function MenuComponent() { + return ( + + ); +} diff --git a/src/components/modal/modalMenu.tsx b/src/components/modal/modalMenu.tsx new file mode 100644 index 0000000..b806a27 --- /dev/null +++ b/src/components/modal/modalMenu.tsx @@ -0,0 +1,40 @@ +import { ReactNode, useState } from "react"; + +interface PropsNewModal { + onClose: () => void; + children: ReactNode; +} + +export function ModalMenuComponent({ onClose, children }: PropsNewModal) { + const [animation, setAnimation] = useState(false); + + const handleOutsideClick = (e: any) => { + setAnimation(true); + if (e.target.id === "external") { + setTimeout(onClose, 200); + } + }; + + return ( + <> +