generated from muhtadeetaron/nextjs-template
feat(ui): add avatar and badge components
This commit is contained in:
shafin-r
@ -3,115 +3,158 @@ import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import styles from "../css/SlidingGallery.module.css";
|
||||
|
||||
const views = [
|
||||
{
|
||||
id: "1",
|
||||
content: (
|
||||
<Link
|
||||
href="https://www.facebook.com/share/g/15jdqESvWV/?mibextid=wwXIfr"
|
||||
className={styles.link}
|
||||
>
|
||||
<div className={styles.facebook}>
|
||||
<div className={styles.textView}>
|
||||
<h3 className={styles.facebookOne}>Meet, Share, and Learn!</h3>
|
||||
<p className={styles.facebookTwo}>Join Facebook Community</p>
|
||||
</div>
|
||||
<div className={styles.logoView}>
|
||||
<Image
|
||||
src="/images/static/facebook-logo.png"
|
||||
alt="Facebook Logo"
|
||||
width={120}
|
||||
height={120}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
content: (
|
||||
<Link
|
||||
href="https://www.facebook.com/share/g/15jdqESvWV/?mibextid=wwXIfr"
|
||||
className={styles.link}
|
||||
>
|
||||
<div className={styles.facebook}>
|
||||
<div className={styles.textView}>
|
||||
<h3 className={styles.facebookOne}>Meet, Share, and Learn!</h3>
|
||||
<p className={styles.facebookTwo}>Join Facebook Community</p>
|
||||
</div>
|
||||
<div className={styles.logoView}>
|
||||
<Image
|
||||
src="/images/static/facebook-logo.png"
|
||||
alt="Facebook Logo"
|
||||
width={120}
|
||||
height={120}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
content: (
|
||||
<Link
|
||||
href="https://www.facebook.com/share/g/15jdqESvWV/?mibextid=wwXIfr"
|
||||
className={styles.link}
|
||||
>
|
||||
<div className={styles.facebook}>
|
||||
<div className={styles.textView}>
|
||||
<h3 className={styles.facebookOne}>Meet, Share, and Learn!</h3>
|
||||
<p className={styles.facebookTwo}>Join Facebook Community</p>
|
||||
</div>
|
||||
<div className={styles.logoView}>
|
||||
<Image
|
||||
src="/images/static/facebook-logo.png"
|
||||
alt="Facebook Logo"
|
||||
width={120}
|
||||
height={120}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const SlidingGallery = () => {
|
||||
const SlidingGallery = ({
|
||||
views = [],
|
||||
className = "",
|
||||
showPagination = true,
|
||||
autoScroll = false,
|
||||
autoScrollInterval = 5000,
|
||||
onSlideChange = () => {},
|
||||
height = "100vh",
|
||||
}) => {
|
||||
const [activeIdx, setActiveIdx] = useState(0);
|
||||
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
|
||||
const scrollRef = useRef(null);
|
||||
const galleryRef = useRef(null);
|
||||
const autoScrollRef = useRef(null);
|
||||
|
||||
const handleScroll = (event) => {
|
||||
const scrollLeft = event.target.scrollLeft;
|
||||
const slideWidth = event.target.clientWidth;
|
||||
const index = Math.round(scrollLeft / slideWidth);
|
||||
setActiveIdx(index);
|
||||
// Auto-scroll functionality
|
||||
useEffect(() => {
|
||||
if (autoScroll && views.length > 1) {
|
||||
autoScrollRef.current = setInterval(() => {
|
||||
setActiveIdx((prevIdx) => {
|
||||
const nextIdx = (prevIdx + 1) % views.length;
|
||||
goToSlide(nextIdx);
|
||||
return nextIdx;
|
||||
});
|
||||
}, autoScrollInterval);
|
||||
|
||||
return () => {
|
||||
if (autoScrollRef.current) {
|
||||
clearInterval(autoScrollRef.current);
|
||||
}
|
||||
};
|
||||
}
|
||||
}, [autoScroll, autoScrollInterval, views.length]);
|
||||
|
||||
// Clear auto-scroll on user interaction
|
||||
const handleUserInteraction = () => {
|
||||
if (autoScrollRef.current) {
|
||||
clearInterval(autoScrollRef.current);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const updateDimensions = () => {
|
||||
if (galleryRef.current) {
|
||||
setDimensions({
|
||||
width: galleryRef.current.clientWidth,
|
||||
height: galleryRef.current.clientHeight,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Initial dimension update
|
||||
updateDimensions();
|
||||
|
||||
// Add resize listener
|
||||
window.addEventListener("resize", updateDimensions);
|
||||
|
||||
// Cleanup
|
||||
return () => window.removeEventListener("resize", updateDimensions);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// Recalculate active index when dimensions change
|
||||
if (scrollRef.current && dimensions.width > 0) {
|
||||
const scrollLeft = scrollRef.current.scrollLeft;
|
||||
const slideWidth = dimensions.width;
|
||||
const index = Math.round(scrollLeft / slideWidth);
|
||||
setActiveIdx(index);
|
||||
}
|
||||
}, [dimensions]);
|
||||
|
||||
const handleScroll = (event) => {
|
||||
handleUserInteraction();
|
||||
const scrollLeft = event.target.scrollLeft;
|
||||
const slideWidth = dimensions.width;
|
||||
const index = Math.round(scrollLeft / slideWidth);
|
||||
if (index !== activeIdx) {
|
||||
setActiveIdx(index);
|
||||
onSlideChange(index);
|
||||
}
|
||||
};
|
||||
|
||||
const goToSlide = (index) => {
|
||||
if (scrollRef.current) {
|
||||
scrollRef.current.scrollTo({
|
||||
left: index * dimensions.width,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleDotClick = (index) => {
|
||||
handleUserInteraction();
|
||||
goToSlide(index);
|
||||
setActiveIdx(index);
|
||||
onSlideChange(index);
|
||||
};
|
||||
|
||||
// Early return if no views
|
||||
if (!views || views.length === 0) {
|
||||
return (
|
||||
<div className={`${styles.gallery} ${className}`}>
|
||||
<div className={styles.emptyState}>
|
||||
<p>No content to display</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.gallery}>
|
||||
<div
|
||||
className={`${styles.gallery} ${className}`}
|
||||
ref={galleryRef}
|
||||
style={{ height }}
|
||||
>
|
||||
<div
|
||||
className={styles.scrollContainer}
|
||||
ref={scrollRef}
|
||||
onScroll={handleScroll}
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
{views.map((item) => (
|
||||
<div key={item.id} className={styles.slide}>
|
||||
<div
|
||||
key={item.id}
|
||||
className={styles.slide}
|
||||
style={{
|
||||
width: dimensions.width,
|
||||
height: "100%",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{item.content}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className={styles.pagination}>
|
||||
{views.map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`${styles.dot} ${
|
||||
activeIdx === index ? styles.activeDot : styles.inactiveDot
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{showPagination && views.length > 1 && (
|
||||
<div className={styles.pagination}>
|
||||
{views.map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`${styles.dot} ${
|
||||
activeIdx === index ? styles.activeDot : styles.inactiveDot
|
||||
}`}
|
||||
onClick={() => handleDotClick(index)}
|
||||
style={{ cursor: "pointer" }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user