reza added Shopping Cart

temp
Reza_ashrafi 3 years ago
parent 8a98e53e4d
commit 0b973829ec
  1. 10
      src/assets/icons/alert.svg
  2. 8
      src/assets/icons/exit.svg
  3. 2
      src/components/Progress/index.js
  4. 2
      src/redux/reducers/public.js
  5. 2
      src/router.js
  6. 14
      src/views/ShoppingCart/Code/index.js
  7. 43
      src/views/ShoppingCart/Product/index.js
  8. 82
      src/views/ShoppingCart/index.js
  9. 3
      tailwind.config.js

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19">
<g id="vuesax_linear_info-circle" data-name="vuesax/linear/info-circle" transform="translate(-364 -252)">
<g id="info-circle" transform="translate(364 252)">
<path id="Vector" d="M7.917,15.833A7.917,7.917,0,1,0,0,7.917,7.94,7.94,0,0,0,7.917,15.833Z" transform="translate(1.583 1.583)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-2" data-name="Vector" d="M0,0V3.958" transform="translate(9.5 6.333)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-3" data-name="Vector" d="M0,0H.007" transform="translate(9.496 12.667)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-4" data-name="Vector" d="M0,0H19V19H0Z" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 966 B

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="15.044" height="15.044" viewBox="0 0 15.044 15.044">
<g id="vuesax_linear_card-remove" data-name="vuesax/linear/card-remove" transform="translate(-252.46 -511.461)">
<g id="card-remove" transform="translate(253.309 512.31)">
<path id="Vector" d="M0,13.347,13.347,0" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.2"/>
<path id="Vector-2" data-name="Vector" d="M13.347,13.347,0,0" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.2"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 562 B

@ -10,7 +10,7 @@ function Progress({ percent }) {
return ( return (
<div className="flex-1 h-1.5 rounded-full overflow-hidden my-3" style={{ backgroundColor: '#D3E9FF' }}> <div className="flex-1 h-1.5 rounded-full overflow-hidden my-3" style={{ backgroundColor: '#D3E9FF' }}>
<div <div
className="h-full bg-blueEB transition-all duration-500" className="h-full bg-blueEB transition-all duration-500 rounded-full"
style={{ width: delayPercent + "%" }} style={{ width: delayPercent + "%" }}
></div> ></div>
</div> </div>

@ -1,7 +1,7 @@
import location from "../../utils/location"; import location from "../../utils/location";
const initialState = { const initialState = {
isDark: localStorage.getItem("isDark") || true, isDark: localStorage.getItem("isDark") || false,
homeData: [], homeData: [],
newProducts: [], newProducts: [],
levels: [], levels: [],

@ -8,6 +8,7 @@ import _ from "lodash";
import Home from "./views/Home"; import Home from "./views/Home";
import Products from "./views/Products"; import Products from "./views/Products";
import Product from "./views/Product"; import Product from "./views/Product";
import ShoppingCart from "./views/ShoppingCart";
// import VideoTube from "./views/Home/VideoTube"; // import VideoTube from "./views/Home/VideoTube";
function Router({ isDark }) { function Router({ isDark }) {
@ -28,6 +29,7 @@ function Router({ isDark }) {
<Routes> <Routes>
<Route path="/" exact element={<Home />} /> <Route path="/" exact element={<Home />} />
<Route path="/products" exact element={<Products />} /> <Route path="/products" exact element={<Products />} />
<Route path="/cart" exact element={<ShoppingCart />} />
<Route path="/products/:id" exact element={<Product />} /> <Route path="/products/:id" exact element={<Product />} />
<Route <Route
path="*" path="*"

@ -0,0 +1,14 @@
import React from "react";
export default function Code({}) {
return (
<form className="flex w-full flex-row border border-blueC0 border-solid rounded-md mt-3 overflow-hidden">
<input
type="text"
className="border-0 flex-1 text-right pr-3 font-medium text-xs dark:bg-gray2077 placeholder:text-blue5F"
placeholder={"کد تخفیف دارید ؟"}
/>
<button className={"py-3 px-4 text-xs bg-blueC0 text-white border border-blueC0 border-solid"}>ثبت کد</button>
</form>
);
}

@ -0,0 +1,43 @@
import React from "react";
// assets
import bookImage from "../../../assets/images/zist-11.svg";
import exitIcon from "../../../assets/icons/exit.svg";
export default function Product({ product }) {
return (
<div className="flex flex-row justify-between py-5 border-b border-solid border-grayDB dark:border-gray45">
<div className="flex flex-row">
<img src={bookImage} className="rounded-md w-20" />
<div className="flex flex-col pr-2">
<strong className="text-sm text-blue5F mb-1 dark:text-white">
علوم اجتماعی
</strong>
<span className="text-gray70 text-xs mb-1 dark:text-greenBA">
پایه دوم
</span>
<span className="text-gray70 text-xs mb-1 dark:text-greenBA">
نسخه فیزیکی
</span>
</div>
</div>
<div className={"flex flex-col justify-between items-end"}>
<img src={exitIcon} className="w-4" alt="" />
<div className="flex flex-col items-center">
<div className="flex flex-row items-center mb-3">
<button className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-blueC0 text-blueC0">
+
</button>
<span className="mx-2.5 font-semibold text-md text-blueC0">1</span>
<button className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-grayDB text-grayDB dark:border-blueC0 dark:text-blueC0">
-
</button>
</div>
<strong className="font-bold text-md text-blue5F dark:text-white">
145.000
</strong>
</div>
</div>
</div>
);
}

@ -0,0 +1,82 @@
import React, { useState } from "react";
import Product from "./Product";
import Code from "./Code";
import Button from "../../components/Button";
import alertIcon from "../../assets/icons/alert.svg";
import { connect } from "react-redux";
const PriceStatus = ({ name, value, type, isDark }) => {
return (
<div className="w-full flex flex-row justify-between py-2">
<strong className="font-light text-sm dark:text-white">{name}</strong>
<span
className="font-normal text-xs dark:text-white"
style={{
color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
}}
>
{value}
</span>
</div>
);
};
function ShoppingCart({ isDark }) {
return (
<div className="w-full flex flex-col px-4">
{[0, 1].map((product, index) => (
<Product key={index} product={product} />
))}
<Code />
<div className="flex flex-col w-full border-t py-2 border-gray-300 border-b mt-6">
<PriceStatus
name="مبلغ سبد خرید"
value="265000 تومان"
type="normal"
isDark={isDark}
/>
<PriceStatus
name="میزان تخفیف"
value="0 تومان"
type="error"
isDark={isDark}
/>
<PriceStatus
name="مالیات بر ارزش افزوده"
value="0 تومان"
type="error"
isDark={isDark}
/>
</div>
<div className="flex flex-row justify-between items-center w-full py-3">
<strong className="font-medium text-sm dark:text-white">جمع کل سبد خرید</strong>
<p className="font-medium text-greenBA text-xs dark:text-white">235.000 تومان</p>
</div>
<div
className="w-full rounded-md flex flex-row justify-center items-center py-2.5 px-3 my-5"
style={{ backgroundColor: "#196EC01a" }}
>
<img src={alertIcon} className="w-5 ml-2" />
<p className="text-xs text-blueC0 dark:text-white">
هزینه ارسال کالا پس از تعیین محل آدرس مشخص میشود
</p>
</div>
<Button
title="ادامه فرایند خرید"
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "1px" }}
width="100%"
color="text-white"
/>
</div>
);
}
const mapStateToProps = (state) => ({
isDark: state.publicApi.isDark,
});
const mapDispatchToProps = {};
export default connect(mapStateToProps, mapDispatchToProps)(ShoppingCart);

@ -38,7 +38,8 @@ module.exports = {
red5F: "#5F1A05", red5F: "#5F1A05",
yellow1: "#5F5F05", yellow1: "#5F5F05",
gray1: "#333333", gray1: "#333333",
gray70 : "#707070" gray70 : "#707070",
grayDB : '#DBDBDB'
}), }),
borderColor: (theme) => ({ borderColor: (theme) => ({
...theme("colors"), ...theme("colors"),

Loading…
Cancel
Save