diff --git a/package.json b/package.json index b992c10..43d478e 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "dependencies": { "react": "^17.0.1", "react-dom": "^17.0.1", + "react-icons": "^4.2.0", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3" }, diff --git a/public/index.html b/public/index.html index 4f2b158..5b8cb84 100644 --- a/public/index.html +++ b/public/index.html @@ -1,16 +1,22 @@ - - - React Project - - - - - - - - -
- + + + + React Project + + + + + + + + + + + +
+ + \ No newline at end of file diff --git a/src/Routes.js b/src/Routes.js index d32862e..c1019a7 100644 --- a/src/Routes.js +++ b/src/Routes.js @@ -1,11 +1,12 @@ -import { BrowserRouter as Router , Switch , Route } from 'react-router-dom' +import { BrowserRouter as Router, Switch, Route } from 'react-router-dom' +import NeginGhasemi from './views/39601418/index' export default function Routes() { return ( - + diff --git a/src/index.js b/src/index.js index d71f7b7..664cf54 100644 --- a/src/index.js +++ b/src/index.js @@ -3,8 +3,8 @@ import ReactDom from 'react-dom' import Routes from './Routes' -ReactDom.render( +ReactDom.render( -, document.getElementById('root')) \ No newline at end of file + , document.getElementById('root')) \ No newline at end of file diff --git a/src/views/39601418/components/productCard/ProductCard.jsx b/src/views/39601418/components/productCard/ProductCard.jsx new file mode 100644 index 0000000..adde931 --- /dev/null +++ b/src/views/39601418/components/productCard/ProductCard.jsx @@ -0,0 +1,37 @@ + +import Rial from '../rial/Rial' +import { intCommas } from '../../functions/functions'; + +export default function ProductCard({ data }) { + + return ( +
+ {data.title} +

{data.title}

+
+ {data.discount === 0 ? ( +

{intCommas(data.price)} + +

+ ) : ( +
+ +
+ {intCommas(data.price)} +

{intCommas(data.discount)} + +

+
+ + {intCommas(Math.round(100 - ((data.price - data.discount) * 100) / data.price))}% + +
+ )} +
+ +
+ +
+
+ ); +} diff --git a/src/views/39601418/components/rial/Rial.jsx b/src/views/39601418/components/rial/Rial.jsx new file mode 100644 index 0000000..a24c815 --- /dev/null +++ b/src/views/39601418/components/rial/Rial.jsx @@ -0,0 +1,7 @@ + + +export default function rial() { + return ( + + ) +} diff --git a/src/views/39601418/css/header.css b/src/views/39601418/css/header.css new file mode 100644 index 0000000..03d22db --- /dev/null +++ b/src/views/39601418/css/header.css @@ -0,0 +1,109 @@ +header{ + width: 100%; + color: #fff; + line-height: 66px; + background-color: #E53935; + user-select: none; +} + + +header .container{ + width: 90%; + display: flex; + margin:0 auto ; + max-width:900px; + position: relative; + align-items: center; + justify-content: space-between; +} + + +.logged-user{ + + align-items: center; + display: flex; + +} + + +.logged-user h3{ + font-weight: normal; + font-size: 14px; + margin-right:6px; + margin-left: 8px; + + +} +/* header .container h3{ + font-weight: normal; + font-size: 14px; +} */ + + +.cart{ + cursor: pointer; +} + + +.cart h3{ + font-size: 14px; + margin-right:4px; + margin-left: 8px; + align-items: center; + /* display: inline; */ + /* flex-direction: row; */ + display: flex; + /* justify-content: center; */ +} + +.cart h3 p{ + margin-right:6px ; + font-weight: normal; +} + +.cart h3 span{ + font-size: 18px; + margin-right: 4px; + padding-right: 2px; +} + + +.cart-content{ + left:0; + width: 90%; + color: #424242; + padding: 16px; + display: none; + list-style: none; + max-width:250px; + position: absolute; + border-radius: 0 0 12px 12px; + border:1px solid #E53935; + border-top: none; + box-shadow: 0 7px 10px rgba(0,0,0,0.2); + background-color: #F5F5F5; +} + + + +.cart-content li{ + font-size: 14px; +} + + +.cart:hover > .cart-content{ + + display: block; +} + + + +.cart-content__sum{ + width: 100%; + display: flex; + line-height: 44px; + font-weight: 700; + align-items:center; + justify-content: space-between; + border-top: 1px solid #212121; +} \ No newline at end of file diff --git a/src/views/39601418/css/main.css b/src/views/39601418/css/main.css new file mode 100644 index 0000000..ee2e622 --- /dev/null +++ b/src/views/39601418/css/main.css @@ -0,0 +1,25 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body{ + direction: rtl; + font-family: 'Vazir', sans-serif; + +} + +button{ + font-family: 'Vazir', sans-serif; + +} +.rial{ + font-size: 12px; + margin-right: 4px; +} + + + +@import './header.css'; +@import './product-card.css'; \ No newline at end of file diff --git a/src/views/39601418/css/product-card.css b/src/views/39601418/css/product-card.css new file mode 100644 index 0000000..38b4728 --- /dev/null +++ b/src/views/39601418/css/product-card.css @@ -0,0 +1,92 @@ +.products{ + width: 100%; + padding:0 16px; + margin-top: 16px; + display: flex; + align-items: center; + flex-wrap: wrap; + justify-content: center; +} + + +.product-card{ + width: 90%; + margin: 30px; + padding:12px; + display: flex; + max-width: 240px; + user-select: none; + min-height: 420px; + border-radius: 12px; + flex-direction: column; + justify-content: space-between; + background-color: #fff; + transition-duration: 300ms; +} + + +.product-card:hover{ + box-shadow: 0 7px 10px rgba(0,0,0,0.2); +} + +.product-card img{ + width:100%; + border-radius: 8px; +} + +.price-box{ + padding: 6px 16px; +} + +.price-box__discount{ + display: flex; + align-items:flex-start ; + justify-content:space-between; +} + + +.price-box__discount span{ + color:#fff; + font-size: 12px; + padding: 2px 10px; + border-radius: 16px; + background-color: #f03; +} + +.price-box__discount del{ + color: #f03; + font-size: 14px; +} + +.price{ + font-size: 18px !important; + font-weight: bold !important; +} + + + +.product-card__title{ + margin: 6px 0; + font-size: 14px; + padding: 0 16px; + font-weight: normal; +} + + +.add-to-cart .add-btn{ + width: 100%; + border: none; + color: #fff; + cursor: pointer; + font-size: 16px; + line-height: 36px; + margin-top: 6px; + border-radius: 8px; + background-color: #f06576; + transition-duration: 300ms; +} + + +.add-to-cart .add-btn:hover{ + background-color: #f0253d; +} \ No newline at end of file diff --git a/src/views/39601418/functions/functions.js b/src/views/39601418/functions/functions.js new file mode 100644 index 0000000..4775f43 --- /dev/null +++ b/src/views/39601418/functions/functions.js @@ -0,0 +1,18 @@ +function intCommas(number) { + return convertToFaDigit(number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")); +} + +function convertToFaDigit(number) { + let b = '' + number; + for (let c = 48; c <= 57; c++) { + let d = String.fromCharCode(c); + let e = String.fromCharCode(c + 1728); + b = b.replace(new RegExp(d.toString(), "g"), e.toString()) + } + + return b; +} + +export { + intCommas, convertToFaDigit +} \ No newline at end of file diff --git a/src/views/39601418/index.jsx b/src/views/39601418/index.jsx new file mode 100644 index 0000000..55a273c --- /dev/null +++ b/src/views/39601418/index.jsx @@ -0,0 +1,35 @@ +import './css/main.css' +import { useState, useEffect } from 'react' +import Header from './layouts/Header' +import ProductCard from './components/productCard/ProductCard' + +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 ( + + +
+
+ +
+ {products.map((product, index) => ( + + ))} +
+
+ ) +} \ No newline at end of file diff --git a/src/views/39601418/layouts/Header.jsx b/src/views/39601418/layouts/Header.jsx new file mode 100644 index 0000000..80edbab --- /dev/null +++ b/src/views/39601418/layouts/Header.jsx @@ -0,0 +1,37 @@ +import React from 'react' +import { FaShoppingBasket } from 'react-icons/fa'; +import { FaUser } from "react-icons/fa"; +import Rial from '../components/rial/Rial' +import { intCommas } from '../functions/functions' + +export default function Header({ count = 0, data }) { + return ( +
+
+
+ + +

نگین قاسمی

+ +
+
+

+ +

سبد خرید شما

+ {count} +

+
    +
  • سبد خرید خالی است
    • +
  • +

    جمع کل

    + + {intCommas(1450000)} + + +
    • +
+
+
+
+ ) +}