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

Product Page Product Overview Massive Changes

Browse Source
temp
Pedram Keshavarzi 3 years ago
parent ca84af9095
commit 381af7f5b2
4 changed files with 167 additions and 133 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      src/components/Button/index.js
  2. 99
      src/views/Product/Desktop/ProductOverAll/index.js
  3. 4
      src/views/Products/layouts/Sidebar.js
  4. 3
      tailwind.config.js

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

@ -10,10 +10,14 @@ export default function Button({
onClick,
selectable,
active,
borderType,
twPaddings,
customStyle,
radius
}) {
return (
<button
className={`rounded-md py-3 justify-center text-sm cursor-pointer ${
className={`${radius == false ? '' : 'rounded-md'} ${twPaddings? twPaddings : 'py-3'} ${customStyle} justify-center text-sm cursor-pointer ${
selectable ? (active ? "bg-black" : backgroundColor) : backgroundColor
} ${selectable ? (active ? "text-blueC0" : color) : color} ${
selectable ? (active ? "bg-opacity-10" : bgOpacity) : bgOpacity
@ -21,7 +25,7 @@ export default function Button({
style={{
border: `${
selectable ? (active ? "2px" : border.width) : border.width
} solid ${
} ${borderType ? borderType : 'solid'} ${
selectable ? (active ? "#196EC0" : border.color) : border.color
}`,
width: width,

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

@ -8,6 +8,7 @@ import Button from "../../../../components/Button";
import Header from "../../../../components/Header";
import Comment from "../../Comment";
import Rate from "../../Rate";
import StarRating from "../../../../components/StarRating";
export const ProductOverAll = ({
productType,
@ -19,21 +20,22 @@ export const ProductOverAll = ({
pushToCart,
headerOptions,
setHeaderOptions,
}) =>{
}) => {
const [type, setType] = useState("physical");
return (
<div>
<header
className={`w-full flex`}
className={`w-full flex justify-between`}
>
<img
src={`https://dnvn.ir/api/v1/file/${book?.fileIds}`}
alt=""
style={{height: '320px'}}
style={{ height: '320px' }}
className="-md py-8 px-16 bg-grayF4 mx-4"
/>
<div className="flex flex-1 flex-col pr-2 pt-2">
<div className="flex flex-col flex-1 ">
<div className="flex flex-col pr-2 py-2 border-0 border-b border-solid border-gray-100">
<h1 className="text-blue5F mb-3 font-semibold text-xl dark:text-white">
{type === "digital"
? book?.product[0]?.name
@ -42,48 +44,80 @@ export const ProductOverAll = ({
<div className="text-blueC0 text-xs dark:text-greenBA">
{"پایه" + " " + grades[book?.gradeId]}
</div>
<div className="flex float-left justify-end">
<div className="p-2">
<StarRating />
</div>
<div className="p-2 border-0 border-solid border-r border-gray-100 text-sm text-gray-400">
بیش از 160 نفر امتیاز داده اند
</div>
</div>
</div>
</header>
<ul
className="list-none flex flex-row divide-x items-center mt-4"
style={{ direction: "ltr" }}
>
<li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white">
{book?.pagesNum} <br /> صفحه
</li>
<li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white">
{"فیزیکی - دیجیتالی"} <br /> در دسترس
</li>
<li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white">
{book?.rate} <br /> امتیاز
</li>
</ul>
<h2 className="text-blueC0 text-sm font-semibold mt-7 dark:text-greenBA">
نسخه محصول را انتخاب کنید
</h2>
<div className="py-4 border-0 border-b border-solid border-gray-100">
<div className="flex items-center py-2">
<h1>نوع کتاب</h1>
<p className=" text-xs px-4 text-blueE8">به من کمک کن انتخاب کنم</p>
</div>
<div className="w-full flex flex-row justify-between items-center mt-4">
<Button
title="نسخه فیزیکی"
backgroundColor={isDark ? "bg-transparent" : "bg-white"}
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
width="49%"
color={isDark ? "text-white" : "text-blueC0"}
active={type === "physical"}
selectable={true}
onClick={() => setType("physical")}
borderType='dashed'
customStyle=''
twPaddings='py-4 px-12'
radius={false}
/>
<Button
title="نسخه دیجیتال"
backgroundColor={isDark ? "bg-transparent" : "bg-white"}
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
width="49%"
selectable={true}
active={type === "digital"}
color={isDark ? "text-white" : "text-blueC0"}
onClick={() => setType("digital")}
radius={false}
twPaddings='py-4 px-12'
/>
<Button
title="مشاهده نمونه"
backgroundColor={isDark ? "bg-transparent" : "bg-white"}
border={{ color: isDark ? "#ffffff55" : "#C01919", width: "1px" }}
radius={false}
twPaddings='py-4 px-6'
color={isDark ? "text-white" : "text-red19"}
/>
</div>
</div>
</div>
<div>
<h1>aopdjsoqweqweqweqweqweWajsduh</h1>
</div>
</header>
<ul
className="list-none flex flex-row divide-x items-center mt-4"
style={{ direction: "ltr" }}
>
<li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white">
{book?.pagesNum} <br /> صفحه
</li>
<li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white">
{"فیزیکی - دیجیتالی"} <br /> در دسترس
</li>
<li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white">
{book?.rate} <br /> امتیاز
</li>
</ul>
<h2 className="text-blueC0 text-sm font-semibold mt-7 dark:text-greenBA">
نسخه محصول را انتخاب کنید
</h2>
<div className="w-full flex flex-row justify-between items-center mt-4">
<Button
onClick={() =>
@ -112,13 +146,7 @@ export const ProductOverAll = ({
width="65%"
color="text-white"
/>
<Button
title="مشاهده نمونه"
backgroundColor={isDark ? "bg-transparent" : "bg-white"}
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
width="33%"
color={isDark ? "text-white" : "text-blueC0"}
/>
</div>
<div className="w-full flex flex-row justify-between items-center mt-4">
<Button
@ -152,13 +180,12 @@ const mapStateToProps = (state) => ({
grades: state.publicApi.grades,
isDark: state.publicApi.isDark,
userId: state.user.status.id,
});
});
const mapDispatchToProps = {
const mapDispatchToProps = {
getInfo: book.info,
pushToCart: userProduct.add,
setHeaderOptions: publicApi.setHeaderOptions,
};
export default connect(mapStateToProps, mapDispatchToProps)(ProductOverAll);
};
export default connect(mapStateToProps, mapDispatchToProps)(ProductOverAll);

4
src/views/Products/layouts/Sidebar.js
Unescape View File

@ -59,8 +59,8 @@ export const Sidebar = ({}) => {
},
]
return <div className="flex flex-col w-1/4 p-4">
<VerticalExpandableProductFilter btnTitle='مشاهده همه ی کالاهای آموزشی' list={filteronGrade} title="پایه تحصیلی" searchAble={true}/>
<VerticalExpandableProductFilter list={categories} title="دسته بندی" searchAble={false}/>
<VerticalExpandableProductFilter name="grades" btnTitle='مشاهده همه ی کالاهای آموزشی' list={filteronGrade} title="پایه تحصیلی" searchAble={true}/>
<VerticalExpandableProductFilter name="category" list={categories} title="دسته بندی" searchAble={false}/>
</div>;
};

3
tailwind.config.js
Unescape View File

@ -16,6 +16,7 @@ module.exports = {
blueFFOP : "rgba(6, 146, 255, 0.36)",
redFF: "#FFE6E6",
redFF1: "#FF2020",
red19: "#C01919",
yellow2: "#FDFFDA",
yellow3: "#EFFF00",
gray36: "#363636",
@ -45,6 +46,7 @@ module.exports = {
green71: "#067182",
greenBA: "#06BACE",
red5F: "#5F1A05",
red19: "#C01919",
yellow1: "#5F5F05",
gray1: "#333333",
gray70: "#707070",
@ -67,6 +69,7 @@ module.exports = {
blueB9: '#86A0B9',
grayDB: "#DBDBDB",
gray45: "#454545",
red19: "#C01919",
}),
fill: (theme) => ({

Write Preview
Loading…
Cancel
Save