diff --git a/package-lock.json b/package-lock.json index 07cca9d..aa79231 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "react-dom": "^18.3.1", "react-router-dom": "^7.0.1", "react-scripts": "5.0.1", + "styled-components": "^6.1.14", "web-vitals": "^2.1.4" } }, @@ -2232,6 +2233,27 @@ "postcss-selector-parser": "^6.0.10" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", + "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", + "license": "MIT", + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==", + "license": "MIT" + }, + "node_modules/@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==", + "license": "MIT" + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz", @@ -3984,6 +4006,12 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz", "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==" }, + "node_modules/@types/stylis": { + "version": "4.2.5", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz", + "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==", + "license": "MIT" + }, "node_modules/@types/testing-library__jest-dom": { "version": "5.14.9", "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz", @@ -5422,6 +5450,15 @@ "node": ">= 6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -5919,6 +5956,15 @@ "postcss": "^8.4" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "license": "ISC", + "engines": { + "node": ">=4" + } + }, "node_modules/css-declaration-sorter": { "version": "6.4.1", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz", @@ -6060,6 +6106,17 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "license": "MIT", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -14210,6 +14267,12 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==", + "license": "MIT" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -14773,6 +14836,68 @@ "webpack": "^5.0.0" } }, + "node_modules/styled-components": { + "version": "6.1.14", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.14.tgz", + "integrity": "sha512-KtfwhU5jw7UoxdM0g6XU9VZQFV4do+KrM8idiVCH5h4v49W+3p3yMe0icYwJgZQZepa5DbH04Qv8P0/RdcLcgg==", + "license": "MIT", + "dependencies": { + "@emotion/is-prop-valid": "1.2.2", + "@emotion/unitless": "0.8.1", + "@types/stylis": "4.2.5", + "css-to-react-native": "3.2.0", + "csstype": "3.1.3", + "postcss": "8.4.38", + "shallowequal": "1.1.0", + "stylis": "4.3.2", + "tslib": "2.6.2" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" + } + }, + "node_modules/styled-components/node_modules/postcss": { + "version": "8.4.38", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", + "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.7", + "picocolors": "^1.0.0", + "source-map-js": "^1.2.0" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/styled-components/node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", + "license": "0BSD" + }, "node_modules/stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", @@ -14788,6 +14913,12 @@ "postcss": "^8.2.15" } }, + "node_modules/stylis": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz", + "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==", + "license": "MIT" + }, "node_modules/sucrase": { "version": "3.35.0", "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz", diff --git a/package.json b/package.json index 4acec05..002bc49 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "react-dom": "^18.3.1", "react-router-dom": "^7.0.1", "react-scripts": "5.0.1", + "styled-components": "^6.1.14", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/src/App.js b/src/App.js index fbcb892..af76262 100644 --- a/src/App.js +++ b/src/App.js @@ -1,12 +1,25 @@ import './App.css'; import { Routes, Route } from 'react-router-dom'; +import { NavBar } from './components/NavBar'; import { HomePage } from './pages/HomePage'; +import { KidsPage } from './pages/kids/KidsPage'; +import { MenPage } from './pages/men/MenPage'; +import { SalePage } from './pages/sale/SalePage'; +import { SportPage } from './pages/sport/SportPage'; +import { WomenPage } from './pages/women/WomenPage'; + function App() { return ( <> + } path='/'> + } path='/kids'> + } path='/men'> + } path='/sale'> + } path='/sport'> + } path='/women'> ); diff --git a/src/components/Breadcrumbs.js b/src/components/Breadcrumbs.js new file mode 100644 index 0000000..c22612d --- /dev/null +++ b/src/components/Breadcrumbs.js @@ -0,0 +1,30 @@ +import Breadcrumb from 'react-bootstrap/Breadcrumb'; +import {Link} from 'react-router-dom' + +export const Breadcrumbs = ({ + links +}) => { + // Usage Example: + // + return ( + + {links.map(({ name, href }, index) => ( + + {index === links.length - 1 ? ( + name + ) : ( + + {name} + + )} + + ))} + + ); +} \ No newline at end of file diff --git a/src/components/CustomDropdown.js b/src/components/CustomDropdown.js new file mode 100644 index 0000000..0ee34ce --- /dev/null +++ b/src/components/CustomDropdown.js @@ -0,0 +1,17 @@ +import Dropdown from 'react-bootstrap/Dropdown'; + +export const CustomDropdown = () => { + return ( + + + Sort By + + + + Price Low to High + Price High to Low + Newest + + + ); +} \ No newline at end of file diff --git a/src/components/NavBar.js b/src/components/NavBar.js index 0b0fde6..4281805 100644 --- a/src/components/NavBar.js +++ b/src/components/NavBar.js @@ -1,4 +1,6 @@ import { useState } from "react" +import styled from 'styled-components' +import { Link } from "react-router-dom" import { Container, Row, @@ -6,7 +8,6 @@ import { } from "react-bootstrap" import brand from '../assets/brand.png' import search from '../assets/search.png' -import heart from '../assets/heart.png' import cart from '../assets/cart.png' import user from '../assets/user.png' import { MenuIcon } from "../icon/MenuIcon" @@ -22,69 +23,130 @@ export const NavBar = () => { return ( <> - { - isShowSideBar && -
- -
- } - + {isShowSideBar && ( +
+ + + + brand + + + Women + Men + Kids + Sport + Sale + +
+ )} + + + + + + + + + brand + + + + + brand + + + Women + Men + Kids + Sport + Sale + + + + + + search + + + + cart + + + user + + + + + + - ) -} \ No newline at end of file + ); +} + +const Navbar = styled.nav` + background-color: #272727; + color: #F4E3D2; + position: fixed; + width: 100%; + z-index: 9999; +`; + +const NavList = styled.ul` + display: flex; + align-items: center; + padding: 0; + margin: 0; + list-style: none; +`; + +const NavItem = styled.li` + padding: 20px 10px; + + a { + font-weight: bold; + color: inherit; + text-decoration: none; + } +`; + +const Brand = styled.li` + padding-bottom: 5px; + padding-top: 0 !important; +`; + +const SearchContainer = styled.div` + position: relative; + display: flex; + align-items: center; + + input { + margin-right: 20px; + background-color: #272727; + border: solid 1px #fff; + color: #F4E3D2; + font-size: 14px; + padding: 5px 5px 5px 40px; + } + + img { + position: absolute; + padding-left: 15px; + } +`; + +const RightColumn = styled(Col)` + display: flex; + align-items: center; + justify-content: flex-end; +`; + +const CartLinks = styled.div` + display: flex; + align-items: center; +`; + +const NavCartLink = styled.a` + padding: 0 10px; +`; \ No newline at end of file diff --git a/src/icon/MenuIcon.js b/src/icon/MenuIcon.js index 2a95989..1980203 100644 --- a/src/icon/MenuIcon.js +++ b/src/icon/MenuIcon.js @@ -1,7 +1,7 @@ export const MenuIcon = () => { return ( - - + + ) } \ No newline at end of file diff --git a/src/index.css b/src/index.css index 576c899..1896550 100644 --- a/src/index.css +++ b/src/index.css @@ -20,67 +20,6 @@ code { monospace; } -/* NavBar */ -.c-navbar { - background-color: #272727; - color: #F4E3D2; - position: fixed; - width: 100%; - z-index: 9999; -} -.c-navbar ul { - display: flex; - align-items: center; - padding: 0; - margin: 0; -} -.c-brand { - padding-bottom: 5px; - padding-top: 0 !important; -} -.c-navbar ul li { - list-style-type: none; - padding: 20px 10px; -} -.c-navbar ul li a { - font-weight: bold; -} -.c-cart-links input::placeholder { - color:#F4E3D2; - padding-left: 20px; -} -.c-search { - position: relative; - display: flex; - align-items: center; -} -.c-search input { - margin-right: 20px; -} -.c-search img { - position: absolute; - padding-left: 15px; -} -.c-cart-links input{ - background-color: #272727; - border: solid 1px #fff; - box-sizing: border-box; - color: #F4E3D2; - font-size: 14px; - padding: 5px 5px 5px 40px; -} -.c-right-column { - align-items: center; - display: flex; - justify-content: flex-end; -} -.c-cart-links { - display: flex; - align-items: center; -} -.c-nav-cart-link { - padding: 0 10px; -} /* Header */ .c-header-bg { diff --git a/src/pages/CategoryTemplate.js b/src/pages/CategoryTemplate.js new file mode 100644 index 0000000..8a9dba7 --- /dev/null +++ b/src/pages/CategoryTemplate.js @@ -0,0 +1,7 @@ +export const CategoryTemplate = () => { + return ( + <> + + + ) +} \ No newline at end of file diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js index ab841cf..f18bf1a 100644 --- a/src/pages/HomePage.js +++ b/src/pages/HomePage.js @@ -1,4 +1,3 @@ -import { NavBar } from "../components/NavBar" import { Header } from "../components/Header" import { HotDeals } from "../components/HotDeals" import { Trending } from "../components/Trending" @@ -9,7 +8,6 @@ import { Footer } from "../components/Footer" export const HomePage = () => { return ( <> -
diff --git a/src/pages/kids/KidsPage.js b/src/pages/kids/KidsPage.js new file mode 100644 index 0000000..49ffd06 --- /dev/null +++ b/src/pages/kids/KidsPage.js @@ -0,0 +1,40 @@ +import { + Container, + Row, + Col +} from "react-bootstrap" +import styled from "styled-components" +import { Breadcrumbs } from "../../components/Breadcrumbs" + +export const KidsPage = () => { + return ( + <> + + + + + + + + + Kids + + + + + ) +} + +const CategoryContainer = styled.div` + padding-top: 100px; +` +const CategoryTitle = styled.h1` + color: #222; + text-transform: uppercase; + font-weight: 600; +` \ No newline at end of file diff --git a/src/pages/men/MenPage.js b/src/pages/men/MenPage.js new file mode 100644 index 0000000..8ef3b97 --- /dev/null +++ b/src/pages/men/MenPage.js @@ -0,0 +1,40 @@ +import { + Container, + Row, + Col +} from "react-bootstrap" +import styled from "styled-components" +import { Breadcrumbs } from "../../components/Breadcrumbs" + +export const MenPage = () => { + return ( + <> + + + + + + + + + Men + + + + + ) +} + +const CategoryContainer = styled.div` + padding-top: 100px; +` +const CategoryTitle = styled.h1` + color: #222; + text-transform: uppercase; + font-weight: 600; +` \ No newline at end of file diff --git a/src/pages/sale/SalePage.js b/src/pages/sale/SalePage.js new file mode 100644 index 0000000..b5f8dd6 --- /dev/null +++ b/src/pages/sale/SalePage.js @@ -0,0 +1,40 @@ +import { + Container, + Row, + Col +} from "react-bootstrap" +import styled from "styled-components" +import { Breadcrumbs } from "../../components/Breadcrumbs" + +export const SalePage = () => { + return ( + <> + + + + + + + + + Sale + + + + + ) +} + +const CategoryContainer = styled.div` + padding-top: 100px; +` +const CategoryTitle = styled.h1` + color: #222; + text-transform: uppercase; + font-weight: 600; +` \ No newline at end of file diff --git a/src/pages/sport/SportPage.js b/src/pages/sport/SportPage.js new file mode 100644 index 0000000..ec430c2 --- /dev/null +++ b/src/pages/sport/SportPage.js @@ -0,0 +1,40 @@ +import { + Container, + Row, + Col +} from "react-bootstrap" +import styled from "styled-components" +import { Breadcrumbs } from "../../components/Breadcrumbs" + +export const SportPage = () => { + return ( + <> + + + + + + + + + Sport + + + + + ) +} + +const CategoryContainer = styled.div` + padding-top: 100px; +` +const CategoryTitle = styled.h1` + color: #222; + text-transform: uppercase; + font-weight: 600; +` \ No newline at end of file diff --git a/src/pages/women/WomenPage.js b/src/pages/women/WomenPage.js new file mode 100644 index 0000000..f0a60ba --- /dev/null +++ b/src/pages/women/WomenPage.js @@ -0,0 +1,51 @@ +import { + Container, + Row, + Col +} from "react-bootstrap" +import styled from "styled-components" +import { Breadcrumbs } from "../../components/Breadcrumbs" +import {CustomDropdown} from "../../components/CustomDropdown" + +export const WomenPage = () => { + return ( + <> + + + + + + + +
+ + + Women + + + +
+ + + + ) +} + +const CategoryContainer = styled.div` + padding-top: 100px; +` +const CategoryTitle = styled.h1` + color: #222; + text-transform: uppercase; + font-weight: 600; +` +const CategoryFilter = styled.div` + display: flex; + justify-content: space-between; + align-items: center; +` \ No newline at end of file