Merge branch 'master' of https://git.sitenevis.com/Danovin/application Conflicts: yarn.lockmaster
Your Name
2 years ago
commit
f443fe281c
120 changed files with 2204 additions and 1489 deletions
@ -0,0 +1,6 @@ |
||||
module.exports = { |
||||
plugins: { |
||||
tailwindcss: {}, |
||||
autoprefixer: {}, |
||||
}, |
||||
} |
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,24 @@ |
||||
import React from "react"; |
||||
|
||||
export default function Modal({ children, open, onClose }) { |
||||
const [animationFlag, setAnimationFlag] = React.useState(false); |
||||
|
||||
React.useEffect(() => { |
||||
setAnimationFlag(true); |
||||
|
||||
return () => { |
||||
setAnimationFlag(false); |
||||
}; |
||||
}, []); |
||||
|
||||
return open ? ( |
||||
<div |
||||
className={`w-full h-full fixed top-0 left-0 z-50 flex items-center justify-center backdrop-filter backdrop-blur-sm bg-black bg-opacity-25 transform transition-all duration-500 origin-center ${ |
||||
animationFlag ? "scale-100" : "scale-0" |
||||
}`}
|
||||
onClick={() => onClose()} |
||||
> |
||||
{children} |
||||
</div> |
||||
) : null; |
||||
} |
||||
@ -0,0 +1,12 @@ |
||||
import proxy from "../proxy"; |
||||
|
||||
const config = { |
||||
setDevice: (data) => async (dispatch) => |
||||
await dispatch({ type: "config/setDevice", data }), |
||||
getAvailableForSell: |
||||
(data = {}) => |
||||
async (dispatch) => |
||||
await proxy.get("config/availableForSell", data, { dispatch }), |
||||
}; |
||||
|
||||
export default config; |
||||
@ -0,0 +1,24 @@ |
||||
const initialState = { |
||||
device: "mobile", |
||||
availableForSell: [], |
||||
}; |
||||
|
||||
export default function config(state = initialState, action) { |
||||
let { type, data } = action; |
||||
switch (type) { |
||||
case "config/setDevice": |
||||
return { |
||||
...state, |
||||
device: data, |
||||
}; |
||||
case "config/availableForSell": |
||||
return { |
||||
...state, |
||||
loading: false, |
||||
availableForSell: data.productTypes, |
||||
error: null, |
||||
}; |
||||
default: |
||||
return state; |
||||
} |
||||
} |
||||
@ -0,0 +1,45 @@ |
||||
import React from "react"; |
||||
import { connect } from "react-redux"; |
||||
import { useNavigate } from "react-router-dom"; |
||||
|
||||
const height = { |
||||
mobile: "calc((100vw - 32px) / 16 * 9)", |
||||
tablet: "calc((100vw - 32px) / 16 * 9)", |
||||
desktop: "calc((100vw / 12 * 11) / 4 / 16 * 9)", |
||||
}; |
||||
|
||||
export const Blog = ({ blog, device }) => { |
||||
const navigation = useNavigate(); |
||||
return ( |
||||
<article className="flex w-full lg:w-1/4 p-2"> |
||||
<div |
||||
className="cursor-pointer flex flex-col gap-4 w-full" |
||||
onClick={() => |
||||
navigation(`/blogs/${blog?.id}`, { state: { id: blog?.id } }) |
||||
} |
||||
> |
||||
<div |
||||
className="w-full rounded-md" |
||||
style={{ |
||||
backgroundImage: `url(https://dnvn.ir/api/v1/file/${blog?.fileIds})`, |
||||
backgroundRepeat: "no-repeat", |
||||
backgroundPosition: "center", |
||||
backgroundSize: "cover", |
||||
minHeight: height[device], |
||||
}} |
||||
></div> |
||||
<strong className="text-sm lg:text-tiny xl:text-base text-backgroundText h-20"> |
||||
{blog?.title} |
||||
</strong> |
||||
</div> |
||||
</article> |
||||
); |
||||
}; |
||||
|
||||
const mapStateToProps = (state) => ({ |
||||
device: state.config.device, |
||||
}); |
||||
|
||||
const mapDispatchToProps = {}; |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Blog); |
||||
@ -1,73 +1,112 @@ |
||||
import React from "react"; |
||||
import separate from '../../../utils/separate'; |
||||
import separate from "../../../utils/separate"; |
||||
|
||||
//components
|
||||
import StarRating from "../../../components/StarRating"; |
||||
import Progress from "../../../components/Progress"; |
||||
|
||||
function Rate({ desktop, productId, rateDetail }) { |
||||
const fiveCount = React.useMemo(() => { |
||||
return rateDetail?.find((rate) => rate?.rate === 5); |
||||
}, [rateDetail]); |
||||
|
||||
const fourCount = React.useMemo(() => { |
||||
return rateDetail?.find((rate) => rate?.rate === 4); |
||||
}, [rateDetail]); |
||||
|
||||
const threeCount = React.useMemo(() => { |
||||
return rateDetail?.find((rate) => rate?.rate === 3); |
||||
}, [rateDetail]); |
||||
|
||||
const twoCount = React.useMemo(() => { |
||||
return rateDetail?.find((rate) => rate?.rate === 2); |
||||
}, [rateDetail]); |
||||
|
||||
const oneCount = React.useMemo(() => { |
||||
return rateDetail?.find((rate) => rate?.rate === 1); |
||||
}, [rateDetail]); |
||||
|
||||
const allCount = React.useMemo(() => { |
||||
return rateDetail?.reduce((a, b) => a + b?.count, 0); |
||||
}, [rateDetail]); |
||||
|
||||
const rate = React.useMemo(() => { |
||||
return rateDetail?.length |
||||
? ((oneCount?.count || 0) * 1 + |
||||
(twoCount?.count || 0) * 2 + |
||||
(threeCount?.count || 0) * 3 + |
||||
(fourCount?.count || 0) * 4 + |
||||
(fiveCount?.count || 0) * 5) / |
||||
rateDetail?.length |
||||
: 0; |
||||
}, [rateDetail]); |
||||
|
||||
function Rate({ avarage, all, fields, desktop }) { |
||||
return ( |
||||
<div className="w-full flex flex-row justify-between items-center mt-5"> |
||||
<div className="w-full flex justify-between items-center mt-5"> |
||||
<div className="flex flex-col items-center justify-center h-full ml-4"> |
||||
{ |
||||
desktop ? |
||||
{desktop ? ( |
||||
<h1 className={`text-gray-600 mb-2 font-bold dark:text-white`}> |
||||
{avarage} |
||||
{rate} |
||||
</h1> |
||||
: |
||||
<strong className={`text-blue5F mb-2 font-bold dark:text-white`} style={{ fontSize: 'calc(100vw / 10)' }}> |
||||
{avarage} |
||||
) : ( |
||||
<strong |
||||
className={`text-blue5F mb-2 font-bold dark:text-white`} |
||||
style={{ fontSize: "calc(100vw / 10)" }} |
||||
> |
||||
{rate} |
||||
</strong> |
||||
} |
||||
)} |
||||
<div className=""> |
||||
<StarRating /> |
||||
<StarRating value={rate} /> |
||||
</div> |
||||
<span className="text-base text-gray70 mt-2 dark:text-white">{separate(all)}</span> |
||||
<span className="text-base text-gray70 mt-2 dark:text-white"> |
||||
{" "} |
||||
{`از بین ${allCount} نفر`} |
||||
</span> |
||||
</div> |
||||
<ul className="p-0 m-0 list-none flex flex-col flex-1"> |
||||
{fields.map((item, index) => ( |
||||
<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> |
||||
|
||||
{ |
||||
desktop ? <Progress deskTop percent={item.percent} /> : <Progress percent={item.percent} /> |
||||
} |
||||
|
||||
<span className="ml-2 text-xs text-blue5F dark:text-white">{item.percent + "%"}</span> |
||||
</li> |
||||
))} |
||||
</ul> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export default Rate; |
||||
|
||||
Rate.defaultProps = { |
||||
avarage: 4.8, |
||||
all: 4780, |
||||
fields: [ |
||||
{[ |
||||
{ |
||||
name: "5 ستاره", |
||||
percent: 49, |
||||
name: "یک ستاره", |
||||
value: ((oneCount?.count || 0) / allCount) * 100, |
||||
}, |
||||
{ |
||||
name: "4 ستاره", |
||||
percent: 31, |
||||
name: "دو ستاره", |
||||
value: ((twoCount?.count || 0) / allCount) * 100, |
||||
}, |
||||
{ |
||||
name: "3 ستاره", |
||||
percent: 9, |
||||
name: "سه ستاره", |
||||
value: ((threeCount?.count || 0) / allCount) * 100, |
||||
}, |
||||
{ |
||||
name: "2 ستاره", |
||||
percent: 5, |
||||
name: "چهار ستاره", |
||||
value: ((fourCount?.count || 0) / allCount) * 100, |
||||
}, |
||||
{ |
||||
name: "1 ستاره", |
||||
percent: 6, |
||||
name: "پنج ستاره", |
||||
value: ((fiveCount?.count || 0) / allCount) * 100, |
||||
}, |
||||
], |
||||
}; |
||||
].map((item, index) => ( |
||||
<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> |
||||
{desktop ? ( |
||||
<Progress deskTop percent={item.value} /> |
||||
) : ( |
||||
<Progress percent={item.value} /> |
||||
)} |
||||
<span className="ml-2 text-xs text-blue5F dark:text-white"> |
||||
{item.value + "%"} |
||||
</span> |
||||
</li> |
||||
))} |
||||
</ul> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export default Rate; |
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue