migration wip
This commit is contained in:
255
components/ui/Slider.tsx
Normal file
255
components/ui/Slider.tsx
Normal file
@@ -0,0 +1,255 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { cn } from '../../lib/utils';
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
|
||||
export interface Slide {
|
||||
id: string;
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
description?: string;
|
||||
image?: string;
|
||||
ctaText?: string;
|
||||
ctaLink?: string;
|
||||
}
|
||||
|
||||
export interface SliderProps {
|
||||
slides: Slide[];
|
||||
autoplay?: boolean;
|
||||
autoplayInterval?: number;
|
||||
showControls?: boolean;
|
||||
showIndicators?: boolean;
|
||||
variant?: 'default' | 'fullscreen' | 'compact';
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Slider Component
|
||||
* Responsive carousel for WPBakery nectar_slider/nectar_carousel patterns
|
||||
* Supports autoplay, manual controls, and multiple variants
|
||||
*/
|
||||
export const Slider: React.FC<SliderProps> = ({
|
||||
slides,
|
||||
autoplay = false,
|
||||
autoplayInterval = 5000,
|
||||
showControls = true,
|
||||
showIndicators = true,
|
||||
variant = 'default',
|
||||
className = ''
|
||||
}) => {
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
const [isTransitioning, setIsTransitioning] = useState(false);
|
||||
|
||||
// Handle autoplay
|
||||
useEffect(() => {
|
||||
if (!autoplay || slides.length <= 1) return;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
nextSlide();
|
||||
}, autoplayInterval);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [autoplay, autoplayInterval, currentIndex, slides.length]);
|
||||
|
||||
const nextSlide = useCallback(() => {
|
||||
if (isTransitioning || slides.length <= 1) return;
|
||||
setIsTransitioning(true);
|
||||
setCurrentIndex((prev) => (prev + 1) % slides.length);
|
||||
setTimeout(() => setIsTransitioning(false), 300);
|
||||
}, [slides.length, isTransitioning]);
|
||||
|
||||
const prevSlide = useCallback(() => {
|
||||
if (isTransitioning || slides.length <= 1) return;
|
||||
setIsTransitioning(true);
|
||||
setCurrentIndex((prev) => (prev - 1 + slides.length) % slides.length);
|
||||
setTimeout(() => setIsTransitioning(false), 300);
|
||||
}, [slides.length, isTransitioning]);
|
||||
|
||||
const goToSlide = useCallback((index: number) => {
|
||||
if (isTransitioning || slides.length <= 1) return;
|
||||
setIsTransitioning(true);
|
||||
setCurrentIndex(index);
|
||||
setTimeout(() => setIsTransitioning(false), 300);
|
||||
}, [slides.length, isTransitioning]);
|
||||
|
||||
// Variant-specific styles
|
||||
const variantStyles = {
|
||||
default: 'rounded-xl overflow-hidden shadow-lg',
|
||||
fullscreen: 'w-full h-full rounded-none',
|
||||
compact: 'rounded-lg overflow-hidden shadow-md'
|
||||
};
|
||||
|
||||
const heightStyles = {
|
||||
default: 'h-96 md:h-[500px]',
|
||||
fullscreen: 'h-screen',
|
||||
compact: 'h-64 md:h-80'
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cn(
|
||||
'relative w-full bg-gray-900',
|
||||
heightStyles[variant],
|
||||
variantStyles[variant],
|
||||
className
|
||||
)}>
|
||||
{/* Slides Container */}
|
||||
<div className="relative w-full h-full overflow-hidden">
|
||||
{slides.map((slide, index) => (
|
||||
<div
|
||||
key={slide.id}
|
||||
className={cn(
|
||||
'absolute inset-0 w-full h-full transition-opacity duration-500',
|
||||
currentIndex === index ? 'opacity-100 z-10' : 'opacity-0 z-0'
|
||||
)}
|
||||
>
|
||||
{/* Background Image */}
|
||||
{slide.image && (
|
||||
<div className="absolute inset-0">
|
||||
<div
|
||||
className="w-full h-full bg-cover bg-center"
|
||||
style={{ backgroundImage: `url(${slide.image})` }}
|
||||
/>
|
||||
{/* Overlay for better text readability */}
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-black/40 via-black/20 to-black/60" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative z-10 h-full flex flex-col items-center justify-center px-4 md:px-8 text-white text-center">
|
||||
<div className="max-w-4xl space-y-4 md:space-y-6">
|
||||
{slide.subtitle && (
|
||||
<p className={cn(
|
||||
'text-sm md:text-base uppercase tracking-wider font-semibold',
|
||||
'text-white/90',
|
||||
variant === 'compact' && 'text-xs'
|
||||
)}>
|
||||
{slide.subtitle}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{slide.title && (
|
||||
<h2 className={cn(
|
||||
'text-3xl md:text-5xl font-bold leading-tight',
|
||||
'text-white drop-shadow-lg',
|
||||
variant === 'compact' && 'text-2xl md:text-3xl'
|
||||
)}>
|
||||
{slide.title}
|
||||
</h2>
|
||||
)}
|
||||
|
||||
{slide.description && (
|
||||
<p className={cn(
|
||||
'text-lg md:text-xl leading-relaxed',
|
||||
'text-white/90 max-w-2xl mx-auto',
|
||||
variant === 'compact' && 'text-base md:text-lg'
|
||||
)}>
|
||||
{slide.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{slide.ctaText && slide.ctaLink && (
|
||||
<a
|
||||
href={slide.ctaLink}
|
||||
className={cn(
|
||||
'inline-flex items-center justify-center',
|
||||
'px-6 py-3 md:px-8 md:py-4',
|
||||
'bg-primary hover:bg-primary-dark',
|
||||
'text-white font-semibold rounded-lg',
|
||||
'transition-all duration-200',
|
||||
'hover:scale-105 active:scale-95',
|
||||
'shadow-lg hover:shadow-xl'
|
||||
)}
|
||||
>
|
||||
{slide.ctaText}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Navigation Controls */}
|
||||
{showControls && slides.length > 1 && (
|
||||
<>
|
||||
<button
|
||||
onClick={prevSlide}
|
||||
className={cn(
|
||||
'absolute left-4 top-1/2 -translate-y-1/2',
|
||||
'z-20 p-2 md:p-3',
|
||||
'bg-white/20 hover:bg-white/30 backdrop-blur-sm',
|
||||
'text-white rounded-full',
|
||||
'transition-all duration-200',
|
||||
'hover:scale-110 active:scale-95',
|
||||
'focus:outline-none focus:ring-2 focus:ring-white/50'
|
||||
)}
|
||||
aria-label="Previous slide"
|
||||
>
|
||||
<ChevronLeft className="w-5 h-5 md:w-6 md:h-6" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={nextSlide}
|
||||
className={cn(
|
||||
'absolute right-4 top-1/2 -translate-y-1/2',
|
||||
'z-20 p-2 md:p-3',
|
||||
'bg-white/20 hover:bg-white/30 backdrop-blur-sm',
|
||||
'text-white rounded-full',
|
||||
'transition-all duration-200',
|
||||
'hover:scale-110 active:scale-95',
|
||||
'focus:outline-none focus:ring-2 focus:ring-white/50'
|
||||
)}
|
||||
aria-label="Next slide"
|
||||
>
|
||||
<ChevronRight className="w-5 h-5 md:w-6 md:h-6" />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Indicators */}
|
||||
{showIndicators && slides.length > 1 && (
|
||||
<div className={cn(
|
||||
'absolute bottom-4 left-1/2 -translate-x-1/2',
|
||||
'z-20 flex gap-2',
|
||||
'bg-black/20 backdrop-blur-sm px-3 py-2 rounded-full'
|
||||
)}>
|
||||
{slides.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => goToSlide(index)}
|
||||
className={cn(
|
||||
'w-2 h-2 md:w-3 md:h-3 rounded-full',
|
||||
'transition-all duration-200',
|
||||
currentIndex === index
|
||||
? 'bg-white scale-125'
|
||||
: 'bg-white/40 hover:bg-white/60 hover:scale-110'
|
||||
)}
|
||||
aria-label={`Go to slide ${index + 1}`}
|
||||
aria-current={currentIndex === index}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Slide Counter (optional, for accessibility) */}
|
||||
<div className={cn(
|
||||
'absolute top-4 right-4',
|
||||
'z-20 px-3 py-1',
|
||||
'bg-black/30 backdrop-blur-sm',
|
||||
'text-white text-sm font-medium rounded-full'
|
||||
)}>
|
||||
{currentIndex + 1} / {slides.length}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Helper function to convert WPBakery slider HTML to Slide array
|
||||
export function parseWpSlider(content: string): Slide[] {
|
||||
// This would parse nectar_slider or similar WPBakery slider patterns
|
||||
// For now, returns empty array - can be enhanced based on actual WP content
|
||||
return [];
|
||||
}
|
||||
|
||||
export default Slider;
|
||||
Reference in New Issue
Block a user