├── sonar-project.properties ├── public ├── favicon.ico ├── logo192.png ├── logo512.png ├── robots.txt ├── manifest.json └── index.html ├── src ├── components │ ├── body │ │ ├── MyntraBanner.jpg │ │ ├── Home.js │ │ ├── Timer.js │ │ ├── BodyMain.js │ │ └── imgUrl.js │ ├── wishlist │ │ └── WishList.js │ ├── women │ │ └── WomenBody.js │ ├── Men.js │ │ └── MenBody.js │ ├── filter │ │ ├── FilterCards.js │ │ ├── filter.js │ │ └── FilterMen.js │ ├── login │ │ └── LogIn.js │ ├── kids │ │ └── KidsBody.js │ ├── homeAndLiving │ │ └── HomeAndLiving.js │ ├── footer │ │ └── Footer.js │ └── navigation │ │ └── Navigation.js ├── setupTests.js ├── App.test.js ├── index.css ├── reportWebVitals.js ├── index.js ├── App.css └── App.js ├── EKS-TF ├── backend.tf ├── provider.tf └── main.tf ├── .gitignore ├── Dockerfile ├── deployment-service.yml ├── README.md ├── package.json └── .github └── workflows └── build.yml /sonar-project.properties: -------------------------------------------------------------------------------- 1 | sonar.projectKey=myntra 2 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aj7Ay/Myntra-Clone/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aj7Ay/Myntra-Clone/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aj7Ay/Myntra-Clone/HEAD/public/logo512.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/components/body/MyntraBanner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aj7Ay/Myntra-Clone/HEAD/src/components/body/MyntraBanner.jpg -------------------------------------------------------------------------------- /EKS-TF/backend.tf: -------------------------------------------------------------------------------- 1 | terraform { 2 | backend "s3" { 3 | bucket = "ajay-mrcloudbook777" # Replace with your actual S3 bucket name 4 | key = "EKS/terraform.tfstate" 5 | region = "ap-south-1" 6 | } 7 | } -------------------------------------------------------------------------------- /EKS-TF/provider.tf: -------------------------------------------------------------------------------- 1 | terraform { 2 | required_providers { 3 | aws = { 4 | source = "hashicorp/aws" 5 | version = "~> 5.0" 6 | } 7 | } 8 | } 9 | 10 | # Configure the AWS Provider 11 | provider "aws" { 12 | region = "ap-south-1" 13 | } -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/components/body/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import BodyMain from './BodyMain' 3 | import Footer from '../footer/Footer' 4 | 5 | function Home() { 6 | return ( 7 |
8 | 9 |
10 |
11 | ) 12 | } 13 | 14 | export default Home -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | # Use node:alpine as the base image 2 | FROM node:alpine 3 | 4 | # Set the working directory inside the container 5 | WORKDIR /app 6 | 7 | # Copy package.json and package-lock.json to the container 8 | COPY package.json package-lock.json ./ 9 | 10 | # Install dependencies 11 | RUN npm install 12 | 13 | # Copy the entire project to the container 14 | COPY . . 15 | 16 | # Build the React app 17 | RUN npm run build 18 | 19 | # Expose port 3000 (change if your app runs on a different port) 20 | EXPOSE 3000 21 | 22 | # Start the React app 23 | CMD ["npm", "start"] 24 | 25 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /deployment-service.yml: -------------------------------------------------------------------------------- 1 | --- 2 | apiVersion: apps/v1 3 | kind: Deployment 4 | metadata: 5 | name: myntra 6 | spec: 7 | replicas: 1 8 | selector: 9 | matchLabels: 10 | app: myntra 11 | template: 12 | metadata: 13 | labels: 14 | app: myntra 15 | spec: 16 | containers: 17 | - name: myntra 18 | image: sevenajay/myntra:latest 19 | ports: 20 | - containerPort: 3000 # Use port 3000 21 | 22 | --- 23 | apiVersion: v1 24 | kind: Service 25 | metadata: 26 | name: myntra-service 27 | spec: 28 | selector: 29 | app: myntra 30 | ports: 31 | - protocol: TCP 32 | port: 80 # Expose port 80 33 | targetPort: 3000 34 | type: LoadBalancer 35 | -------------------------------------------------------------------------------- /src/components/wishlist/WishList.js: -------------------------------------------------------------------------------- 1 | import { Button } from '@mui/material' 2 | import React from 'react' 3 | import { withRouter } from 'react-router-dom' 4 | 5 | function WishList(props) { 6 | return ( 7 |
8 |

PLEASE LOG IN

9 |

Login to view items in your wishlist.

10 | 16 |
17 | ) 18 | } 19 | 20 | export default withRouter(WishList) -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | /* text-align: center; */ 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | 40 | .filterBorder{ 41 | border-bottom: 1px solid #9e9e9e; 42 | border-right: 1px solid #9e9e9e; 43 | border-top: 1px solid #9e9e9e; 44 | } 45 | 46 | .myntraColor{ 47 | color:'#ff0066' 48 | } 49 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Home 2 | House-living 3 | Login 4 | Body 5 | Kids 6 | men 7 | Women 8 | Footer 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "myntra", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@emotion/react": "^11.8.2", 7 | "@emotion/styled": "^11.8.1", 8 | "@mui/icons-material": "^5.5.1", 9 | "@mui/material": "^5.5.1", 10 | "@testing-library/jest-dom": "^5.16.2", 11 | "@testing-library/react": "^12.1.4", 12 | "@testing-library/user-event": "^13.5.0", 13 | "bootstrap": "^5.1.3", 14 | "react": "^17.0.2", 15 | "react-dom": "^17.0.2", 16 | "react-router-dom": "^5.3.0", 17 | "react-scripts": "5.0.0", 18 | "web-vitals": "^2.1.4" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject" 25 | }, 26 | "eslintConfig": { 27 | "extends": [ 28 | "react-app", 29 | "react-app/jest" 30 | ] 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react'; 2 | import 'bootstrap/dist/css/bootstrap.min.css' 3 | import './App.css'; 4 | import Navigation from './components/navigation/Navigation'; 5 | import Home from './components/body/Home'; 6 | import { BrowserRouter as Router, Route } from 'react-router-dom' 7 | import Footer from './components/footer/Footer'; 8 | import MenBody from './components/Men.js/MenBody'; 9 | import WomenBody from './components/women/WomenBody'; 10 | import KidsBody from './components/kids/KidsBody'; 11 | import HomeAndLiving from './components/homeAndLiving/HomeAndLiving'; 12 | import LogIn from './components/login/LogIn'; 13 | import WishList from './components/wishlist/WishList'; 14 | import FilterMen from './components/filter/FilterMen'; 15 | 16 | 17 | function App() { 18 | 19 | return ( 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 |
34 |
35 |
36 | 37 | ); 38 | } 39 | 40 | export default App; 41 | -------------------------------------------------------------------------------- /.github/workflows/build.yml: -------------------------------------------------------------------------------- 1 | name: Build, Analyze, and Scans 2 | on: 3 | push: 4 | branches: 5 | - main 6 | jobs: 7 | build-analyze-scan: 8 | name: Build, Analyze, and Scan 9 | runs-on: [self-hosted] 10 | steps: 11 | - name: Checkout code 12 | uses: actions/checkout@v2 13 | with: 14 | fetch-depth: 0 # Shallow clones should be disabled for a better relevancy of analysis 15 | 16 | - name: Build and analyze with SonarQube 17 | uses: sonarsource/sonarqube-scan-action@master 18 | env: 19 | SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }} 20 | SONAR_HOST_URL: ${{ secrets.SONAR_HOST_URL }} 21 | 22 | - name: NPM Install 23 | run: npm install # Add your specific npm install command 24 | 25 | - name: Docker Login 26 | run: docker login -u ${{ secrets.DOCKERHUB_USERNAME }} -p ${{ secrets.DOCKERHUB_TOKEN }} 27 | 28 | - name: Docker Scout Scan 29 | run: | 30 | docker-scout quickview fs://. 31 | docker-scout cves fs://. 32 | 33 | - name: Docker build and push 34 | run: | 35 | # Run commands to build and push Docker images 36 | docker build -t myntra . 37 | docker tag myntra sevenajay/myntra:latest 38 | docker login -u ${{ secrets.DOCKERHUB_USERNAME }} -p ${{ secrets.DOCKERHUB_TOKEN }} 39 | docker push sevenajay/myntra:latest 40 | env: 41 | DOCKER_CLI_ACI: 1 42 | 43 | - name: Docker Scout Image Scan 44 | run: | 45 | docker-scout quickview sevenajay/myntra:latest 46 | docker-scout cves sevenajay/myntra:latest 47 | 48 | 49 | -------------------------------------------------------------------------------- /src/components/body/Timer.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react' 2 | 3 | function Timer() { 4 | const [sec, setsec] = useState(); 5 | const [min, setmin] = useState(); 6 | const [hour, sethour] = useState(); 7 | 8 | useEffect(() => { 9 | startTimmer() 10 | }, []); 11 | 12 | let interval; 13 | 14 | const startTimmer = () => { 15 | const countDounDate = new Date('May 30,2022').getTime() 16 | // console.log(countDounDate); 17 | 18 | interval = setInterval(() => { 19 | const now = new Date().getTime() 20 | const distance = countDounDate - now; 21 | 22 | // const days = Math.floor(distance / (24 * 60 * 60 * 1000)) 23 | const hours = Math.floor( 24 | (distance % (24 * 60 * 60 * 1000) / (1000 * 60 * 60)) 25 | ) 26 | 27 | const minutes = Math.floor( 28 | (distance % (60 * 60 * 1000) / (1000 * 60)) 29 | ) 30 | 31 | const seconds = Math.floor( 32 | (distance % (60 * 1000) / (1000)) 33 | ) 34 | // console.log(days); 35 | 36 | if (distance < 0) { 37 | //stop timmer 38 | clearInterval(interval.current) 39 | } else { 40 | //update 41 | sethour(hours) 42 | setmin(minutes) 43 | setsec(seconds) 44 | } 45 | }) 46 | } 47 | 48 | startTimmer() 49 | 50 | return ( 51 | <> 52 |
53 |

Sale Ends In {`${hour} h: ${min} m: ${sec} s`}

54 |
55 | 56 | ) 57 | } 58 | 59 | export default Timer -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/components/women/WomenBody.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { imgMenArr, imgWomenArr, imgWomenOfferArr, offerImg } from '../body/imgUrl' 3 | 4 | function WomenBody() { 5 | return ( 6 |
7 | banner 10 | 11 | banner 14 | 15 |
16 | {imgWomenArr.map(val => { 17 | console.log(val) 18 | return shradda 19 | })} 20 |
21 | 22 | banner 25 | 26 |
27 | {imgWomenOfferArr.map(val => { 28 | console.log(val) 29 | return shradda 30 | })} 31 |
32 | 33 | 34 | banner 37 | 38 |
39 | {imgWomenArr.map(val => { 40 | console.log(val) 41 | return shradda 42 | })} 43 |
44 |
45 | ) 46 | } 47 | 48 | export default WomenBody -------------------------------------------------------------------------------- /src/components/Men.js/MenBody.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { withRouter } from 'react-router-dom' 3 | import { imgMenArr, offerImg } from '../body/imgUrl' 4 | 5 | function MenBody(props) { 6 | return ( 7 |
8 | { props.history.push('/filtermen') }} 9 | src='https://i.pinimg.com/originals/6f/66/29/6f66290a7db1fb8b61ff90529435d5be.jpg' 10 | height={'350px'} alt='banner' /> 11 | 12 | banner 15 | 16 |
17 | {imgMenArr.map(val => { 18 | return { props.history.push('/filtermen') }} 20 | className='col-2' alt='shradda' /> 21 | })} 22 |
23 | 24 | banner 27 | 28 |
29 | {offerImg.map(val => { 30 | console.log(val) 31 | return {props.history.push('/filtermen')}} 33 | className='col-2' alt='shradda' /> 34 | })} 35 |
36 | 37 | 38 | banner 41 | 42 |
43 | {imgMenArr.map(val => { 44 | console.log(val) 45 | return {props.history.push('/filtermen')}} 47 | className='col-2' alt='shradda' /> 48 | })} 49 |
50 |
51 | ) 52 | } 53 | 54 | export default withRouter(MenBody) -------------------------------------------------------------------------------- /src/components/filter/FilterCards.js: -------------------------------------------------------------------------------- 1 | import { Card, CardActionArea, CardContent, CardMedia, Typography } from '@mui/material' 2 | import React from 'react' 3 | import { fullArr } from './filter' 4 | 5 | function FilterCards({ brandFilter, priceFilter, discFilter }) { 6 | 7 | const arr = fullArr.filter((val, ind) => { 8 | if (!brandFilter) { 9 | return val 10 | } else if (val.brand === brandFilter) { 11 | console.log(val.brand) 12 | return val 13 | } else { 14 | return null 15 | } 16 | }) 17 | // console.log(arr); 18 | 19 | 20 | return ( 21 |
22 |
23 | {arr.map((val, ind) => { 24 | return 29 | 30 | 36 | 37 | 39 | {val.brand} 40 | 41 | 42 | {val.size} 43 | {`Rs.${val.offerPrice}`} 44 | {` Rs.${val.actualPrice}`} 45 | {`(${val.offerPer}%OFF)`} 46 | 47 | 48 | 49 | 50 | })} 51 | 52 |
53 |
54 | ) 55 | } 56 | 57 | export default FilterCards -------------------------------------------------------------------------------- /src/components/body/BodyMain.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { brandImg, imgArr } from './imgUrl' 3 | import { offerImg } from './imgUrl'; 4 | import Timer from './Timer'; 5 | 6 | function BodyMain() { 7 | return ( 8 |
9 | 10 | banner 13 | 14 | banner 17 | 18 |
19 | {imgArr.map(val => { 20 | {/* console.log(val) */} 21 | return shradda 22 | })} 23 |
24 | 25 | banner 28 | 29 |
30 | {offerImg.map(val => { 31 | {/* console.log(val) */} 32 | return shradda 33 | })} 34 |
35 | 36 | 37 | banner 40 | 41 |
42 | {imgArr.map(val => { 43 | {/* console.log(val) */} 44 | return shradda 45 | })} 46 |
47 | 48 | banner 51 | 52 |
53 | {brandImg.map(val => { 54 | {/* console.log(val) */} 55 | return shradda 56 | })} 57 |
58 | 59 |
60 | ) 61 | } 62 | 63 | export default BodyMain -------------------------------------------------------------------------------- /src/components/login/LogIn.js: -------------------------------------------------------------------------------- 1 | import { Button, Card, CardMedia, TextField, Typography } from '@mui/material' 2 | import React from 'react' 3 | 4 | function LogIn() { 5 | return ( 6 |
7 | 8 | 14 |
15 | 16 |

Login or 17 | Signup

18 | 19 | 23 | 24 | 25 |

By continuing , I agree to the 26 | Terms of use & 27 | Privacy Policy

28 | 29 | 30 | 35 | 36 | 37 |

Have trouble logging in ? 38 | Get help

39 | 40 |
41 | 42 |
43 | ) 44 | } 45 | 46 | export default LogIn -------------------------------------------------------------------------------- /src/components/kids/KidsBody.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { imgKidsArr, imgWomenArr, imgWomenOfferArr } from '../body/imgUrl' 3 | 4 | function KidsBody() { 5 | return ( 6 |
7 | banner 10 | 11 | banner 14 | 15 |
16 | {imgKidsArr.map(val => { 17 | console.log(val) 18 | return shradda 19 | })} 20 |
21 | 22 | banner 25 | 26 |
27 | banner 30 | banner 33 |
34 | 35 | banner 38 | 39 |
40 | {imgKidsArr.map(val => { 41 | console.log(val) 42 | return shradda 43 | })} 44 |
45 |
46 | ) 47 | } 48 | 49 | export default KidsBody -------------------------------------------------------------------------------- /src/components/homeAndLiving/HomeAndLiving.js: -------------------------------------------------------------------------------- 1 | import { Card, CardActions, CardContent, CardMedia, Typography } from '@mui/material' 2 | import React from 'react' 3 | import { imgMenArr, offerImg } from '../body/imgUrl' 4 | 5 | function HomeAndLiving() { 6 | return ( 7 |
8 | banner 11 | 12 | {/* banner */} 15 | 16 |

NICE TO SEE YOU HERE, COME ON IN!

17 |
18 | 19 | 26 | 27 | 28 | 29 | 36 | 37 |
38 | 39 | 40 |
41 | 42 | 49 | 50 | 51 | 52 | 59 | 60 |
61 | 62 |
63 | ) 64 | } 65 | 66 | export default HomeAndLiving -------------------------------------------------------------------------------- /EKS-TF/main.tf: -------------------------------------------------------------------------------- 1 | data "aws_iam_policy_document" "assume_role" { 2 | statement { 3 | effect = "Allow" 4 | 5 | principals { 6 | type = "Service" 7 | identifiers = ["eks.amazonaws.com"] 8 | } 9 | 10 | actions = ["sts:AssumeRole"] 11 | } 12 | } 13 | 14 | resource "aws_iam_role" "example" { 15 | name = "eks-cluster-cloud" 16 | assume_role_policy = data.aws_iam_policy_document.assume_role.json 17 | } 18 | 19 | resource "aws_iam_role_policy_attachment" "example-AmazonEKSClusterPolicy" { 20 | policy_arn = "arn:aws:iam::aws:policy/AmazonEKSClusterPolicy" 21 | role = aws_iam_role.example.name 22 | } 23 | 24 | #get vpc data 25 | data "aws_vpc" "default" { 26 | default = true 27 | } 28 | #get public subnets for cluster 29 | data "aws_subnets" "public" { 30 | filter { 31 | name = "vpc-id" 32 | values = [data.aws_vpc.default.id] 33 | } 34 | } 35 | #cluster provision 36 | resource "aws_eks_cluster" "example" { 37 | name = "EKS_CLOUD" 38 | role_arn = aws_iam_role.example.arn 39 | 40 | vpc_config { 41 | subnet_ids = data.aws_subnets.public.ids 42 | } 43 | 44 | # Ensure that IAM Role permissions are created before and deleted after EKS Cluster handling. 45 | # Otherwise, EKS will not be able to properly delete EKS managed EC2 infrastructure such as Security Groups. 46 | depends_on = [ 47 | aws_iam_role_policy_attachment.example-AmazonEKSClusterPolicy, 48 | ] 49 | } 50 | 51 | resource "aws_iam_role" "example1" { 52 | name = "eks-node-group-cloud" 53 | 54 | assume_role_policy = jsonencode({ 55 | Statement = [{ 56 | Action = "sts:AssumeRole" 57 | Effect = "Allow" 58 | Principal = { 59 | Service = "ec2.amazonaws.com" 60 | } 61 | }] 62 | Version = "2012-10-17" 63 | }) 64 | } 65 | 66 | resource "aws_iam_role_policy_attachment" "example-AmazonEKSWorkerNodePolicy" { 67 | policy_arn = "arn:aws:iam::aws:policy/AmazonEKSWorkerNodePolicy" 68 | role = aws_iam_role.example1.name 69 | } 70 | 71 | resource "aws_iam_role_policy_attachment" "example-AmazonEKS_CNI_Policy" { 72 | policy_arn = "arn:aws:iam::aws:policy/AmazonEKS_CNI_Policy" 73 | role = aws_iam_role.example1.name 74 | } 75 | 76 | resource "aws_iam_role_policy_attachment" "example-AmazonEC2ContainerRegistryReadOnly" { 77 | policy_arn = "arn:aws:iam::aws:policy/AmazonEC2ContainerRegistryReadOnly" 78 | role = aws_iam_role.example1.name 79 | } 80 | 81 | #create node group 82 | resource "aws_eks_node_group" "example" { 83 | cluster_name = aws_eks_cluster.example.name 84 | node_group_name = "Node-cloud" 85 | node_role_arn = aws_iam_role.example1.arn 86 | subnet_ids = data.aws_subnets.public.ids 87 | 88 | scaling_config { 89 | desired_size = 1 90 | max_size = 2 91 | min_size = 1 92 | } 93 | instance_types = ["t2.medium"] 94 | 95 | # Ensure that IAM Role permissions are created before and deleted after EKS Node Group handling. 96 | # Otherwise, EKS will not be able to properly delete EC2 Instances and Elastic Network Interfaces. 97 | depends_on = [ 98 | aws_iam_role_policy_attachment.example-AmazonEKSWorkerNodePolicy, 99 | aws_iam_role_policy_attachment.example-AmazonEKS_CNI_Policy, 100 | aws_iam_role_policy_attachment.example-AmazonEC2ContainerRegistryReadOnly, 101 | ] 102 | } -------------------------------------------------------------------------------- /src/components/filter/filter.js: -------------------------------------------------------------------------------- 1 | export const fullArr = [ 2 | { 3 | id: '1', 4 | brand: 'Roadster', 5 | size: 'Size : L, M, XL ', 6 | offerPrice: 2400, 7 | actualPrice: 4000, 8 | offerPer: 40, 9 | img: 'https://assets.myntassets.com/f_webp,dpr_1.8,q_60,w_210,c_limit,fl_progressive/assets/images/13640716/2021/5/24/31aa7072-e485-4398-b590-a012ec5376431621838454751JeansRoadsterMenJeansRoadsterMenTrackPantsHRXbyHrithikRoshan3.jpg' 10 | }, 11 | { 12 | id: '2', 13 | brand: 'Huetrap', 14 | offerPrice: 3999, 15 | actualPrice: 4999, 16 | offerPer: 20, 17 | size: 'Size : S, L, M ', 18 | img: 'https://assets.myntassets.com/f_webp,dpr_1.8,q_60,w_210,c_limit,fl_progressive/assets/images/13711930/2021/3/5/40314fc8-e5e8-4532-a79f-6b791664725b1614923684175-US-Polo-Assn-Men-Tshirts-101614923682379-1.jpg' 19 | }, 20 | { 21 | id: '3', 22 | brand: 'WROGN', 23 | offerPrice: 4680, 24 | actualPrice: 5200, 25 | offerPer: 10, 26 | size: 'Size : S, L, XL ', 27 | img: 'https://assets.myntassets.com/f_webp,dpr_1.8,q_60,w_210,c_limit,fl_progressive/assets/images/13640718/2021/3/26/6fe9359c-2c0e-40ae-aa9a-292c036ff3191616755603050-US-Polo-Assn-Men-Tshirts-4311616755596778-1.jpg' 28 | }, 29 | { 30 | id: '4', 31 | brand: 'Huetrap', 32 | offerPrice: 2799, 33 | actualPrice: 3999, 34 | offerPer: 30, 35 | size: 'Size : L, XL, XXL ', 36 | img: 'https://assets.myntassets.com/f_webp,dpr_1.8,q_60,w_210,c_limit,fl_progressive/assets/images/13640686/2021/4/19/7c7633fa-4ecd-45cb-bcab-8561eb0d4f301618815816061-US-Polo-Assn-Men-Tshirts-2761618815815624-1.jpg' 37 | }, 38 | { 39 | id: '5', 40 | brand: 'Roadster', 41 | offerPrice: 1999, 42 | actualPrice: 3333, 43 | offerPer: 40, 44 | size: 'Size : L, XXL', 45 | img: 'https://assets.myntassets.com/f_webp,dpr_1.8,q_60,w_210,c_limit,fl_progressive/assets/images/productimage/2020/1/17/8088e3c4-5737-482b-80de-8d9bcede75f81579215077796-1.jpg' 46 | }, 47 | { 48 | id: '6', 49 | brand: 'Puma', 50 | size: 'Size : S, M, L, XL', 51 | offerPrice: 1666, 52 | actualPrice: 2333, 53 | offerPer: 50, 54 | img: 'https://assets.myntassets.com/f_webp,dpr_1.8,q_60,w_210,c_limit,fl_progressive/assets/images/productimage/2020/3/21/3a5f75e7-bbb8-4951-b74f-6ce2986d3f001584744533983-1.jpg' 55 | }, 56 | 57 | 58 | { 59 | id: '7', 60 | brand: 'WROGN', 61 | size: 'Size : L, M, XL ', 62 | offerPrice: 2400, 63 | actualPrice: 4000, 64 | offerPer: 40, 65 | img: 'https://assets.myntassets.com/f_webp,dpr_1.8,q_60,w_210,c_limit,fl_progressive/assets/images/16823506/2022/1/25/c90ee451-4d5c-428d-99b4-17f9dcfcc1b01643107431164-INVICTUS-Men-Shirts-3401643107430603-1.jpg' 66 | }, 67 | { 68 | id: '8', 69 | brand: 'Puma', 70 | size: 'Size : S, M, L, XL', 71 | offerPrice: 1666, 72 | actualPrice: 2333, 73 | offerPer: 50, 74 | img: 'https://assets.myntassets.com/f_webp,dpr_1.8,q_60,w_210,c_limit,fl_progressive/assets/images/8889611/2019/3/20/3eae8fb4-b7ca-4e01-80bf-d1e59ab1568d1553080254589-Roadster-Men-Black--White-Regular-Fit-Checked-Casual-Shirt-9-1.jpg' 75 | }, { 76 | id: '9', 77 | brand: 'Roadster', 78 | size: 'Size : S, M, L, XL', 79 | offerPrice: 1666, 80 | actualPrice: 2333, 81 | offerPer: 50, 82 | img: 'https://assets.myntassets.com/f_webp,dpr_1.8,q_60,w_210,c_limit,fl_progressive/assets/images/1364628/2016/8/31/11472636737718-Roadster-Men-Blue-Regular-Fit-Printed-Casual-Shirt-6121472636737160-1.jpg' 83 | } 84 | ] 85 | 86 | export const gendArr = [ 87 | { 88 | value: 'male', 89 | lable: 'Male' 90 | }, 91 | { 92 | value: 'female', 93 | lable: 'Female' 94 | }, { 95 | value: 'boys', 96 | lable: 'Boys' 97 | }, { 98 | value: 'girls', 99 | lable: 'Girls' 100 | }, 101 | ] 102 | 103 | export const priceArr = [ 104 | { 105 | price: [499, 737], 106 | lable: 'Rs. 449 to Rs. 737' 107 | }, 108 | { 109 | price: [737, 1025], 110 | lable: 'Rs. 737 to Rs. 1025' 111 | }, 112 | { 113 | price: [1025, 1313], 114 | lable: 'Rs. 1025 to Rs. 1313' 115 | }, 116 | { 117 | price: [1313, 1601], 118 | lable: 'Rs. 1313 to Rs. 1601' 119 | } 120 | ] 121 | 122 | export const discArr = [ 123 | { 124 | disc:10, 125 | lable:'10% and above' 126 | }, 127 | { 128 | disc:20, 129 | lable:'20% and above' 130 | }, 131 | { 132 | disc:30, 133 | lable:'30% and above' 134 | }, 135 | { 136 | disc:40, 137 | lable:'40% and above' 138 | }, 139 | ] 140 | 141 | export const catArr =[ 142 | 'Tshirts', 143 | 'Shirts', 144 | 'Sweatshirts', 145 | 'Casual Shoes', 146 | 'Jackets' 147 | ] 148 | 149 | export const brandArr = [ 150 | 'Roadster', 151 | 'WROGN', 152 | 'Puma', 153 | 'Huetrap' 154 | ] -------------------------------------------------------------------------------- /src/components/footer/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import FacebookIcon from '@mui/icons-material/Facebook'; 3 | import TwitterIcon from '@mui/icons-material/Twitter'; 4 | import YouTubeIcon from '@mui/icons-material/YouTube'; 5 | import InstagramIcon from '@mui/icons-material/Instagram'; 6 | 7 | function Footer() { 8 | return ( 9 |
10 |
11 |
12 |

ONLINE SHOPPING

13 |

Men

14 |

Women

15 |

Kids

16 |

Home & Living

17 |

Beauty

18 |
19 | 20 |
21 |

USEFULL LINKS

22 |

Contact Us

23 |

FAQ

24 |

T&C

25 |

Terms of use

26 |

Track order

27 |

Shopping

28 |

Cancelation

29 |

Return

30 |

Whitehat

31 |

Blog

32 |

Careers

33 |

Privacy Policy

34 |

Site Map

35 |
36 | 37 |
38 |

EXPERIENCE MYNTRA APP ON MOBILE

39 | 40 | 41 | Google play 43 | 44 | 45 | 46 | Google play 48 | 49 | 50 |

KEEP IN TOUCH

51 |
52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 |
65 |
66 | 67 | 68 |
69 | 70 | original 72 |

73 | 100% ORIGINAL guarantee for all products at myntra.com


74 | 75 | 76 | original 78 |

Return within 30days of receiving your order

79 | 80 |
81 | 82 |
83 |
84 | ) 85 | } 86 | 87 | export default Footer -------------------------------------------------------------------------------- /src/components/body/imgUrl.js: -------------------------------------------------------------------------------- 1 | export const imgArr = [ 2 | {img:'https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/8/9ad28c6f-bb56-4d92-8d93-d81d698d1df41646716024394-stylishhandbags.jpg'}, 3 | {img:'https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/4/40c5c1d9-8f3d-42fc-9c52-0fefaf5fa56f1646397602527-Lotus-_Biotique.jpg'}, 4 | {img:'https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/10/23985261-f875-4e4a-9835-113395f7030a1646908185973-unnamed--70-.jpg'}, 5 | {img:'https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/8/01cfaa6a-ae61-4cf2-ab20-0d9c86493b991646716024362-comfyinneaerwear.jpg'}, 6 | {img:'https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/10/23985261-f875-4e4a-9835-113395f7030a1646908185973-unnamed--70-.jpg'}, 7 | {img:'https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/10/70a0268c-af3e-460a-8ee6-e33e937e44771646907588966-unnamed--68-.jpg'} 8 | ] 9 | 10 | export const offerImg = [ 11 | {img:'https://assets.myntassets.com/f_webp,w_196,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/8/146e1519-1e51-458e-ac86-0bcf2a960ed81646747314118-Kurtas-_-Kurta-Sets-Men.jpg'}, 12 | {img:'https://assets.myntassets.com/f_webp,w_196,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/8/ee94691e-c0f7-480e-8a35-8e9e4eaef5e81646747314141-Loungewear--Men.jpg'}, 13 | {img:'https://assets.myntassets.com/f_webp,w_196,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/8/98f1f5d8-4dea-4aa2-baa2-68776efd33cc1646747314195-Sandals.jpg'}, 14 | {img:'https://assets.myntassets.com/f_webp,w_196,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/8/dc3440ce-29c4-4b73-8b63-7abc2719e1911646747314329-T-Shirts--Men-.jpg'}, 15 | {img:'https://assets.myntassets.com/f_webp,w_196,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/8/dd45eb4a-5939-4a82-b6c5-6c8f383770591646747314042-Jeans--Men-.jpg'}, 16 | {img:'https://assets.myntassets.com/f_webp,w_196,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/8/3e707144-97c7-43b0-9015-185eecf8eeb91646747314294-Trackpants-Men.jpg'} 17 | ] 18 | 19 | export const imgMenArr = [ 20 | {img:'https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/8/60a262c5-9db6-48c4-bbe3-2617ecfb55161646716024402-summerreadytshirt.jpg'}, 21 | {img:'https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/8/03efe3ce-9a0e-40c3-bcc2-0fef4a105a481646715629512-trendycasualwear--.jpg'}, 22 | {img:'https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/8/4e956625-01c5-44d3-bb12-9e83e88e5a2c1646715629504-myntrauniquebrands.jpg'}, 23 | {img:'https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/8/01cfaa6a-ae61-4cf2-ab20-0d9c86493b991646716024362-comfyinneaerwear.jpg'}, 24 | {img:'https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/8/4e956625-01c5-44d3-bb12-9e83e88e5a2c1646715629504-myntrauniquebrands.jpg'}, 25 | {img:'https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/10/70a0268c-af3e-460a-8ee6-e33e937e44771646907588966-unnamed--68-.jpg'} 26 | ] 27 | 28 | export const imgWomenArr = [ 29 | {img:'https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/4/398e2bdd-f4b1-4b50-b11f-18a8a5e635f41646397602565-W-_Biba.jpg'}, 30 | {img:'https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/4/7b7ef71d-0c08-4833-8003-482df6d854971646397602518-Libas-_Varanga.jpg'}, 31 | {img:'https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/4/ff002c7e-3805-422c-88ca-47652697c3d41646397602509-Inddus-_Varanga.jpg'}, 32 | {img:'https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/4/398e2bdd-f4b1-4b50-b11f-18a8a5e635f41646397602565-W-_Biba.jpg'}, 33 | {img:'https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/4/b6c57a9e-da1b-49f1-8c6a-a3840550feb81646397602558-Vero_moda-_AND-_and_More-All_Whitesea-.png'}, 34 | {img:'https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/4/29c5afae-408e-4574-88f1-ff0b2ea066241646397602502-HRX-_Puma_-_More.jpg'} 35 | ] 36 | 37 | export const imgWomenOfferArr = [ 38 | {img:'https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/9/b2ba8538-0827-4592-bdfd-776a67b8f7c91646766029120-Sugar.jpg'}, 39 | {img:'https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/7/7d2f4f0f-9d88-45e9-b24e-a4475cb050771646663284272-Catwalk.jpg'}, 40 | {img:'https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/7/65d295ac-ddd2-44e2-be0f-91aa5d975ef11646663284589-Metro.jpg'}, 41 | {img:'https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/7/dbd541dc-3cfb-4f9b-8168-2a78045dcef21646663284484-Inc_5.jpg'}, 42 | {img:'https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/7/3e22daff-d990-4390-9770-ed85cdb0fd241646663284693-Priyaasi_.jpg'}, 43 | {img:'https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/7/8ae5d4ef-69e4-4ad7-aaaa-fe6b23f897401646663284501-KaratCart.jpg'} 44 | ] 45 | 46 | export const imgKidsArr = [ 47 | {img:'https://assets.myntassets.com/f_webp,w_163,c_limit,fl_progressive,dpr_2.0/assets/images/2020/11/9/f79446fb-46b9-455a-a6c0-4ffe3f58dd071604906586106-23-IconicBrands-H_M.jpg'}, 48 | {img:'https://assets.myntassets.com/f_webp,w_163,c_limit,fl_progressive,dpr_2.0/assets/images/2020/11/9/0f0d799d-cadd-42d9-b024-7fb0bd33cce11604906586007-21-IconicBrands-GAP.jpg'}, 49 | {img:'https://assets.myntassets.com/f_webp,w_163,c_limit,fl_progressive,dpr_2.0/assets/images/2020/11/9/2ba882da-667c-4f6e-a27e-292d0ffe477a1604906586228-26-IconicBrands-MangoKids.jpg'}, 50 | {img:'https://assets.myntassets.com/f_webp,w_163,c_limit,fl_progressive,dpr_2.0/assets/images/2020/11/9/37147834-2bc5-4cdb-8eb9-68bf0fd48ca01604906586191-25-IconicBrands-Chicco.jpg'}, 51 | {img:'https://assets.myntassets.com/f_webp,w_163,c_limit,fl_progressive,dpr_2.0/assets/images/2020/11/9/f23d49ee-a598-4039-a6cd-33dab8a7e2011604906586056-22-IconicBrands-M_S.jpg'}, 52 | {img:'https://assets.myntassets.com/f_webp,w_163,c_limit,fl_progressive,dpr_2.0/assets/images/2020/11/9/0f9ec937-304a-433a-9433-5409c556831c1604906586152-24-IconicBrands-TommyHilfiger.jpg'} 53 | ] 54 | 55 | export const brandImg = [ 56 | {img:'https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/7/f3439b22-2810-4ea2-895b-00291ea9cf191646663284762-Red_Tape.jpg'}, 57 | {img:'https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/7/cc0c3f56-5df6-4810-8295-612fbfac71ab1646663284203-Bata.jpg'}, 58 | {img:'https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/7/47c1eed0-2d8f-4f59-8c86-de272a0067b71646663284243-Campus.jpg'}, 59 | {img:'https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/7/c8b4922d-b478-4d7d-8706-95d198e90e8a1646663284772-Reebok_.jpg'}, 60 | {img:'https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/7/5f7f5ec6-f3cc-4d89-92e2-d15abd593b4b1646663284665-noise.jpg'}, 61 | {img:'https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/7/537fba63-3c73-4a9b-9a03-88ca2d1bd2f01646663284822-Safari.jpg'} 62 | ] -------------------------------------------------------------------------------- /src/components/filter/FilterMen.js: -------------------------------------------------------------------------------- 1 | import { Checkbox, FormControl, FormControlLabel, FormGroup, Radio, RadioGroup } from '@mui/material' 2 | import React, { useState } from 'react' 3 | import { catArr, discArr, gendArr, priceArr, brandArr } from './filter'; 4 | import FilterCards from './FilterCards' 5 | 6 | function FilterMen() { 7 | const [brandFilter, setbrandFilter] = useState(''); 8 | const [genFilter, setgenFilter] = useState(''); 9 | const [priceFilter, setpriceFilter] = useState(null); 10 | const [discFilter, setdiscFilter] = useState(0); 11 | const [catFilter, setcatFilter] = useState(''); 12 | 13 | 14 | const handleBrand = (e) => { 15 | console.log(e.target.value); 16 | if (e.target.checked) { 17 | setbrandFilter(e.target.value) 18 | } else { 19 | setbrandFilter('') 20 | } 21 | } 22 | 23 | const handleGen = (e) => { 24 | console.log(e.target.value); 25 | if (e.target.checked) { 26 | setgenFilter(e.target.value) 27 | } else { 28 | setgenFilter('') 29 | } 30 | } 31 | 32 | const handlePrice = (e) => { 33 | console.log(e.target.value); 34 | if (e.target.checked) { 35 | setpriceFilter(e.target.value) 36 | } else { 37 | setpriceFilter(null) 38 | } 39 | } 40 | 41 | const handleDisc = (e) => { 42 | console.log(e.target.value); 43 | if (e.target.checked) { 44 | setdiscFilter(e.target.value) 45 | } else { 46 | setdiscFilter(null) 47 | } 48 | } 49 | 50 | const handleCat = (e) => { 51 | console.log(e.target.value); 52 | if (e.target.checked) { 53 | setcatFilter(e.target.value) 54 | } else { 55 | setcatFilter(null) 56 | } 57 | } 58 | 59 | 60 | return ( 61 | <> 62 |

Myntra Fashion store

66 |
67 |
69 |

FILTER

73 | 74 |

{ 77 | setbrandFilter('') 78 | }} 79 | >CLEAR ALL

80 | 81 |
82 | 83 | 88 | {gendArr.map((val, ind) => { 89 | return } 94 | label={val.lable} /> 95 | })} 96 | 97 | 98 |
99 | 100 |
101 |

CATEGORIES

104 | 105 | {catArr.map((val, ind) => { 106 | return } 110 | label={val} 111 | value={val} 112 | onClick={handleCat} 113 | /> 114 | }) 115 | } 116 | 117 |
118 | 119 |
120 |

BRANDS

123 | 124 | 125 | {brandArr.map((val, ind) => { 126 | return } 132 | label={val} 133 | value={val} 134 | onClick={handleBrand} 135 | /> 136 | })} 137 | 138 | 139 |
140 | 141 |
142 |

PRICE

145 | 146 | 148 | {priceArr.map((val, ind) => { 149 | return } 156 | label={val.lable} /> 157 | })} 158 | 159 |
160 | 161 | 162 |
163 |

DISCOUNT

166 | 167 | 168 | {discArr.map((val, ind) => { 169 | return } 173 | label={val.lable} 174 | value={val.disc} 175 | onClick={handleDisc} 176 | /> 177 | })} 178 | 179 |
180 | 181 |
182 | 183 |
184 | 189 |
190 |
191 | 192 | 193 | 194 | ) 195 | } 196 | 197 | export default FilterMen -------------------------------------------------------------------------------- /src/components/navigation/Navigation.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import AppBar from '@mui/material/AppBar'; 3 | import Box from '@mui/material/Box'; 4 | import Toolbar from '@mui/material/Toolbar'; 5 | import Typography from '@mui/material/Typography'; 6 | import Menu from '@mui/material/Menu'; 7 | import Container from '@mui/material/Container'; 8 | import Button from '@mui/material/Button'; 9 | import MenuItem from '@mui/material/MenuItem'; 10 | import { TextField } from '@mui/material'; 11 | import PermIdentityIcon from '@mui/icons-material/PermIdentity'; 12 | import LocalMallOutlinedIcon from '@mui/icons-material/LocalMallOutlined'; 13 | import FavoriteBorderOutlinedIcon from '@mui/icons-material/FavoriteBorderOutlined'; 14 | import { withRouter } from 'react-router-dom'; 15 | 16 | const settings = ['Profile', 'Account', 'Dashboard', 'Logout']; 17 | 18 | const Navigation = (props) => { 19 | // const [menNav, setmenNav] = useState(false) 20 | const [anchorElUser, setAnchorElUser] = useState(null); 21 | const handleCloseUserMenu = () => { 22 | setAnchorElUser(null); 23 | }; 24 | 25 | return ( 26 | 27 | 28 | 29 | { props.history.push('/') }} 35 | > 36 | logo 38 | 39 | 45 | logo 47 | 48 | 49 | 50 | 56 | 57 | 73 | 74 | {/* 80 | 81 | */} 87 | 88 | 89 | 90 | 91 | 92 | {/*
*/} 93 |
{ props.history.push('/login') }}> 95 | 97 |

Profile

98 |
99 | 100 |
{ props.history.push('/wishlist') }}> 102 | 103 |

Wishlist

104 |
105 | 106 |
107 | 108 |

Bag

109 |
110 | {/*
*/} 111 | 112 | 113 | 129 | {settings.map((setting) => ( 130 | 131 | {setting} 132 | 133 | ))} 134 | 135 | 136 | 137 | 138 | 139 | 140 | ); 141 | }; 142 | export default withRouter(Navigation); 143 | --------------------------------------------------------------------------------