Mohammad Ahmadian

src/Routes.js

@@ -1,11 +1,13 @@
 import { BrowserRouter as Router , Switch , Route } from 'react-router-dom'
 
+import MohammadAhmadian from './views/39602242/index'
+
 export default function Routes() {
     return (
         <Router>
             <Switch>
 
-
+             < Route path="/39602242/" component={MohammadAhmadian} />   
 
             </Switch>
         </Router>

src/views/39602242/components/ProductCard.jsx

@@ -0,0 +1,28 @@
+export default function ProductCard({data}){
+
+    return(
+        <div className="product-card">
+            <img src={data.image} alt={data.title} />
+            <h3 className="c">{data.title}</h3>
+
+            <div className="price-box" >
+                {data.discount === 0 ?(
+                <p>{data.price}</p>
+                ) : (
+                    <div className ="price-box__discount">
+                        <div>
+                          <del>{data.price}</del>
+                          <p className="price">{data.discount}</p> 
+                        </div >
+                    <span>{Math.round(((data.price - data.discount) * 100) / data.price) }%</span>  
+                    </div>
+
+                )
+                }
+
+
+            </div>
+
+        </div>
+    )
+}

src/views/39602242/css/header.css

@@ -0,0 +1,54 @@
+header {
+    width: 100%;
+    color: rgba(255, 255, 255, 0.897);
+    background-image: linear-gradient(90deg, #606c38, #283618);
+    line-height: 80px;
+}
+
+header .container {
+    width: 99%;
+    display: flex;
+    margin: 0 auto;
+    max-width: 850px;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+
+}
+
+header .container h3{
+    font-weight: normal;
+}
+
+.cart h3 {
+    font-size: 16px;
+
+}
+
+.cart {
+    cursor: pointer;
+}
+.cart h3 span {
+    font-size: 18px;
+    margin-right: 9px;
+}
+
+.cart-content {
+    width: 99%;
+    display: none;
+    padding: 15px;
+    left: 0;
+    color: rgb(70, 70, 70);
+    list-style: none;
+    max-width: 270px;
+    user-select: none;
+    font-size: 16px;
+    position: absolute;
+    border-radius: 0 0 9px 9px  ;
+    background-color:#f5f5f5;
+    border: 2px solid #606c38;
+    border-top: none;
+    box-shadow: 0 6px 9px rgba(0, 0, 0, 0.966);
+}
+
+.cart:hover > .cart-content{ display: block; }

src/views/39602242/css/main.css

@@ -0,0 +1,17 @@
+*{
+
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+
+}
+
+
+body {
+    direction: rtl;
+    font-family: 'Vazir' , sans-serif;
+
+
+}
+@import './header.css';
+@import './product-card.css'

src/views/39602242/css/product-card.css

@@ -0,0 +1,68 @@
+.products {
+    width: 99%;
+    padding:0 14px;
+    margin-top: 14px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.product-card {
+    width: 89%;
+    margin: 7px;
+    padding: 7px;
+    max-width: 250px;
+    border-radius: 7px;
+    background-color: rgba(255, 255, 255, 0.795);
+    transition-duration: 350ms;
+}
+
+.product-card:hover {
+    box-shadow: 0 6px 9px rgba(0, 0, 0, 0.103)
+}
+
+.product-card img {
+    width: 100%;
+    border-radius: 7px;
+
+}
+
+.price-box{
+    padding: 7px 28px;
+    font-weight: bold;
+}
+
+.price-box__discount{
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+
+}
+.price-box__discount{
+    color: rgba(255, 255, 255, 0.959);
+    font-size: 13px;
+
+    padding: 3px 9px;
+    border-radius: 14px;
+    background-color: rgb(228, 0, 0);
+}
+
+.price-box__discount del{
+    color: rgba(7, 7, 7, 0.973);
+    font-size: 16px;
+
+
+}
+
+.price{
+    font-size: 16px;
+    font-weight: bold;
+}
+
+.product-card__title{
+    margin: 70px 0;
+    font-size: 16px;
+    font-weight: normal;
+    padding: 0 17px;
+}

src/views/39602242/index.jsx

@@ -0,0 +1,37 @@
+import './css/main.css'
+
+import Header from './layouts/Header'
+import ProductCard from './components/ProductCard'
+import { useEffect, useState } from 'react'
+export default function Home() {
+
+    const [ products, setProducts] = useState([])
+        useEffect(() => {
+            fetch('http://raminr77.pythonanywhere.com/api/v1/products/')
+                .then(Response => {
+                    return Response.json()
+                })
+                .then(Response => {
+                    if(!Response.success) return
+                    setProducts(Response.data)
+                })
+                .catch(error => {
+                    console.log('Error: ',error)
+                })
+
+        },[])
+    return (
+        <div>
+            <Header count={0} />
+
+            <div className="products">
+                { products.map((product , index) => (
+                    <ProductCard key={index} data={product} />
+                ))
+                }
+
+
+            </div>
+        </div>
+    )
+}

src/views/39602242/layouts/Header.jsx

@@ -0,0 +1,22 @@
+export default function Header({ count= 0 , data }){
+    return (
+        <header>
+
+            <div className="container">
+
+                 <h2>محمد احمدیان</h2>
+                 <div className="cart">
+                     <h4>
+                         سبد خرید
+                         <span>{count}</span>
+                     </h4>
+                     <ul className= "cart-content">
+                         <li> سبد خرید شما خالی است </li>
+                     </ul>
+
+                 </div>
+            </div>
+
+        </header>
+    )
+}