mirror of
https://github.com/LibreChat-AI/librechat.ai.git
synced 2026-03-27 10:48:32 +07:00
a0a74501c9
* chore: upgrade eslint to v9 * chore: update package dependencies in package.json and pnpm-lock.yaml - Added `minimatch` and `serialize-javascript` dependencies with updated versions. - Upgraded `ajv` to version 6.14.0. - Removed outdated dependencies from pnpm-lock.yaml for better package management. * feat: add Stripe logos to Companies section - Introduced new company entry for Stripe in the Companies component, including both light and dark logo variants. - Updated the Companies array to display 10 logos instead of 8. - Adjusted TypeScript environment reference to point to the development types directory.
86 lines
2.3 KiB
TypeScript
86 lines
2.3 KiB
TypeScript
'use client'
|
|
|
|
// Carousel.tsx
|
|
import React, { useEffect, useRef } from 'react'
|
|
import Glide from '@glidejs/glide'
|
|
import '@glidejs/glide/dist/css/glide.core.min.css'
|
|
import styles from './style.module.css'
|
|
|
|
// TODO: Fix "showControls" and "showBullets" + theme detection and dynamic style (broke when moving to nextra v3)
|
|
|
|
const Carousel = ({ children, ...props }) => {
|
|
const carouselRef = useRef(null)
|
|
|
|
const {
|
|
autoplay = false,
|
|
animationDuration = '1000',
|
|
showControls = false,
|
|
showBullets = false,
|
|
perView = '1',
|
|
} = props
|
|
|
|
useEffect(() => {
|
|
if (carouselRef.current) {
|
|
const glide = new Glide(carouselRef.current, {
|
|
type: 'carousel',
|
|
perView: parseInt(perView, 10),
|
|
animationDuration: parseInt(animationDuration, 10),
|
|
autoplay: autoplay ? 3000 : false,
|
|
// Other Glide configuration options can be added here
|
|
})
|
|
|
|
glide.mount()
|
|
|
|
return () => {
|
|
glide.destroy()
|
|
}
|
|
}
|
|
}, [autoplay, animationDuration, perView])
|
|
|
|
const slides = React.Children.map(children, (child) => {
|
|
if (React.isValidElement(child)) {
|
|
return <li className={styles.glide__slide}>{child}</li>
|
|
}
|
|
return null
|
|
})
|
|
|
|
return (
|
|
<div className="glide" ref={carouselRef}>
|
|
<div className="glide__track" data-glide-el="track">
|
|
<ul className="glide__slides">{slides}</ul>
|
|
</div>
|
|
{showControls && (
|
|
<div className={styles.glide__arrows} data-glide-el="controls">
|
|
<button
|
|
className={`${styles.glide__arrow} glide__arrow--left}`}
|
|
data-glide-dir="<"
|
|
aria-label="Previous slide"
|
|
>
|
|
←
|
|
</button>
|
|
<button
|
|
className={`${styles.glide__arrow} glide__arrow--right}`}
|
|
data-glide-dir=">"
|
|
aria-label="Next slide"
|
|
>
|
|
→
|
|
</button>
|
|
</div>
|
|
)}
|
|
{showBullets && (
|
|
<div className={styles.glide__bullets} data-glide-el="controls[nav]">
|
|
{React.Children.map(children, (_, index) => (
|
|
<button
|
|
className={styles.glide__bullets}
|
|
data-glide-dir={`=${index}`}
|
|
aria-label={`Go to slide ${index + 1}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Carousel
|