Danovin
/
application_17
5
0
Fork 0
Code Issues 3 Pull Requests Projects Releases Wiki Activity

reza fixed something

Browse Source
temp
Reza_ashrafi 3 years ago
parent 85c531c3d4 642f14406c
commit 2d3d4dcfb9
19 changed files with 107 additions and 77 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      src/assets/icons/starGray.svg
  2. 8
      src/assets/icons/starYellow.svg
  3. 2
      src/components/Button/index.js
  4. 2
      src/components/Comments/index.js
  5. 10
      src/components/Navbar/index.js
  6. 6
      src/components/ProductTab/table/index.css
  7. 12
      src/components/ProductTab/table/index.js
  8. 6
      src/components/Progress/index.js
  9. 16
      src/components/QandA/index.js
  10. 36
      src/components/Search/index.js
  11. BIN
      src/components/Search/search.png
  12. 15
      src/components/StarRating/index.js
  13. 2
      src/router.js
  14. 6
      src/views/Contact/index.js
  15. 4
      src/views/Home/Desktop/Part2/index.js
  16. 2
      src/views/Home/Desktop/index.js
  17. 10
      src/views/Product/Desktop/ProductOverAll/index.js
  18. 6
      src/views/Product/Desktop/index.js
  19. 33
      src/views/Product/Rate/index.js

8
src/assets/icons/starGray.svg
Unescape View File

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="38.705" height="38.705" viewBox="0 0 38.705 38.705">
<g id="vuesax_linear_star" data-name="vuesax/linear/star" transform="translate(-108 -188)">
<g id="star" transform="translate(108 188)">
<path id="Vector" d="M18.916,2.31l2.838,5.677a3.5,3.5,0,0,0,2.29,1.693l5.145.855c3.29.548,4.064,2.935,1.693,5.29l-4,4a3.5,3.5,0,0,0-.839,2.919l1.145,4.951c.9,3.919-1.177,5.435-4.645,3.387l-4.822-2.855a3.486,3.486,0,0,0-3.193,0L9.707,31.081c-3.451,2.048-5.548.516-4.645-3.387l1.145-4.951a3.5,3.5,0,0,0-.839-2.919l-4-4c-2.355-2.355-1.6-4.741,1.693-5.29L8.207,9.68a3.512,3.512,0,0,0,2.274-1.693L13.319,2.31C14.868-.77,17.383-.77,18.916,2.31Z" transform="translate(3.227 3.35)" fill="#dbdbdb"/>
<path id="Vector-2" data-name="Vector" d="M0,0H38.705V38.705H0Z" fill="#dbdbdb" opacity="0"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 871 B

8
src/assets/icons/starYellow.svg
Unescape View File

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="38.705" height="38.705" viewBox="0 0 38.705 38.705">
<g id="vuesax_linear_star" data-name="vuesax/linear/star" transform="translate(-108 -188)">
<g id="star" transform="translate(108 188)">
<path id="Vector" d="M18.916,2.31l2.838,5.677a3.5,3.5,0,0,0,2.29,1.693l5.145.855c3.29.548,4.064,2.935,1.693,5.29l-4,4a3.5,3.5,0,0,0-.839,2.919l1.145,4.951c.9,3.919-1.177,5.435-4.645,3.387l-4.822-2.855a3.486,3.486,0,0,0-3.193,0L9.707,31.081c-3.451,2.048-5.548.516-4.645-3.387l1.145-4.951a3.5,3.5,0,0,0-.839-2.919l-4-4c-2.355-2.355-1.6-4.741,1.693-5.29L8.207,9.68a3.512,3.512,0,0,0,2.274-1.693L13.319,2.31C14.868-.77,17.383-.77,18.916,2.31Z" transform="translate(3.227 3.35)" fill="#fe0"/>
<path id="Vector-2" data-name="Vector" d="M0,0H38.705V38.705H0Z" fill="#fe0" opacity="0"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 865 B

2
src/components/Button/index.js
Unescape View File

@ -20,7 +20,7 @@ export default function Button({
className={`${radius == false ? '' : 'rounded-md'} ${twPaddings? twPaddings : 'py-3'} ${customStyle} justify-center text-sm lg:text-tiny cursor-pointer lg:py-4 ${ className={`${radius == false ? '' : 'rounded-md'} ${twPaddings? twPaddings : 'py-3'} ${customStyle} justify-center text-sm lg:text-tiny cursor-pointer lg:py-4 ${
selectable ? (active ? "bg-black" : backgroundColor) : backgroundColor selectable ? (active ? "bg-black" : backgroundColor) : backgroundColor
} ${selectable ? (active ? "text-blueC0" : color) : color} ${ } ${selectable ? (active ? "text-blueC0" : color) : color} ${
selectable ? (active ? "bg-opacity-10" : bgOpacity) : bgOpacity selectable ? (active ? "bg-blue-100" : bgOpacity) : bgOpacity
} `} } `}
style={{ style={{
border: `${ border: `${

2
src/components/Comments/index.js
Unescape View File

@ -68,7 +68,7 @@ export const Comments = ({ comments }) => {
)} )}
</div> </div>
</header> </header>
<p className="text-gray-500 mt-2">{comment.text}</p> <p className="text-gray-500 h-auto leading-7 mt-2">{comment.text}</p>
<div className="self-end mt-4"> <div className="self-end mt-4">
{/* <Button title='اطلاعات بیشتر' backgroundColor='bg-gray-200' width={}/> */} {/* <Button title='اطلاعات بیشتر' backgroundColor='bg-gray-200' width={}/> */}
</div> </div>

10
src/components/Navbar/index.js
Unescape View File

@ -213,7 +213,7 @@ function Navbar({
</div> </div>
) : ( ) : (
<header className={`rounded-b-md w-full bg-transparent pb-4`}> <header className={`rounded-b-md w-full bg-transparent pb-4`}>
<div className="flex flex-row justify-between items-center px-20 border-b border-gray-200 border-solid h-10 "> <div className="flex flex-row justify-between items-center px-20 border-b border-gray-200 border-solid py-4 ">
<div className="divide-x flex flex-row transform gap-4"> <div className="divide-x flex flex-row transform gap-4">
{/* <span className="text-sm font-normal text-blue52"> {/* <span className="text-sm font-normal text-blue52">
انتخاب کشور انتخاب کشور
@ -236,7 +236,7 @@ function Navbar({
<div <div
className={`w-full flex flex-col z-20 ${desktopMiddleFix ? "" : ""}`} className={`w-full flex flex-col z-20 ${desktopMiddleFix ? "" : ""}`}
> >
<div className="w-full flex flex-row items-center h-full relative bg-white justify-between py-4 px-20 z-20 border-b border-gray-200 border-solid "> <div className="w-full flex flex-row items-center h-full relative bg-white justify-between py-5 px-20 z-20 border-b border-gray-200 border-solid ">
<div className="ml-10"> <div className="ml-10">
<Link to="/" className="flex flex-row items-center"> <Link to="/" className="flex flex-row items-center">
<img src={logoIcon} className="w-6" /> <img src={logoIcon} className="w-6" />
@ -252,8 +252,8 @@ function Navbar({
style={{ maxWidth: "calc(100vw / 2)" }} style={{ maxWidth: "calc(100vw / 2)" }}
></div> ></div>
<div <div
className="flex w-full absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2" className="flex w-full absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
style={{ maxWidth: "calc(100vw / 2)" }} style={{ maxWidth: "calc(100vw / 3)" }}
> >
<Search /> <Search />
</div> </div>
@ -269,7 +269,7 @@ function Navbar({
</div> </div>
<div <div
className={`flex items-center relative w-full h-10 px-20 border-b border-solid border-gray-200 transform bg-white ${ className={`flex items-center relative w-full py-4 px-20 border-b border-solid border-gray-200 transform bg-white ${
desktopEndTransform ? "" : "" desktopEndTransform ? "" : ""
}`} }`}
style={ style={

6
src/components/ProductTab/table/index.css
Unescape View File

@ -0,0 +1,6 @@
.specifications-li:hover div{
background-color: rgba(25,110,192,0.15);
}
.specifications-li div{
transition: all 0.2s;
}

12
src/components/ProductTab/table/index.js
Unescape View File

@ -1,4 +1,5 @@
import React from "react"; import React, { useState } from "react";
import './index.css';
const persian = { const persian = {
weight: "وزن", weight: "وزن",
@ -12,17 +13,18 @@ const persian = {
}; };
const Table = ({ specifications }) => { const Table = ({ specifications }) => {
return ( return (
<ul className="w-full"> <ul className={`w-full`} >
{Object.keys(specifications).map((specification, index) => ( {Object.keys(specifications).map((specification, index) => (
<li className="flex my-3"> <li className={`flex my-3 cursor-pointer specifications-li`} >
<div <div
className="bg-grayF9 rounded p-3 ml-2 text-blue-600 text-sm" className={` bg-grayF9 rounded p-3 ml-2 text-blue-600 text-sm`}
style={{ flex: 2 }} style={{ flex: 2 }}
> >
{persian[specification]} {persian[specification]}
</div> </div>
<div className="bg-grayF9 rounded p-3 text-sm" style={{ flex: 8 }}> <div className={`bg-grayF9 rounded p-3 text-sm`} style={{ flex: 8 }}>
{specifications[specification]} {specifications[specification]}
</div> </div>
</li> </li>

6
src/components/Progress/index.js
Unescape View File

@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
function Progress({ percent }) { function Progress({ percent, deskTop }) {
const [delayPercent, setDelayPercent] = useState(0); const [delayPercent, setDelayPercent] = useState(0);
useEffect(() => { useEffect(() => {
setTimeout(() => { setTimeout(() => {
@ -8,9 +8,9 @@ function Progress({ percent }) {
}, 1000); }, 1000);
}, [percent]); }, [percent]);
return ( return (
<div className="flex-1 h-1.5 rounded-full overflow-hidden my-3" style={{ backgroundColor: '#D3E9FF' }}> <div className={`flex-1 ${deskTop ? 'h-3' : 'h-1.5'} rounded-full overflow-hidden my-3`} style={{ backgroundColor: '#D3E9FF' }}>
<div <div
className="h-full bg-blueEB transition-all duration-500 rounded-full" className="h-full bg-blueEB float-left transition-all duration-500 rounded-full"
style={{ width: delayPercent + "%" }} style={{ width: delayPercent + "%" }}
></div> ></div>
</div> </div>

16
src/components/QandA/index.js
Unescape View File

@ -9,18 +9,18 @@ import Button from "../Button";
const QandA = ({ comments }) => { const QandA = ({ comments }) => {
const Comment = ({ comment }) => { const Comment = ({ comment }) => {
const [open, Setopen] = useState(true); const [open, Setopen] = useState(true);
const [viewmore, setViewMore] = useState("مشاهده باسخ های بیشتر"); const [viewmore, setViewMore] = useState("مشاهده پاسخ های بیشتر");
const [numberOfAnswers, setNumberOfAnswers] = useState(1); const [numberOfAnswers, setNumberOfAnswers] = useState(1);
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
return ( return (
<> <>
<div className="flex flex-col w-full py-6 border-t-2 border-solid border-gray-200"> <div className="flex flex-col leading-7 w-full py-6 border-t-2 border-solid border-gray-200">
<header className="w-full flex flex-row justify-between py-1"> <header className="w-full flex flex-row justify-between py-1">
<div className="flex flex-row items-end"> <div className="flex flex-row items-end">
<div className="flex items-center"> <div className="flex items-center">
<strong className="text-lg mx-2">{comment.username}</strong> <strong className="text-lg mx-2">{comment.username}</strong>
{comment.isCostumer ? ( {comment.isCostumer ? (
<p className="text-blueC0">خریدار محصول</p> <p className="text-greenBA font-light">خریدار محصول</p>
) : null} ) : null}
</div> </div>
</div> </div>
@ -43,7 +43,7 @@ const QandA = ({ comments }) => {
<header className="w-full flex flex-row justify-between items-center"> <header className="w-full flex flex-row justify-between items-center">
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
<div className="py-4 px-6 bg-blue-100 text-gray-400 rounded"> <div className="py-4 px-6 bg-blue-100 text-gray-400 rounded">
<h1>برسش</h1> <h1>پرسش</h1>
</div> </div>
</div> </div>
</header> </header>
@ -63,7 +63,7 @@ const QandA = ({ comments }) => {
<header className="w-full flex flex-row justify-between items-center"> <header className="w-full flex flex-row justify-between items-center">
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
<div className="py-4 px-6 bg-green-100 text-gray-400 rounded"> <div className="py-4 px-6 bg-green-100 text-gray-400 rounded">
<h1>باسخ</h1> <h1>پاسخ</h1>
</div> </div>
</div> </div>
</header> </header>
@ -81,7 +81,7 @@ const QandA = ({ comments }) => {
<header className="w-full flex flex-row justify-between items-center"> <header className="w-full flex flex-row justify-between items-center">
<div className="flex w-4/5 flex-row items-center"> <div className="flex w-4/5 flex-row items-center">
<div className="py-4 px-6 bg-green-100 text-gray-400 mx-16 rounded"> <div className="py-4 px-6 bg-green-100 text-gray-400 mx-16 rounded">
<h1>ارسال باسخ</h1> <h1>ارسال پاسخ</h1>
</div> </div>
</div> </div>
</header> </header>
@ -102,12 +102,12 @@ const QandA = ({ comments }) => {
isOpen isOpen
? () => { ? () => {
setNumberOfAnswers(1); setNumberOfAnswers(1);
setViewMore("مشاهده باسخ های بیشتر"); setViewMore("مشاهده پاسخ های بیشتر");
setIsOpen(false); setIsOpen(false);
} }
: () => { : () => {
setNumberOfAnswers(comment.answers.length); setNumberOfAnswers(comment.answers.length);
setViewMore("بستن باسخ ها"); setViewMore("بستن پاسخ ها");
setIsOpen(true); setIsOpen(true);
} }
} }

36
src/components/Search/index.js
Unescape View File

@ -1,46 +1,28 @@
import React from "react"; import React from "react";
import _ from "lodash"; import _ from "lodash";
import searchIcon from "./search.png";
const langDetector = (lang = "fa", option1, option2) => { const langDetector = (lang = 'fa', option1, option2) => {
return lang === "fa" ? option1 : option2; return lang === "fa" ? option1 : option2;
}; };
export default function Search({ export default function Search(props) {
lang,
backgroundColor,
borderColor,
textColor,
icon,
}) {
return ( return (
<div <div className="flex items-center justify-center w-full my-3">
className={`flex items-center justify-center border-solid w-full border rounded-md overflow-hidden ${backgroundColor} border-gray-300`} <div className="relative text-gray-600 focus-within:text-gray-400 w-full">
> <span className={_.join(["absolute inset-y-0 flex items-center pl-2", langDetector(props.lang, "left-0", "right-0")], " ")}>
<div className="relative text-gray-600 w-full bg-transparent">
<span
className={_.join(
[
"absolute inset-y-0 flex items-center pl-2",
langDetector(lang, "left-0", "right-0"),
],
" "
)}
>
<button <button
type="submit" type="submit"
className="p-1 focus:outline-none focus:shadow-outline" className="p-1 focus:outline-none focus:shadow-outline"
> >
{icon && <img src={icon} className="w-6 h-6" alt="" />} <img src={searchIcon} className="w-6 h-6" alt="" />
</button> </button>
</span> </span>
<input <input
type="search" type="search"
name="q" name="q"
className={`w-full py-2 text-sm rounded-md pr-3 outline-none bg-transparent ${textColor}`} className="w-full py-3 text-sm text-white border border-solid border-gray-200 rounded-md pr-5 pl-14 outline-none focus:ring-1 focus:text-gray-900 "
placeholder={_.join( placeholder={_.join([langDetector(props.lang , "جستجو...", "Search...")], " ")}
[langDetector(lang, "جستجو...", "Search...")],
" "
)}
autoComplete="off" autoComplete="off"
/> />
</div> </div>

BIN
src/components/Search/search.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 857 B

15
src/components/StarRating/index.js
Unescape View File

@ -1,15 +1,26 @@
import React, { useState } from "react"; import React, { useState } from "react";
import StarRatingComponent from "react-star-rating-component"; import StarRatingComponent from "react-star-rating-component";
import starGrayIcon from '../../assets/icons/starGray.svg';
import starYellowIcon from '../../assets/icons/starYellow.svg';
function StarRating() { function StarRating() {
const [rate, setRating] = useState(2); const [rate, setRating] = useState(2);
return ( return (
<StarRatingComponent <StarRatingComponent
name="rate1" name="rate1"
starCount={5}
renderStarIcon={(index, value)=> {
if (index <= value){
return (
<img src={starYellowIcon} className="w-5"/>
);
}
return (<img src={starGrayIcon} className="w-5"/>);
}}
value={rate} value={rate}
size='35'
onStarHover={(value) => setRating(value)} onStarHover={(value) => setRating(value)}
/> />
); );
} }

2
src/router.js
Unescape View File

@ -363,7 +363,7 @@ function Router({
title: false, title: false,
back: false, back: false,
shown: true, shown: true,
menu: false, menu: true,
}} }}
/> />
} }

6
src/views/Contact/index.js
Unescape View File

@ -48,8 +48,8 @@ function Contact({ headerOptions, setHeaderOptions, info, isMobile, isDark }) {
return ( return (
<div <div
className="w-full flex h-full flex-col bg-transparent" className="w-full flex h-auto flex-col bg-transparent"
style={{ height: "calc(100vh - 145px)" }} // style={{ height: "calc(100vh - 140px)" }}
> >
<Header <Header
bg={isMobile ? contactBgImage : desktopContactBgImage} bg={isMobile ? contactBgImage : desktopContactBgImage}
@ -85,7 +85,7 @@ function Contact({ headerOptions, setHeaderOptions, info, isMobile, isDark }) {
link="/faq" link="/faq"
/> />
</div> </div>
<div className="w-1/3 rounded-md overflow-hidden"> <div className="w-1/3 rounded-md overflow-hidden" style={{height:'400px'}}>
<Map /> <Map />
</div> </div>
</div> </div>

4
src/views/Home/Desktop/Part2/index.js
Unescape View File

@ -23,7 +23,7 @@ const Part2 = (
}, []); }, []);
return ( return (
<div className="w-full my-6" style={{ <div className="w-full my-6" style={{
height: '500px' height: '550px'
}}> }}>
<div className="w-full flex justify-between items-center"> <div className="w-full flex justify-between items-center">
<div className="flex items-center text-4xl font-black text-blue52"> <div className="flex items-center text-4xl font-black text-blue52">
@ -39,7 +39,7 @@ const Part2 = (
backgroundColor="bg-blue-100" backgroundColor="bg-blue-100"
border={{ border={{
color: "#196EC055", color: "#196EC055",
width: "0px", width: "0px",
}} }}
width="100%" width="100%"
selectable={true} selectable={true}

2
src/views/Home/Desktop/index.js
Unescape View File

@ -8,7 +8,7 @@ import SalesContainer from "../../../components/SalesContainer";
import { book, publicApi } from "../../../redux/actions"; import { book, publicApi } from "../../../redux/actions";
import Part2 from "./Part2"; import Part2 from "./Part2";
import HomeImg from '../../../assets/images/HomeImg.svg'; import HomeImg from '../../../assets/images/HomeImg.png';
import Part4 from "./Part4"; import Part4 from "./Part4";
import Design2D from "../../../components/Design2D"; import Design2D from "../../../components/Design2D";

10
src/views/Product/Desktop/ProductOverAll/index.js
Unescape View File

@ -95,13 +95,13 @@ export const ProductOverAll = ({
title="مشاهده نمونه" title="مشاهده نمونه"
backgroundColor={isDark ? "bg-transparent" : "bg-white"} backgroundColor={isDark ? "bg-transparent" : "bg-white"}
border={{ border={{
color: isDark ? "#ffffff55" : "#C01919", color: isDark ? "#ffffff55" : "rgba(192,57,25,0.24)",
width: "1px", width: "1px",
}} }}
width="24%" width="24%"
radius={false} radius={false}
twPaddings="py-4 px-6" twPaddings="py-4 px-6"
color={isDark ? "text-white" : "text-red19"} color={isDark ? "text-white" : "font-bold text-red19"}
onClick={() => {}} onClick={() => {}}
/> />
</div> </div>
@ -109,7 +109,7 @@ export const ProductOverAll = ({
<div className="flex py-4"> <div className="flex py-4">
<Button <Button
title="مشاهده دوره ویدیویی این محصول >" title="مشاهده دوره ویدیویی این محصول >"
backgroundColor={isDark ? "bg-transparent" : "bg-blueC0'"} backgroundColor={isDark ? "bg-transparent" : "bg-blue-100'"}
border={{ border={{
color: isDark ? "#ffffff55" : "#196EC055", color: isDark ? "#ffffff55" : "#196EC055",
width: "2px", width: "2px",
@ -117,13 +117,13 @@ export const ProductOverAll = ({
color={isDark ? "text-white" : "text-blue52"} color={isDark ? "text-white" : "text-blue52"}
selectable={true} selectable={true}
onClick={() => setType("physical")} onClick={() => setType("physical")}
customStyle="bg-black bg-opacity-10" customStyle=" bg-blue-100"
twPaddings="py-4 px-32" twPaddings="py-4 px-32"
radius={false} radius={false}
/> />
</div> </div>
</div> </div>
<div className="flex flex-col w-1/4"> <div className="flex flex-col w-1/3">
<ProductStatusCard /> <ProductStatusCard />
</div> </div>
</header> </header>

6
src/views/Product/Desktop/index.js
Unescape View File

@ -9,14 +9,14 @@ import QandA from "../../../components/QandA";
const DesktopProductLayout = () =>{ const DesktopProductLayout = () =>{
return ( return (
<div className="w-4/5 flex flex-col overflow-y-hidden mt-3 mb-64 items-center"> <div className="w-11/12 flex flex-col overflow-y-hidden mt-3 mb-64 items-center">
<ProductOverAll /> <ProductOverAll />
<ProductTab /> <ProductTab />
<div className="w-full"> <div className="w-full">
<ProductSuggestions /> <ProductSuggestions />
</div> </div>
<div className="w-2/3 my-8"> <div className="w-2/5 my-8">
<Rate /> <Rate desktop />
</div> </div>
<div className="w-4/5"> <div className="w-4/5">
<Comments /> <Comments />

33
src/views/Product/Rate/index.js
Unescape View File

@ -2,21 +2,34 @@ import React from "react";
import StarRating from "../../../components/StarRating"; import StarRating from "../../../components/StarRating";
import Progress from "../../../components/Progress"; import Progress from "../../../components/Progress";
function Rate({ avarage, all, fields }) { function Rate({ avarage, all, fields, desktop }) {
return ( return (
<div className="w-full flex flex-row justify-between items-center mt-2"> <div className="w-full flex flex-row justify-between items-center mt-2">
<div className="flex flex-col items-center justify-center h-full ml-4"> <div className="flex flex-col items-center justify-center h-full ml-4">
<strong className="text-3xl text-blue5F mb-2 font-bold dark:text-white"> {
{avarage} desktop ?
</strong> <h1 className={`text-7xl text-gray-600 mb-2 font-bold dark:text-white`}>
{avarage}
</h1>
:
<strong className={`text-3xl text-blue5F mb-2 font-bold dark:text-white`}>
{avarage}
</strong>
}
<div className="">
<StarRating /> <StarRating />
</div>
<span className="text-xs text-gray70 mt-2 dark:text-white">{all}</span> <span className="text-xs text-gray70 mt-2 dark:text-white">{all}</span>
</div> </div>
<ul className="p-0 m-0 list-none flex flex-col flex-1"> <ul className="p-0 m-0 list-none flex flex-col flex-1">
{fields.map((item, index) => ( {fields.map((item, index) => (
<li key={index} className="w-full flex flex-row-reverse items-center justify-between"> <li key={index} className="w-full flex flex-row-reverse items-center justify-between">
<span className="mr-2 text-xs text-blue5F dark:text-white">{item.name}</span> <span className="mr-2 text-xs text-blue5F dark:text-white">{item.name}</span>
<Progress percent={item.percent} />
{
desktop ? <Progress deskTop percent={item.percent} /> : <Progress percent={item.percent} />
}
<span className="ml-2 text-xs text-blue5F dark:text-white">{item.percent + "%"}</span> <span className="ml-2 text-xs text-blue5F dark:text-white">{item.percent + "%"}</span>
</li> </li>
))} ))}
@ -33,23 +46,23 @@ Rate.defaultProps = {
fields: [ fields: [
{ {
name: "5 ستاره", name: "5 ستاره",
percent: 50, percent: 49,
}, },
{ {
name: "4 ستاره", name: "4 ستاره",
percent: 50, percent: 31,
}, },
{ {
name: "3 ستاره", name: "3 ستاره",
percent: 50, percent: 9,
}, },
{ {
name: "2 ستاره", name: "2 ستاره",
percent: 50, percent: 5,
}, },
{ {
name: "1 ستاره", name: "1 ستاره",
percent: 50, percent: 6,
}, },
], ],
}; };

Write Preview
Loading…
Cancel
Save