From aee56c4bb02db945399864333481f0a267dbc023 Mon Sep 17 00:00:00 2001 From: Ashish Date: Wed, 4 May 2022 13:31:26 +0530 Subject: [PATCH] commit changes --- netmeds-clone/src/App.jsx | 5 +- .../ProductDetailsPage/ProductDetails.css | 90 +++++++++++++++++++ .../ProductDetailsPage/ProductDetails.jsx | 43 +++++++++ .../ProductPage/ProductDiabeties.jsx | 35 ++++++-- .../src/components/ProductPage/Products.css | 17 +++- .../src/components/ProductPage/Products.jsx | 12 ++- netmeds-clone/src/index.js | 1 - 7 files changed, 186 insertions(+), 17 deletions(-) create mode 100644 netmeds-clone/src/components/ProductDetailsPage/ProductDetails.css create mode 100644 netmeds-clone/src/components/ProductDetailsPage/ProductDetails.jsx diff --git a/netmeds-clone/src/App.jsx b/netmeds-clone/src/App.jsx index 660cf3d..3695df0 100644 --- a/netmeds-clone/src/App.jsx +++ b/netmeds-clone/src/App.jsx @@ -1,16 +1,19 @@ import './App.css'; import ProductPage from './components/ProductPage/ProductPage'; -import { Route, Routes } from 'react-router-dom'; +import { Route, Routes, useParams } from 'react-router-dom'; import CovidRoutes from './components/ProductPage/covidRoutes'; import Diabeties from './components/ProductPage/diabetiesRoutes'; +import ProductDetails from './components/ProductDetailsPage/ProductDetails'; function App() { + return (
}> }> + }>
); diff --git a/netmeds-clone/src/components/ProductDetailsPage/ProductDetails.css b/netmeds-clone/src/components/ProductDetailsPage/ProductDetails.css new file mode 100644 index 0000000..72bf5fc --- /dev/null +++ b/netmeds-clone/src/components/ProductDetailsPage/ProductDetails.css @@ -0,0 +1,90 @@ +.details-container{ + display: flex; + width:95%; + margin: auto; + padding:30px 10px; + background-color: white; + border-radius: 10px; +} +hr{ + border:1px solid rgb(240, 238, 238); +} +.image-part{ + width:47%; + display: flex; + align-items: center; + justify-content: center; +} +.image-part>img{ + width:80%; +} +.details-part{ + width:53%; +} +.heading{ + font-size: 22px; + font-weight: 400; +} +.tag{ + background-color: rgb(245, 239, 239); + display: inline-block; + padding:2px 5px; + color:rgb(133, 130, 130); + font-size: 13px; + margin-bottom: 10px; +} +.price{ + color:rgb(99, 98, 98); + font-size: 17px; + font-weight: 500; +} +.red-price{ + font-size: 20px; + margin-left: 7px; + color:rgb(239, 66, 129); +} +.samll-text{ + font-size: 11px; + color:gray; + line-height: 7px; +} +.italic{ + font-style: italic; +} +.add-button{ + background-color: rgb(50, 174, 177); + color:white; + padding: 10px 18px; + font-size: 14px; + font-weight: 700; + border:none; + border-radius: 5px; + margin-top: 3px; + margin-bottom: 10px; +} +.avail{ + color:gray; + font-size: 14px; + font-weight: 500; +} +.pin{ + color:rgb(50, 174, 177); + font-weight: 600; + font-size: 18px; +} +.pin>input{ + border:none; + padding:10px; + width:100px; + font-size: 18px; + font-weight: 600; +} +.pin>input:focus{ + outline: none; +} +.line{ + width:200px; + background-color: rgb(50, 174, 177); + height:3px; + border-radius: 10px; +} \ No newline at end of file diff --git a/netmeds-clone/src/components/ProductDetailsPage/ProductDetails.jsx b/netmeds-clone/src/components/ProductDetailsPage/ProductDetails.jsx new file mode 100644 index 0000000..d2e15d5 --- /dev/null +++ b/netmeds-clone/src/components/ProductDetailsPage/ProductDetails.jsx @@ -0,0 +1,43 @@ +import React, { useEffect, useState } from 'react' +import { useParams } from 'react-router-dom' +import "./ProductDetails.css" +function ProductDetails() { + const [product,setProduct]=useState({}) + const {id}=useParams(); + useEffect(()=>{ + getData() + },[]); + const getData=async()=>{ + const data=await fetch(`https://netmedback.herokuapp.com/products/${id}`); + const res=await data.json(); + console.log(res.product) + setProduct(res.product) + } + + return ( +
+
+
+ +
+
+

{product.name}

+
{product.main}
+
+
Best Price*₹ {product.price}
+

(Inclusive of all taxes)

+

* Mkt: {product.mkt}

+

* Country of Origin: India

+

* Delivery charges if applicable will be applied at checkout

+ +
+

Check Availability & Expiry

+
PINCODE:
+
+
+
+
+ ) +} + +export default ProductDetails \ No newline at end of file diff --git a/netmeds-clone/src/components/ProductPage/ProductDiabeties.jsx b/netmeds-clone/src/components/ProductPage/ProductDiabeties.jsx index befc5c7..cad06ef 100644 --- a/netmeds-clone/src/components/ProductPage/ProductDiabeties.jsx +++ b/netmeds-clone/src/components/ProductPage/ProductDiabeties.jsx @@ -1,7 +1,9 @@ import React, { useEffect, useState } from 'react' +import { Link } from 'react-router-dom'; import "./Products.css" function ProductsDiabeties() { const [products,setProducts]=useState([]); + const [order,setOrder]=useState("popularity"); useEffect(()=>{ getData() @@ -10,12 +12,15 @@ function ProductsDiabeties() { const data=await fetch("https://netmedback.herokuapp.com/products"); const res=await data.json(); console.log(res) + const filterdDataCovid=[] const filterdDataDiabeties=[]; res.product.map((el)=>{ + if(el.main==="Diabeties"){ filterdDataDiabeties.push(el) } }) + setProducts(filterdDataDiabeties) } function sort(x){ @@ -39,7 +44,7 @@ function ProductsDiabeties() { return (
- +
@@ -48,17 +53,17 @@ function ProductsDiabeties() {
Personal & Home...
- {/*
UPTO 79%
*/} +
UPTO 79%
Mask, Gloves & Pr...
- {/*
UPTO 88%
*/} +
UPTO 88%
Immunity Booster
- {/*
UPTO 45%
*/} +
UPTO 45%
@@ -69,7 +74,7 @@ function ProductsDiabeties() {
Travel Essentials
UPTO 45%
-
+
@@ -91,21 +96,33 @@ function ProductsDiabeties() {
{products.map((product)=>( -
+
+ +
-
+
{product.name}
Mkt: {product.mkt}
Best price* Rs. {product.price}
MRP Rs. {product.stprice}
-
+
+ +
))}
+
) } -export default ProductsDiabeties \ No newline at end of file +export default ProductsDiabeties + + + + + + + \ No newline at end of file diff --git a/netmeds-clone/src/components/ProductPage/Products.css b/netmeds-clone/src/components/ProductPage/Products.css index 7de0139..188bab1 100644 --- a/netmeds-clone/src/components/ProductPage/Products.css +++ b/netmeds-clone/src/components/ProductPage/Products.css @@ -19,6 +19,7 @@ } .category-img{ display: flex; + } .category-img>div{ width:100px; @@ -78,7 +79,7 @@ grid-template-columns:repeat(4,1fr); gap:14px; } -.product-card{ +.product-cards{ border:1px solid rgb(189, 188, 188); height:330px; padding:15px; @@ -88,6 +89,12 @@ justify-content: center; align-items: center; } +.product-card{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} .product-card>img{ width:67%; } @@ -129,7 +136,11 @@ text-decoration: line-through; padding-left: 6px; } -.product-details>button{ +.link-details{ + text-decoration: none; +} +.product-cards>button{ + width:100%; background-color: rgb(50, 174, 177); color:white; padding: 10px 0px; @@ -139,6 +150,6 @@ border-radius: 5px; margin-top: 3px; } -.product-details>button:hover{ +.product-cards>button:hover{ cursor: pointer; } \ No newline at end of file diff --git a/netmeds-clone/src/components/ProductPage/Products.jsx b/netmeds-clone/src/components/ProductPage/Products.jsx index 6d03236..c64d808 100644 --- a/netmeds-clone/src/components/ProductPage/Products.jsx +++ b/netmeds-clone/src/components/ProductPage/Products.jsx @@ -1,4 +1,6 @@ import React, { useEffect, useState } from 'react' +import { Link } from 'react-router-dom'; +import ProductDetails from '../ProductDetailsPage/ProductDetails'; import "./Products.css" function Products() { const [products,setProducts]=useState([]); @@ -102,15 +104,19 @@ function Products() {
{products.map((product)=>( -
+
+ +
-
+
{product.name}
Mkt: {product.mkt}
Best price* Rs. {product.price}
MRP Rs. {product.stprice}
-
+
+ +
))}
diff --git a/netmeds-clone/src/index.js b/netmeds-clone/src/index.js index 539ab9d..ec0f92d 100644 --- a/netmeds-clone/src/index.js +++ b/netmeds-clone/src/index.js @@ -10,7 +10,6 @@ root.render( - );