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 { useState } from "react"; |
||||
|
||||
const ProductDescription = ({ |
||||
navTitles, |
||||
items, |
||||
addToCart |
||||
}) =>{ |
||||
const [name, setName] = useState(navTitles[0].name); |
||||
const [type, setType] = useState([]); |
||||
return( |
||||
<> |
||||
<div className="flex w-full rounded bg-gray-200 justify-center mt-6 "> |
||||
<ul className="w-full flex justify-center"> |
||||
{navTitles.map(item => <li key={`NavTitle_${item.id}`}
|
||||
className={`p-6 mx-4 cursor-pointer
|
||||
${type[item.id] ? 'border-0 border-b-4 border-solid border-blue-500' : null}` |
||||
}
|
||||
onClick={() => {
|
||||
// type[item.id] = type
|
||||
// type[item.id] = !type[item.id]
|
||||
setName(item.name) |
||||
// setType(type)
|
||||
// console.log(type)
|
||||
// console.log(item.id)
|
||||
// console.log(type[item.id])
|
||||
|
||||
}}> |
||||
{item.title}</li>)} |
||||
</ul> |
||||
</div> |
||||
<div className="flex w-full "> |
||||
<div className="flex-1 "> |
||||
|
||||
{items.map(e => (
|
||||
e.name == name ? |
||||
e.items.map(item => ( |
||||
<ul className="flex w-full flex-1 my-2 items-center"> |
||||
|
||||
{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 className="py-4 px-8 min-w-md bg-gray-200 ml-4 w-full">{item.description}</li> |
||||
</ul> |
||||
|
||||
)) : null |
||||
|
||||
|
||||
))}
|
||||
</div> |
||||
<div className="my-2"> |
||||
{addToCart} |
||||
</div> |
||||
|
||||
</div> |
||||
</> |
||||
); |
||||
const ProductDescription = ({ navTitles, items, addToCart }) => { |
||||
const [name, setName] = useState(navTitles[0].name); |
||||
const [type, setType] = useState([]); |
||||
return ( |
||||
<> |
||||
<div className="flex w-full rounded bg-gray-200 justify-center mt-6 "> |
||||
<ul className="w-full flex justify-center"> |
||||
{navTitles.map((item, index) => ( |
||||
<li |
||||
key={index} |
||||
className={`p-6 mx-4 cursor-pointer
|
||||
${ |
||||
type[item.id] |
||||
? "border-0 border-b-4 border-solid border-blue-500" |
||||
: null |
||||
}`}
|
||||
onClick={() => { |
||||
setName(item.name); |
||||
}} |
||||
> |
||||
{item.title} |
||||
</li> |
||||
))} |
||||
</ul> |
||||
</div> |
||||
<div className="flex w-full "> |
||||
<div className="flex-1 "> |
||||
{items.map((item, index) => |
||||
item.name == name |
||||
? item.items.map((item, index) => ( |
||||
<ul className="flex w-full flex-1 my-2 items-center" key={index}> |
||||
{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 className="py-4 px-8 min-w-md bg-gray-200 ml-4 w-full"> |
||||
{item.description} |
||||
</li> |
||||
</ul> |
||||
)) |
||||
: null |
||||
)} |
||||
</div> |
||||
<div className="my-2">{addToCart}</div> |
||||
</div> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export default ProductDescription; |
||||
|
||||
|
||||
|
||||
|
||||
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: 'مشخصات', |
||||
isActive: true, |
||||
name: 'moshakhasat' |
||||
title: "وزن کتاب", |
||||
description: "۱ کیلوگرم", |
||||
}, |
||||
{ |
||||
id: 1, |
||||
title: 'نقد و بررسی', |
||||
isActive: false, |
||||
name: 'review' |
||||
title: "تعداد صفحات", |
||||
description: "400 صفحه", |
||||
}, |
||||
{ |
||||
id: 2, |
||||
title: 'برسش و باسخ', |
||||
isActive:false |
||||
title: "نوع کاغذ", |
||||
description: "گلاسه", |
||||
}, |
||||
], |
||||
items: [ |
||||
{ |
||||
name: 'moshakhasat', |
||||
items: [ |
||||
{ |
||||
title : 'وزن کتاب', |
||||
description: '۱ کیلوگرم' |
||||
}, |
||||
{ |
||||
title : 'تعداد صفحات', |
||||
description: '400 صفحه' |
||||
}, |
||||
{ |
||||
title : 'نوع کاغذ', |
||||
description: 'گلاسه' |
||||
}, |
||||
{ |
||||
title : 'شماره شابک', |
||||
description: '1225548218000005818765' |
||||
}, |
||||
{ |
||||
title : 'انتشارات', |
||||
description: 'رزمندگان' |
||||
}, |
||||
{ |
||||
title : 'نویسنده و یا معلف', |
||||
description: 'یک نویسنده گمنام' |
||||
}, |
||||
{ |
||||
title : 'قطع', |
||||
description: 'خشتی' |
||||
}, |
||||
{ |
||||
title : 'سال انتشار', |
||||
description: '1399' |
||||
}, |
||||
] |
||||
title: "شماره شابک", |
||||
description: "1225548218000005818765", |
||||
}, |
||||
{ |
||||
name: 'review', |
||||
items: [{ |
||||
description: 'لورم ایبسوم' |
||||
}] |
||||
} |
||||
] |
||||
|
||||
} |
||||
title: "انتشارات", |
||||
description: "رزمندگان", |
||||
}, |
||||
{ |
||||
title: "نویسنده و یا معلف", |
||||
description: "یک نویسنده گمنام", |
||||
}, |
||||
{ |
||||
title: "قطع", |
||||
description: "خشتی", |
||||
}, |
||||
{ |
||||
title: "سال انتشار", |
||||
description: "1399", |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
name: "review", |
||||
items: [ |
||||
{ |
||||
description: "لورم ایبسوم", |
||||
}, |
||||
], |
||||
}, |
||||
], |
||||
}; |
||||
|
||||
Loading…
Reference in new issue