psf/bch-dex-taker-v2
1
0
Fork 0
mirror of https://github.com/Permissionless-Software-Foundation/bch-dex-taker-v2.git synced 2026-09-21 16:52:01 -07:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #24 from Permissionless-Software-Foundation/dh-img-carousel

Browse Source 
feat(nft): Added image carousel
This commit is contained in:
Chris Troutner
2025-06-24 08:04:57 -07:00
committed by GitHub
parent 0da9d4c567 f24c199dd6
commit 913745ba9f
1 changed files with 26 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/app-body/user-data-review.js
+20 -6
View File
@@ -5,7 +5,7 @@
// Global npm libraries
import React, { useState, useEffect } from 'react'
import { useParams } from 'react-router-dom'
import { Container, Row, Col, Tabs, Tab, Spinner } from 'react-bootstrap'
import { Container, Row, Col, Tabs, Tab, Spinner, Carousel } from 'react-bootstrap'
import ReactMarkdown from 'react-markdown'
function UserDataReview (props) {
@@ -59,17 +59,31 @@ function UserDataReview (props) {
<Tab eventKey='media' title='Media'>
{media && media.length > 0
? (
<Row className='mt-3'>
<div className='mt-3 mb-5'>
<Carousel>
{media.map((item, index) => (
<Col key={index} xs={12} sm={6} md={4} lg={4} className='mb-3'>
<Carousel.Item key={index}>
<img
className='d-block w-100'
src={item.url}
alt={`Review media ${index + 1}`}
style={{ width: '100%', height: '250px', objectFit: 'cover', borderRadius: '8px' }}
style={{ height: '400px', objectFit: 'contain' }}
/>
</Col>
<Carousel.Caption>
<p>Image {index + 1} of {media.length}</p>
</Carousel.Caption>
</Carousel.Item>
))}
</Row>
</Carousel>
<style>{`
.carousel-control-next,
.carousel-control-prev,
.carousel-indicators {
filter: invert(100%);
}
`}
</style>
</div>
)
: (
<p className='mt-3'>No media content available</p>