@royyanbach-mhg-test/material-tailwind-react
Version:
@material-tailwind/react is an easy-to-use components library for ReactJS & Tailwind CSS inspired by Material Design.
1 lines • 2.32 kB
JavaScript
import React from"react";export var carousel={defaultProps:{prevArrow:function(param){var loop=param.loop,handlePrev=param.handlePrev,firstIndex=param.firstIndex;return React.createElement("button",{onClick:handlePrev,disabled:!loop&&firstIndex,className:"!absolute top-2/4 left-4 -translate-y-2/4 rounded-full select-none transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-12 max-w-[48px] h-12 max-h-[48px] text-white hover:bg-white/10 active:bg-white/30 grid place-items-center"},React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:3,className:"-ml-1 h-7 w-7"},React.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M15.75 19.5L8.25 12l7.5-7.5"})))},nextArrow:function(param){var loop=param.loop,handleNext=param.handleNext,lastIndex=param.lastIndex;return React.createElement("button",{onClick:handleNext,disabled:!loop&&lastIndex,className:"!absolute top-2/4 right-4 -translate-y-2/4 rounded-full select-none transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-12 max-w-[48px] h-12 max-h-[48px] text-white hover:bg-white/10 active:bg-white/30 grid place-items-center"},React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:3,className:"ml-1 h-7 w-7"},React.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M8.25 4.5l7.5 7.5-7.5 7.5"})))},navigation:function(param){var setActiveIndex=param.setActiveIndex,activeIndex=param.activeIndex,length=param.length;return React.createElement("div",{className:"absolute bottom-4 left-2/4 z-50 flex -translate-x-2/4 gap-2"},new Array(length).fill("").map(function(_,i){return React.createElement("span",{key:i,className:"block h-3 w-3 cursor-pointer rounded-full transition-colors content-[''] ".concat(activeIndex===i?"bg-white":"bg-white/50"),onClick:function(){return setActiveIndex(i)}})}))},autoplay:false,autoplayDelay:5e3,transition:{type:"tween",duration:.5},loop:false,className:""},styles:{base:{carousel:{position:"relative",width:"w-full",height:"h-full",overflowX:"overflow-x-hidden",display:"flex"},slide:{width:"w-full",height:"h-full",display:"inline-block",flex:"flex-none"}}}};export default carousel;