profile pages done
This commit is contained in:
meena committed
1 parent
221ea3057b
commit
8a670b461a
38 files changed
+4402
-487
No files matched your search
@@ -0,0 +1,365 @@
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
|
||||
import { Play, X, Heart, Share2, Eye, ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
|
||||
// Import Swiper styles
|
||||
import 'swiper/css';
|
||||
import 'swiper/css/navigation';
|
||||
import 'swiper/css/pagination';
|
||||
|
||||
const VideoSwiperGallery = () => {
|
||||
const [selectedVideo, setSelectedVideo] = useState(null);
|
||||
const swiperRef = useRef(null);
|
||||
|
||||
// Video data with online sources
|
||||
const videos = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Priya & Rahul - Wedding Story',
|
||||
thumbnail: 'https://images.unsplash.com/photo-1519741497674-611481863552?w=600&h=400&fit=crop',
|
||||
videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
|
||||
views: '2.4K',
|
||||
likes: '142',
|
||||
duration: '3:45'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Aisha - Profile Introduction',
|
||||
thumbnail: 'https://images.unsplash.com/photo-1606216794079-e48e3e2a3f6a?w=600&h=400&fit=crop',
|
||||
videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
|
||||
views: '1.8K',
|
||||
likes: '98',
|
||||
duration: '2:30'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Rohan - Life Journey',
|
||||
thumbnail: 'https://images.unsplash.com/photo-1511285560929-80b456fea0bc?w=600&h=400&fit=crop',
|
||||
videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
|
||||
views: '3.2K',
|
||||
likes: '256',
|
||||
duration: '4:15'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Divya - Family Values',
|
||||
thumbnail: 'https://images.unsplash.com/photo-1522673607200-164d1b6ce486?w=600&h=400&fit=crop',
|
||||
videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4',
|
||||
views: '1.5K',
|
||||
likes: '87',
|
||||
duration: '3:00'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Karthik & Meera - First Meet',
|
||||
thumbnail: 'https://images.unsplash.com/photo-1583939003579-730e3918a45a?w=600&h=400&fit=crop',
|
||||
videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4',
|
||||
views: '4.1K',
|
||||
likes: '312',
|
||||
duration: '5:20'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Sneha - Hobbies & Interests',
|
||||
thumbnail: 'https://images.unsplash.com/photo-1465495976277-4387d4b0b4c6?w=600&h=400&fit=crop',
|
||||
videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4',
|
||||
views: '2.7K',
|
||||
likes: '178',
|
||||
duration: '2:45'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: 'Arjun - Career & Dreams',
|
||||
thumbnail: 'https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?w=600&h=400&fit=crop',
|
||||
videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4',
|
||||
views: '1.9K',
|
||||
likes: '134',
|
||||
duration: '3:30'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: 'Lakshmi - Traditional Values',
|
||||
thumbnail: 'https://images.unsplash.com/photo-1606216794074-735e91aa2c92?w=600&h=400&fit=crop',
|
||||
videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4',
|
||||
views: '3.5K',
|
||||
likes: '267',
|
||||
duration: '4:00'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: 'Vikram - Adventure Life',
|
||||
thumbnail: 'https://images.unsplash.com/photo-1519167758481-83f29da8c4f3?w=600&h=400&fit=crop',
|
||||
videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
|
||||
views: '5.2K',
|
||||
likes: '423',
|
||||
duration: '4:30'
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
title: 'Anjali - Creative Journey',
|
||||
thumbnail: 'https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?w=600&h=400&fit=crop',
|
||||
videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
|
||||
views: '3.8K',
|
||||
likes: '289',
|
||||
duration: '3:15'
|
||||
}
|
||||
];
|
||||
|
||||
const VideoCard = ({ video }) => {
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="group cursor-pointer h-full"
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
onClick={() => setSelectedVideo(video)}
|
||||
>
|
||||
<div className="relative rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 h-full">
|
||||
{/* Thumbnail */}
|
||||
<div className="relative aspect-video">
|
||||
<img
|
||||
src={video.thumbnail}
|
||||
alt={video.title}
|
||||
className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
|
||||
/>
|
||||
|
||||
{/* Overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent opacity-60 group-hover:opacity-80 transition-opacity" />
|
||||
|
||||
{/* Play Button */}
|
||||
<motion.div
|
||||
initial={{ scale: 1 }}
|
||||
whileHover={{ scale: 1.2 }}
|
||||
className="absolute inset-0 flex items-center justify-center"
|
||||
>
|
||||
<div className="w-14 h-14 bg-white/90 rounded-full flex items-center justify-center shadow-xl group-hover:bg-[#A70710] transition-all">
|
||||
<Play className="w-7 h-7 text-[#034E08] group-hover:text-white ml-1" fill="currentColor" />
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Duration Badge */}
|
||||
<div className="absolute top-2 right-2 bg-black/70 text-white text-xs font-semibold px-2 py-1 rounded">
|
||||
{video.duration}
|
||||
</div>
|
||||
|
||||
{/* Stats at bottom */}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-3">
|
||||
<h3 className="text-white font-semibold text-sm mb-2 line-clamp-2">
|
||||
{video.title}
|
||||
</h3>
|
||||
<div className="flex items-center gap-3 text-white/90 text-xs">
|
||||
<div className="flex items-center gap-1">
|
||||
<Eye className="w-3 h-3" />
|
||||
<span>{video.views}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Heart className="w-3 h-3" />
|
||||
<span>{video.likes}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
// Video Modal
|
||||
const VideoModal = () => {
|
||||
if (!selectedVideo) return null;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center p-4 z-[9999]"
|
||||
onClick={() => setSelectedVideo(null)}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0.9, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
exit={{ scale: 0.9, opacity: 0 }}
|
||||
className="relative w-full max-w-5xl"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Close Button */}
|
||||
<button
|
||||
onClick={() => setSelectedVideo(null)}
|
||||
className="absolute -top-12 right-0 text-white hover:text-gray-300 transition-colors"
|
||||
>
|
||||
<X className="w-8 h-8" />
|
||||
</button>
|
||||
|
||||
{/* Video Player */}
|
||||
<div className="bg-[#034E08] rounded-2xl overflow-y-scroll h-[100%] max-h-[480px] shadow-2xl">
|
||||
<video
|
||||
src={selectedVideo.videoUrl}
|
||||
controls
|
||||
autoPlay
|
||||
className="w-full aspect-video"
|
||||
>
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
|
||||
{/* Video Info */}
|
||||
<div className="bg-gray-900 p-6">
|
||||
<h2 className="text-white text-2xl font-bold mb-3">
|
||||
{selectedVideo.title}
|
||||
</h2>
|
||||
<div className="flex items-center gap-6 text-gray-300">
|
||||
<div className="flex items-center gap-2">
|
||||
<Eye className="w-5 h-5" />
|
||||
<span>{selectedVideo.views} views</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Heart className="w-5 h-5" />
|
||||
<span>{selectedVideo.likes} likes</span>
|
||||
</div>
|
||||
<button className="flex items-center gap-2 ml-auto bg-[#034E08] hover:bg-green-700 text-white px-6 py-2 rounded-full transition-colors">
|
||||
<Share2 className="w-4 h-4" />
|
||||
<span>Share</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className=" my-12">
|
||||
<div className="max-w-[1400px] mx-auto ">
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="text-center mb-12"
|
||||
>
|
||||
<h1 className="text-[20px] text-[#034E08] sm:text-[22px] lg:text-[24px] font-bold mb-3">
|
||||
Video Gallery
|
||||
</h1>
|
||||
<p className="text-gray-600 text-[12px]">
|
||||
Discover profiles through their stories
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Swiper Container */}
|
||||
<div className="relative ">
|
||||
<Swiper
|
||||
ref={swiperRef}
|
||||
modules={[Navigation, Pagination, Autoplay]}
|
||||
spaceBetween={20}
|
||||
slidesPerView={1}
|
||||
autoplay={{
|
||||
delay: 4000,
|
||||
disableOnInteraction: false,
|
||||
pauseOnMouseEnter: true
|
||||
}}
|
||||
pagination={{
|
||||
clickable: true,
|
||||
dynamicBullets: true
|
||||
}}
|
||||
loop={true}
|
||||
speed={800}
|
||||
breakpoints={{
|
||||
640: {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 20
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 20
|
||||
},
|
||||
1024: {
|
||||
slidesPerView: 4,
|
||||
spaceBetween: 25
|
||||
}
|
||||
}}
|
||||
className="pb-16"
|
||||
>
|
||||
{videos.map((video) => (
|
||||
<SwiperSlide key={video.id}>
|
||||
<VideoCard video={video} />
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
|
||||
{/* Custom Navigation Buttons */}
|
||||
{/* Custom Navigation Buttons */}
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.1, x: -5 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
onClick={() => swiperRef.current?.swiper.slidePrev()}
|
||||
className="hidden sm:flex absolute left-0 top-1/2 -translate-y-1/2 z-10
|
||||
bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all
|
||||
w-12 h-12 rounded-full shadow-xl hover:shadow-2xl items-center justify-center "
|
||||
>
|
||||
<ChevronLeft className="w-6 h-6 text-gray-700" />
|
||||
</motion.button>
|
||||
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.1, x: 5 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
onClick={() => swiperRef.current?.swiper.slideNext()}
|
||||
className="hidden sm:flex absolute right-0 top-1/2 -translate-y-1/2 z-10
|
||||
bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all
|
||||
w-12 h-12 rounded-full shadow-xl hover:shadow-2xl items-center justify-center transition-all"
|
||||
>
|
||||
<ChevronRight className="w-6 h-6 text-gray-700" />
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
{/* View All Button */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.5 }}
|
||||
className="text-center mt-12"
|
||||
>
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="px-8 py-3 bg-[#034E08] hover:bg-green-700 text-white rounded-full font-semibold text-lg shadow-lg hover:shadow-xl transition-all"
|
||||
>
|
||||
View All Videos
|
||||
</motion.button>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Video Modal */}
|
||||
{selectedVideo && <VideoModal />}
|
||||
|
||||
{/* Custom Swiper Styles */}
|
||||
<style jsx global>{`
|
||||
.swiper-pagination-bullet {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #A70710;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-active {
|
||||
opacity: 1;
|
||||
width: 30px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
height: auto;
|
||||
display: flex;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default VideoSwiperGallery;
|
||||
Reference in new issue
Block a user