116 lines
4.4 KiB
JavaScript
116 lines
4.4 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { Carousel } from 'primereact/carousel';
|
|
import { Galleria } from 'primereact/galleria';
|
|
import { Button } from 'primereact/button';
|
|
import { Image } from "primereact/image";
|
|
import { ProductService } from '../service/ProductService';
|
|
import { PhotoService } from '../service/PhotoService';
|
|
|
|
const MediaDemo = () => {
|
|
const [products, setProducts] = useState([]);
|
|
const [images, setImages] = useState([]);
|
|
const galleriaResponsiveOptions = [
|
|
{
|
|
breakpoint: "1024px",
|
|
numVisible: 5,
|
|
},
|
|
{
|
|
breakpoint: "960px",
|
|
numVisible: 4,
|
|
},
|
|
{
|
|
breakpoint: "768px",
|
|
numVisible: 3,
|
|
},
|
|
{
|
|
breakpoint: "560px",
|
|
numVisible: 1,
|
|
},
|
|
];
|
|
const carouselResponsiveOptions = [
|
|
{
|
|
breakpoint: "1024px",
|
|
numVisible: 3,
|
|
numScroll: 3,
|
|
},
|
|
{
|
|
breakpoint: "768px",
|
|
numVisible: 2,
|
|
numScroll: 2,
|
|
},
|
|
{
|
|
breakpoint: "560px",
|
|
numVisible: 1,
|
|
numScroll: 1,
|
|
},
|
|
];
|
|
|
|
useEffect(() => {
|
|
const productService = new ProductService();
|
|
productService.getProductsSmall().then((products) => setProducts(products));
|
|
|
|
const photoService = new PhotoService();
|
|
photoService.getImages().then((images) => setImages(images));
|
|
}, []);
|
|
|
|
const carouselItemTemplate = (product) => {
|
|
return (
|
|
<div className="product-item">
|
|
<div className="product-item-content">
|
|
<div className="mb-3">
|
|
<img src={`assets/demo/images/product/${product.image}`} alt={product.name} className="product-image" />
|
|
</div>
|
|
<div>
|
|
<h4 className="p-mb-1">
|
|
{product.name}
|
|
</h4>
|
|
<h6 className="mt-0 mb-3">${product.price}</h6>
|
|
<span className={`product-badge status-${product.inventoryStatus.toLowerCase()}`}>{product.inventoryStatus}</span>
|
|
<div className="car-buttons mt-5">
|
|
<Button type="button" className="p-button p-button-rounded mr-2" icon="pi pi-search"></Button>
|
|
<Button type="button" className="p-button-success p-button-rounded mr-2" icon="pi pi-star"></Button>
|
|
<Button type="button" className="p-button-help p-button-rounded" icon="pi pi-cog"></Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const galleriaItemTemplate = (item) => <img src={`assets/${item.itemImageSrc}`} alt={item.alt} style={{ width: '100%', display: 'block' }} />
|
|
const galleriaThumbnailTemplate = (item) => <img src={`assets/${item.thumbnailImageSrc}`} alt={item.alt} style={{ width: '100%', display: 'block' }} />
|
|
|
|
return (
|
|
<div className="grid p-fluid media-demo">
|
|
<div className="col-12">
|
|
<div className="card">
|
|
<h5>Carousel</h5>
|
|
<Carousel value={products} numVisible={3} numScroll={3} responsiveOptions={carouselResponsiveOptions} itemTemplate={carouselItemTemplate}></Carousel>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-12">
|
|
<div className="card">
|
|
<h5>Galleria</h5>
|
|
<Galleria value={images} responsiveOptions={galleriaResponsiveOptions} numVisible={7} circular style={{ maxWidth: '800px', margin: 'auto' }}
|
|
item={galleriaItemTemplate} thumbnail={galleriaThumbnailTemplate}></Galleria>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-12">
|
|
<div className="card">
|
|
<h5>Image</h5>
|
|
<div className="flex justify-content-center">
|
|
<Image src="assets/demo/images/galleria/galleria11.jpg" alt="galleria" width={250} preview />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const comparisonFn = function (prevProps, nextProps) {
|
|
return prevProps.location.pathname === nextProps.location.pathname;
|
|
};
|
|
|
|
export default React.memo(MediaDemo, comparisonFn); |