From 10dd20767c436e99831292756e1d401f5e19e453 Mon Sep 17 00:00:00 2001 From: Negin Date: Fri, 25 Jun 2021 23:05:28 +0430 Subject: [PATCH 1/7] add route --- src/Routes.js | 5 +++-- src/views/39601418/index.jsx | 9 +++++++++ 2 files changed, 12 insertions(+), 2 deletions(-) create mode 100644 src/views/39601418/index.jsx 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/views/39601418/index.jsx b/src/views/39601418/index.jsx new file mode 100644 index 0000000..e3db6dd --- /dev/null +++ b/src/views/39601418/index.jsx @@ -0,0 +1,9 @@ + + +export default function Home() { + return ( +
+ Negin +
+ ) +} \ No newline at end of file From a6509bc01520e813107cdedb322695a7002d9c4b Mon Sep 17 00:00:00 2001 From: Negin Date: Sat, 26 Jun 2021 11:26:19 +0430 Subject: [PATCH 2/7] add route --- src/views/39601418/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/39601418/index.jsx b/src/views/39601418/index.jsx index e3db6dd..4f17977 100644 --- a/src/views/39601418/index.jsx +++ b/src/views/39601418/index.jsx @@ -3,7 +3,7 @@ export default function Home() { return (
- Negin + Negin ghasemi
) } \ No newline at end of file From b8c0b62fcabd3e097b59a737adea15c1b1a15e5d Mon Sep 17 00:00:00 2001 From: Negin Date: Sat, 26 Jun 2021 22:53:32 +0430 Subject: [PATCH 3/7] feat: add header --- package.json | 1 + public/index.html | 32 ++++++----- src/views/39601418/css/header.css | 81 +++++++++++++++++++++++++++ src/views/39601418/css/main.css | 13 +++++ src/views/39601418/index.jsx | 5 +- src/views/39601418/layouts/Header.jsx | 22 ++++++++ 6 files changed, 139 insertions(+), 15 deletions(-) create mode 100644 src/views/39601418/css/header.css create mode 100644 src/views/39601418/css/main.css create mode 100644 src/views/39601418/layouts/Header.jsx 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/views/39601418/css/header.css b/src/views/39601418/css/header.css new file mode 100644 index 0000000..eb41130 --- /dev/null +++ b/src/views/39601418/css/header.css @@ -0,0 +1,81 @@ +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; +} + + + +header .container h3{ + font-weight: normal; +} + + +.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:4px ; +} + +.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; +} + diff --git a/src/views/39601418/css/main.css b/src/views/39601418/css/main.css new file mode 100644 index 0000000..7a1f9ae --- /dev/null +++ b/src/views/39601418/css/main.css @@ -0,0 +1,13 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body{ + direction: rtl; + font-family: 'Vazir', sans-serif; + +} + +@import './header.css' \ No newline at end of file diff --git a/src/views/39601418/index.jsx b/src/views/39601418/index.jsx index 4f17977..7af6ad4 100644 --- a/src/views/39601418/index.jsx +++ b/src/views/39601418/index.jsx @@ -1,9 +1,10 @@ - +import './css/main.css' +import Header from './layouts/Header' export default function Home() { return (
- Negin ghasemi +
) } \ 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..d286384 --- /dev/null +++ b/src/views/39601418/layouts/Header.jsx @@ -0,0 +1,22 @@ +import React from 'react' +import { FaShoppingBasket } from 'react-icons/fa'; + +export default function Header({ count = 0, data }) { + return ( +
+
+

نگین قاسمی

+
+

+ +

سبد خرید شما

+ {count} +

+
    +
  • سبد خرید خالی است
    • +
+
+
+
+ ) +} From 814ffa1ab4369e2be18c241244786c3e9db49f1a Mon Sep 17 00:00:00 2001 From: Negin Date: Sun, 27 Jun 2021 17:52:18 +0430 Subject: [PATCH 4/7] feat: add product card --- .../components/productCard/ProductCard.jsx | 27 ++++++++ src/views/39601418/css/header.css | 34 +++++++-- src/views/39601418/css/main.css | 10 ++- src/views/39601418/css/product-card.css | 69 +++++++++++++++++++ src/views/39601418/index.jsx | 27 +++++++- src/views/39601418/layouts/Header.jsx | 12 +++- 6 files changed, 171 insertions(+), 8 deletions(-) create mode 100644 src/views/39601418/components/productCard/ProductCard.jsx create mode 100644 src/views/39601418/css/product-card.css diff --git a/src/views/39601418/components/productCard/ProductCard.jsx b/src/views/39601418/components/productCard/ProductCard.jsx new file mode 100644 index 0000000..deaa2ca --- /dev/null +++ b/src/views/39601418/components/productCard/ProductCard.jsx @@ -0,0 +1,27 @@ + + +export default function ProductCard({ data }) { + + return ( +
+ {data.title} +

{data.title}

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

{data.price}

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

{data.discount}

+
+ + {Math.round((((data.price - data.discount) * 100) / data.price))}% + +
+ )} +
+
+ ) +} diff --git a/src/views/39601418/css/header.css b/src/views/39601418/css/header.css index eb41130..83c986e 100644 --- a/src/views/39601418/css/header.css +++ b/src/views/39601418/css/header.css @@ -18,10 +18,22 @@ header .container{ } +.logged-user{ -header .container h3{ + 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{ @@ -34,14 +46,15 @@ header .container h3{ margin-right:4px; margin-left: 8px; align-items: center; - display: inline; - flex-direction: row; + /* display: inline; */ + /* flex-direction: row; */ display: flex; - justify-content: center; + /* justify-content: center; */ } .cart h3 p{ - margin-right:4px ; + margin-right:6px ; + font-weight: normal; } .cart h3 span{ @@ -79,3 +92,14 @@ header .container h3{ 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 index 7a1f9ae..fec5da8 100644 --- a/src/views/39601418/css/main.css +++ b/src/views/39601418/css/main.css @@ -10,4 +10,12 @@ body{ } -@import './header.css' \ No newline at end of file +.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..4a11a58 --- /dev/null +++ b/src/views/39601418/css/product-card.css @@ -0,0 +1,69 @@ +.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: 20px; + padding: 10px; + max-width: 240px; + user-select: none; + border-radius: 8px; + 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; +} \ No newline at end of file diff --git a/src/views/39601418/index.jsx b/src/views/39601418/index.jsx index 7af6ad4..55a273c 100644 --- a/src/views/39601418/index.jsx +++ b/src/views/39601418/index.jsx @@ -1,10 +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 index d286384..fc3683d 100644 --- a/src/views/39601418/layouts/Header.jsx +++ b/src/views/39601418/layouts/Header.jsx @@ -1,11 +1,17 @@ import React from 'react' import { FaShoppingBasket } from 'react-icons/fa'; +import { FaUser } from "react-icons/fa"; export default function Header({ count = 0, data }) { return (
-

نگین قاسمی

+
+ + +

نگین قاسمی

+ +

@@ -14,6 +20,10 @@ export default function Header({ count = 0, data }) {

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

    جمع کل

    + 1450000 +
From 7f0532a96fef05f0aed86a7ed177bbbdf4517188 Mon Sep 17 00:00:00 2001 From: Negin Date: Sun, 27 Jun 2021 19:37:07 +0430 Subject: [PATCH 5/7] feat: add to card --- src/index.js | 4 +-- .../components/productCard/ProductCard.jsx | 18 ++++++++++--- src/views/39601418/components/rial/Rial.jsx | 7 +++++ src/views/39601418/css/main.css | 4 +++ src/views/39601418/css/product-card.css | 27 +++++++++++++++++-- src/views/39601418/layouts/Header.jsx | 7 ++++- 6 files changed, 58 insertions(+), 9 deletions(-) create mode 100644 src/views/39601418/components/rial/Rial.jsx 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 index deaa2ca..5bc6168 100644 --- a/src/views/39601418/components/productCard/ProductCard.jsx +++ b/src/views/39601418/components/productCard/ProductCard.jsx @@ -1,4 +1,6 @@ +import Rial from '../rial/Rial' + export default function ProductCard({ data }) { @@ -8,20 +10,28 @@ export default function ProductCard({ data }) {

{data.title}

{data.discount === 0 ? ( -

{data.price}

+

{data.price} + +

) : (
{data.price} -

{data.discount}

+

{data.discount} + +

- {Math.round((((data.price - data.discount) * 100) / data.price))}% + {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/main.css b/src/views/39601418/css/main.css index fec5da8..ee2e622 100644 --- a/src/views/39601418/css/main.css +++ b/src/views/39601418/css/main.css @@ -10,6 +10,10 @@ body{ } +button{ + font-family: 'Vazir', sans-serif; + +} .rial{ font-size: 12px; margin-right: 4px; diff --git a/src/views/39601418/css/product-card.css b/src/views/39601418/css/product-card.css index 4a11a58..e991464 100644 --- a/src/views/39601418/css/product-card.css +++ b/src/views/39601418/css/product-card.css @@ -11,11 +11,15 @@ .product-card{ width: 90%; - margin: 20px; - padding: 10px; + margin: 15px; + padding: 8px; + display: flex; max-width: 240px; user-select: none; + min-height: 420px; border-radius: 8px; + flex-direction: column; + justify-content: space-between; background-color: #fff; transition-duration: 300ms; } @@ -66,4 +70,23 @@ 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/layouts/Header.jsx b/src/views/39601418/layouts/Header.jsx index fc3683d..0a0a0dc 100644 --- a/src/views/39601418/layouts/Header.jsx +++ b/src/views/39601418/layouts/Header.jsx @@ -1,6 +1,8 @@ import React from 'react' import { FaShoppingBasket } from 'react-icons/fa'; import { FaUser } from "react-icons/fa"; +import Rial from '../components/rial/Rial' + export default function Header({ count = 0, data }) { return ( @@ -22,7 +24,10 @@ export default function Header({ count = 0, data }) {
  • سبد خرید خالی است

  • جمع کل

    - 1450000 + + 1450000 + +
    • From b2bd59b4e4ae34e0a34c168e049d65f1c837a0e0 Mon Sep 17 00:00:00 2001 From: Negin Date: Mon, 28 Jun 2021 13:13:22 +0430 Subject: [PATCH 6/7] edit: digits are converted to persian font --- .../components/productCard/ProductCard.jsx | 10 +++++----- src/views/39601418/css/header.css | 4 ++++ src/views/39601418/css/product-card.css | 6 +++--- src/views/39601418/functions/functions.js | 18 ++++++++++++++++++ src/views/39601418/layouts/Header.jsx | 4 ++-- 5 files changed, 32 insertions(+), 10 deletions(-) create mode 100644 src/views/39601418/functions/functions.js diff --git a/src/views/39601418/components/productCard/ProductCard.jsx b/src/views/39601418/components/productCard/ProductCard.jsx index 5bc6168..adde931 100644 --- a/src/views/39601418/components/productCard/ProductCard.jsx +++ b/src/views/39601418/components/productCard/ProductCard.jsx @@ -1,6 +1,6 @@ import Rial from '../rial/Rial' - +import { intCommas } from '../../functions/functions'; export default function ProductCard({ data }) { @@ -10,20 +10,20 @@ export default function ProductCard({ data }) {

    {data.title}

    {data.discount === 0 ? ( -

    {data.price} +

    {intCommas(data.price)}

    ) : (
    - {data.price} -

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

    {intCommas(data.discount)}

    - {Math.round(100 - ((data.price - data.discount) * 100) / data.price)}% + {intCommas(Math.round(100 - ((data.price - data.discount) * 100) / data.price))}%
    )} diff --git a/src/views/39601418/css/header.css b/src/views/39601418/css/header.css index 83c986e..03d22db 100644 --- a/src/views/39601418/css/header.css +++ b/src/views/39601418/css/header.css @@ -22,12 +22,16 @@ header .container{ align-items: center; display: flex; + } + + .logged-user h3{ font-weight: normal; font-size: 14px; margin-right:6px; margin-left: 8px; + } /* header .container h3{ diff --git a/src/views/39601418/css/product-card.css b/src/views/39601418/css/product-card.css index e991464..07adcf7 100644 --- a/src/views/39601418/css/product-card.css +++ b/src/views/39601418/css/product-card.css @@ -11,13 +11,13 @@ .product-card{ width: 90%; - margin: 15px; - padding: 8px; + margin: 30px; + padding:12px; display: flex; max-width: 240px; user-select: none; min-height: 420px; - border-radius: 8px; + border-radius: 10px; flex-direction: column; justify-content: space-between; background-color: #fff; 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/layouts/Header.jsx b/src/views/39601418/layouts/Header.jsx index 0a0a0dc..80edbab 100644 --- a/src/views/39601418/layouts/Header.jsx +++ b/src/views/39601418/layouts/Header.jsx @@ -2,7 +2,7 @@ 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 ( @@ -25,7 +25,7 @@ export default function Header({ count = 0, data }) {

  • جمع کل

    - 1450000 + {intCommas(1450000)}
    • From f3586e577f2b2ed36d9a2bc470b3a15bd7a3467a Mon Sep 17 00:00:00 2001 From: Negin Date: Mon, 28 Jun 2021 14:22:44 +0430 Subject: [PATCH 7/7] edit: digits have persian font style --- src/views/39601418/css/product-card.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/39601418/css/product-card.css b/src/views/39601418/css/product-card.css index 07adcf7..38b4728 100644 --- a/src/views/39601418/css/product-card.css +++ b/src/views/39601418/css/product-card.css @@ -17,7 +17,7 @@ max-width: 240px; user-select: none; min-height: 420px; - border-radius: 10px; + border-radius: 12px; flex-direction: column; justify-content: space-between; background-color: #fff;