Reza_ashrafi
3 years ago
parent
40256c162a
commit
be5c38ce5d
43 changed files with 359 additions and 420 deletions
@ -1,135 +1,126 @@ |
|||||||
|
|
||||||
import React from "react"; |
import React from "react"; |
||||||
import { useState } from "react"; |
import { useState } from "react"; |
||||||
|
|
||||||
const ProductDescription = ({ |
const ProductDescription = ({ navTitles, items, addToCart }) => { |
||||||
navTitles, |
const [name, setName] = useState(navTitles[0].name); |
||||||
items, |
const [type, setType] = useState([]); |
||||||
addToCart |
return ( |
||||||
}) =>{ |
<> |
||||||
const [name, setName] = useState(navTitles[0].name); |
<div className="flex w-full rounded bg-gray-200 justify-center mt-6 "> |
||||||
const [type, setType] = useState([]); |
<ul className="w-full flex justify-center"> |
||||||
return( |
{navTitles.map((item, index) => ( |
||||||
<> |
<li |
||||||
<div className="flex w-full rounded bg-gray-200 justify-center mt-6 "> |
key={index} |
||||||
<ul className="w-full flex justify-center"> |
className={`p-6 mx-4 cursor-pointer
|
||||||
{navTitles.map(item => <li key={`NavTitle_${item.id}`}
|
${ |
||||||
className={`p-6 mx-4 cursor-pointer
|
type[item.id] |
||||||
${type[item.id] ? 'border-0 border-b-4 border-solid border-blue-500' : null}` |
? "border-0 border-b-4 border-solid border-blue-500" |
||||||
}
|
: null |
||||||
onClick={() => {
|
}`}
|
||||||
// type[item.id] = type
|
onClick={() => { |
||||||
// type[item.id] = !type[item.id]
|
setName(item.name); |
||||||
setName(item.name) |
}} |
||||||
// setType(type)
|
> |
||||||
// console.log(type)
|
{item.title} |
||||||
// console.log(item.id)
|
</li> |
||||||
// console.log(type[item.id])
|
))} |
||||||
|
</ul> |
||||||
}}> |
</div> |
||||||
{item.title}</li>)} |
<div className="flex w-full "> |
||||||
</ul> |
<div className="flex-1 "> |
||||||
</div> |
{items.map((item, index) => |
||||||
<div className="flex w-full "> |
item.name == name |
||||||
<div className="flex-1 "> |
? item.items.map((item, index) => ( |
||||||
|
<ul className="flex w-full flex-1 my-2 items-center" key={index}> |
||||||
{items.map(e => (
|
{item.title ? ( |
||||||
e.name == name ? |
<li |
||||||
e.items.map(item => ( |
className="py-4 px-8 min-w-md bg-gray-200 ml-4 text-blueC0" |
||||||
<ul className="flex w-full flex-1 my-2 items-center"> |
style={{ minWidth: "300px" }} |
||||||
|
> |
||||||
{item.title ?
|
{item.title} |
||||||
<li className="py-4 px-8 min-w-md bg-gray-200 ml-4 text-blueC0" style={{minWidth: '300px'}}>{item.title}</li> : null} |
</li> |
||||||
<li className="py-4 px-8 min-w-md bg-gray-200 ml-4 w-full">{item.description}</li> |
) : null} |
||||||
</ul> |
<li className="py-4 px-8 min-w-md bg-gray-200 ml-4 w-full"> |
||||||
|
{item.description} |
||||||
)) : null |
</li> |
||||||
|
</ul> |
||||||
|
)) |
||||||
))}
|
: null |
||||||
</div> |
)} |
||||||
<div className="my-2"> |
</div> |
||||||
{addToCart} |
<div className="my-2">{addToCart}</div> |
||||||
</div> |
</div> |
||||||
|
</> |
||||||
</div> |
); |
||||||
</> |
|
||||||
); |
|
||||||
}; |
}; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export default ProductDescription; |
export default ProductDescription; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
ProductDescription.defaultProps = { |
ProductDescription.defaultProps = { |
||||||
navTitles: [ |
navTitles: [ |
||||||
|
{ |
||||||
|
id: 0, |
||||||
|
title: "مشخصات", |
||||||
|
isActive: true, |
||||||
|
name: "moshakhasat", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
title: "نقد و بررسی", |
||||||
|
isActive: false, |
||||||
|
name: "review", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
title: "برسش و باسخ", |
||||||
|
isActive: false, |
||||||
|
}, |
||||||
|
], |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
name: "moshakhasat", |
||||||
|
items: [ |
||||||
{ |
{ |
||||||
id: 0, |
title: "وزن کتاب", |
||||||
title: 'مشخصات', |
description: "۱ کیلوگرم", |
||||||
isActive: true, |
|
||||||
name: 'moshakhasat' |
|
||||||
}, |
}, |
||||||
{ |
{ |
||||||
id: 1, |
title: "تعداد صفحات", |
||||||
title: 'نقد و بررسی', |
description: "400 صفحه", |
||||||
isActive: false, |
|
||||||
name: 'review' |
|
||||||
}, |
}, |
||||||
{ |
{ |
||||||
id: 2, |
title: "نوع کاغذ", |
||||||
title: 'برسش و باسخ', |
description: "گلاسه", |
||||||
isActive:false |
|
||||||
}, |
}, |
||||||
], |
|
||||||
items: [ |
|
||||||
{ |
{ |
||||||
name: 'moshakhasat', |
title: "شماره شابک", |
||||||
items: [ |
description: "1225548218000005818765", |
||||||
{ |
|
||||||
title : 'وزن کتاب', |
|
||||||
description: '۱ کیلوگرم' |
|
||||||
}, |
|
||||||
{ |
|
||||||
title : 'تعداد صفحات', |
|
||||||
description: '400 صفحه' |
|
||||||
}, |
|
||||||
{ |
|
||||||
title : 'نوع کاغذ', |
|
||||||
description: 'گلاسه' |
|
||||||
}, |
|
||||||
{ |
|
||||||
title : 'شماره شابک', |
|
||||||
description: '1225548218000005818765' |
|
||||||
}, |
|
||||||
{ |
|
||||||
title : 'انتشارات', |
|
||||||
description: 'رزمندگان' |
|
||||||
}, |
|
||||||
{ |
|
||||||
title : 'نویسنده و یا معلف', |
|
||||||
description: 'یک نویسنده گمنام' |
|
||||||
}, |
|
||||||
{ |
|
||||||
title : 'قطع', |
|
||||||
description: 'خشتی' |
|
||||||
}, |
|
||||||
{ |
|
||||||
title : 'سال انتشار', |
|
||||||
description: '1399' |
|
||||||
}, |
|
||||||
] |
|
||||||
}, |
}, |
||||||
{ |
{ |
||||||
name: 'review', |
title: "انتشارات", |
||||||
items: [{ |
description: "رزمندگان", |
||||||
description: 'لورم ایبسوم' |
}, |
||||||
}] |
{ |
||||||
} |
title: "نویسنده و یا معلف", |
||||||
] |
description: "یک نویسنده گمنام", |
||||||
|
}, |
||||||
} |
{ |
||||||
|
title: "قطع", |
||||||
|
description: "خشتی", |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "سال انتشار", |
||||||
|
description: "1399", |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "review", |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
description: "لورم ایبسوم", |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
|||||||
Loading…
Reference in new issue