34 lines
1.5 KiB
TypeScript
34 lines
1.5 KiB
TypeScript
|
import React, { FC } from 'react'
|
||
|
|
import { useProduct } from 'vtex.product-context'
|
||
|
|
import styles from "./styles.css";
|
||
|
|
|
||
|
|
export const DescriptionSection: FC = () => {
|
||
|
|
|
||
|
|
const productContextValue = useProduct();
|
||
|
|
|
||
|
|
const imageProduct = productContextValue?.product?.items[0].images[0].imageUrl;
|
||
|
|
const imageProductAlt = productContextValue?.product?.productName;
|
||
|
|
const descriptionProduct = productContextValue?.product?.description;
|
||
|
|
return (
|
||
|
|
<section className={styles.containerDescriptionSection}>
|
||
|
|
<nav>
|
||
|
|
<ul className={styles.containerDescriptionSectionNav}>
|
||
|
|
<li className={styles.linkContainer}><a className={styles.active} href="#description1">Descrição</a></li>
|
||
|
|
<li className={styles.linkContainer}><a href="#description2">Descrição</a></li>
|
||
|
|
<li className={styles.linkContainer}><a href="#description3">Descrição</a></li>
|
||
|
|
<li className={styles.linkContainer}><a href="#description4">Descrição</a></li>
|
||
|
|
<li className={styles.linkContainer}><a href="#description5">Descrição</a></li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<div className={styles.wrapperImageAndDescription}>
|
||
|
|
<img className={styles.imageProductDescriptionSection} src={imageProduct} alt={imageProductAlt} />
|
||
|
|
<div className={styles.wrapperDescriptionSection}>
|
||
|
|
<h3 className={styles.descriptionSectionTitle}>Descrição do produto</h3>
|
||
|
|
<p className={styles.descriptionSectionParagraph}>{descriptionProduct}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|