lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
100 lines • 8.98 kB
JavaScript
;
// components/ThreeDCarousel.tsx
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const lucide_react_1 = require("lucide-react");
const card_1 = require("./card");
const use_mobile_1 = require("@/hooks/use-mobile");
const ThreeDCarousel = ({ items = [
{
id: 1,
title: "Active Wear Innovation",
brand: "Nike",
description: "Integrating flexible sensors into performance gear to monitor muscle fatigue and heart rate in real-time.",
tags: ["Sports", "Health", "IoT"],
imageUrl: "https://images.unsplash.com/photo-1515243061678-14fc18b93935?q=80&w=2940&auto=format&fit=crop",
link: "#",
},
{
id: 2,
title: "Smart Ergonomics",
brand: "Herman Miller",
description: "Pressure-sensitive fabrics in office chairs that analyze posture and suggest adjustments for optimal health.",
tags: ["Office", "Health", "Furniture"],
imageUrl: "https://images.unsplash.com/photo-1505843490538-5133c6c7d0e1?q=80&w=2938&auto=format&fit=crop",
link: "#",
},
{
id: 3,
title: "Automotive Comfort",
brand: "Tesla",
description: "Intelligent car seats that adapt to passenger position and monitor vital signs for enhanced safety.",
tags: ["Auto", "Safety", "Smart"],
imageUrl: "https://images.unsplash.com/photo-1561580125-028ce3bfcb25?q=80&w=2940&auto=format&fit=crop",
link: "#",
},
], autoRotate = true, rotateInterval = 4000, cardHeight = 500, title = "From Textile to Intelligence", subtitle = "Customer Cases", tagline = "Explore how our textile sensor technology is revolutionizing multiple industries with intelligent fabric solutions tailored to specific needs.", isMobileSwipe = true, }) => {
const [active, setActive] = (0, react_1.useState)(0);
const carouselRef = (0, react_1.useRef)(null);
const [isInView, setIsInView] = (0, react_1.useState)(false);
const [isHovering, setIsHovering] = (0, react_1.useState)(false);
const [touchStart, setTouchStart] = (0, react_1.useState)(null);
const [touchEnd, setTouchEnd] = (0, react_1.useState)(null);
const isMobile = (0, use_mobile_1.useIsMobile)();
const minSwipeDistance = 50;
(0, react_1.useEffect)(() => {
if (autoRotate && isInView && !isHovering) {
const interval = setInterval(() => {
setActive((prev) => (prev + 1) % items.length);
}, rotateInterval);
return () => clearInterval(interval);
}
}, [isInView, isHovering, autoRotate, rotateInterval, items.length]);
(0, react_1.useEffect)(() => {
const observer = new IntersectionObserver(([entry]) => setIsInView(entry.isIntersecting), { threshold: 0.2 });
return () => observer.disconnect();
}, []);
const onTouchStart = (e) => {
setTouchStart(e.targetTouches[0].clientX);
setTouchEnd(null);
};
const onTouchMove = (e) => {
setTouchEnd(e.targetTouches[0].clientX);
};
const onTouchEnd = () => {
if (!touchStart || !touchEnd)
return;
const distance = touchStart - touchEnd;
if (distance > minSwipeDistance) {
setActive((prev) => (prev + 1) % items.length);
}
else if (distance < -minSwipeDistance) {
setActive((prev) => (prev - 1 + items.length) % items.length);
}
};
const getCardAnimationClass = (index) => {
if (index === active)
return "scale-100 opacity-100 z-20";
if (index === (active + 1) % items.length)
return "translate-x-[40%] scale-95 opacity-60 z-10";
if (index === (active - 1 + items.length) % items.length)
return "translate-x-[-40%] scale-95 opacity-60 z-10";
return "scale-90 opacity-0";
};
return ((0, jsx_runtime_1.jsx)("section", { id: "ThreeDCarousel", className: "bg-transparent min-w-full mx-aut \r\n flex items-center justify-center", children: (0, jsx_runtime_1.jsx)("div", { className: "w-full px-4 sm:px-6 lg:px-8 \r\n min-w-[350px] md:min-w-[1000px] max-w-7xl ", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative overflow-hidden h-[550px] ", onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false), onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onTouchEnd, ref: carouselRef, children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute top-0 left-0 w-full h-full flex items-center justify-center ", children: items.map((item, index) => ((0, jsx_runtime_1.jsx)("div", { className: `absolute top-0 w-full max-w-md transform transition-all duration-500 ${getCardAnimationClass(index)}`, children: (0, jsx_runtime_1.jsxs)(card_1.Card, { className: `overflow-hidden bg-background h-[${cardHeight}px] border shadow-sm
hover:shadow-md flex flex-col`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative bg-black p-6 flex items-center justify-center h-48 overflow-hidden", style: {
backgroundImage: `url(${item.imageUrl})`,
backgroundSize: "cover",
backgroundPosition: "center",
}, children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 bg-black/50" }), (0, jsx_runtime_1.jsxs)("div", { className: "relative z-10 text-center text-white", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-2xl font-bold mb-2", children: item.brand.toUpperCase() }), (0, jsx_runtime_1.jsx)("div", { className: "w-12 h-1 bg-white mx-auto mb-2" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm ", children: item.title })] })] }), (0, jsx_runtime_1.jsxs)(card_1.CardContent, { className: "p-6 flex flex-col flex-grow", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-xl font-bold mb-1 text-foreground", children: item.title }), (0, jsx_runtime_1.jsx)("p", { className: "text-gray-500 text-sm font-medium mb-2", children: item.brand }), (0, jsx_runtime_1.jsx)("p", { className: "text-gray-600 text-sm flex-grow", children: item.description }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap gap-2 mb-4", children: item.tags.map((tag, idx) => ((0, jsx_runtime_1.jsx)("span", { className: "px-2 py-1 bg-gray-50 text-gray-600 rounded-full text-xs animate-pulse-slow", children: tag }, idx))) }), (0, jsx_runtime_1.jsxs)("a", { href: item.link, className: "text-gray-500 flex items-center hover:underline relative group", onClick: () => {
if (item.link.startsWith("/")) {
window.scrollTo(0, 0);
}
}, children: [(0, jsx_runtime_1.jsx)("span", { className: "relative z-10", children: "Learn more" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { className: "ml-2 w-4 h-4 relative z-10 transition-transform group-hover:translate-x-1" }), (0, jsx_runtime_1.jsx)("span", { className: "absolute left-0 bottom-0 w-0 h-0.5 bg-gray-500 transition-all duration-300 group-hover:w-full" })] })] })] })] }) }, item.id))) }), !isMobile && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { className: "absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 bg-white/80 rounded-full flex items-center justify-center text-gray-500 hover:bg-white z-30 shadow-md transition-all hover:scale-110", onClick: () => setActive((prev) => (prev - 1 + items.length) % items.length), "aria-label": "Previous", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "w-5 h-5" }) }), (0, jsx_runtime_1.jsx)("button", { className: "absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 bg-white/80 rounded-full flex items-center justify-center text-gray-500 hover:bg-white z-30 shadow-md transition-all hover:scale-110", onClick: () => setActive((prev) => (prev + 1) % items.length), "aria-label": "Next", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "w-5 h-5" }) })] })), (0, jsx_runtime_1.jsx)("div", { className: "absolute bottom-6 left-0 right-0 flex justify-center items-center space-x-3 z-30", children: items.map((_, idx) => ((0, jsx_runtime_1.jsx)("button", { className: `w-2 h-2 rounded-full transition-all duration-300 ${active === idx
? "bg-gray-500 w-5"
: "bg-gray-200 hover:bg-gray-300"}`, onClick: () => setActive(idx), "aria-label": `Go to item ${idx + 1}` }, idx))) })] }) }) }));
};
exports.default = ThreeDCarousel;
//# sourceMappingURL=3d-carousel.js.map