{"version":3,"file":"Carousel-BvSYgBiK.js","sources":["../../../app/javascript/components/types/Carousel.jsx"],"sourcesContent":["import PropTypes from \"prop-types\";\nimport { useRef, useState } from \"react\";\n\nimport Dispatcher from \"@/components/types/Dispatcher\";\nimport classNames from \"classnames\";\nimport cn from \"./Carousel.module.css\";\n\nconst LABELS = {\n  flexbox: \"Flexbox\",\n  backgrounds: \"Backgrounds\",\n  colors: \"Colors\",\n  \"margin-padding-gap\": \"Margin/Padding/Gap\",\n  tables: \"Tables\",\n  transforms: \"Transforms\",\n  \"transitions-animations\": \"Transitions and Animations\",\n  typography: \"Typography\",\n\n  \"align-basic\": \"Flexbox\",\n  \"container-basic\": \"Flexbox\",\n  \"intro-container\": \"Flex Forms\",\n  \"intro-basic\": \"Column System\",\n  \"alpha-hex\": \"Transparency\",\n  \"gap-basic\": \"Gaps\",\n  \"gradient-conic\": \"Gradients\",\n  \"gradient-linear-multiple\": \"Linear Gradients\",\n  \"image-gradient\": \"Background Overlays\",\n  \"order-pagination\": \"Pagination\",\n  \"grow-basic\": \"Flex Grow\",\n  \"justify-basic\": \"Flex Justify\",\n  \"other-blend-mode\": \"Blend Modes\",\n  \"horizontal-auto\": \"Centering\",\n  \"padding-balance\": \"Visual Balance\",\n  \"horizontal-flexbox\": \"Flex Centering\",\n  \"horizontal-negative\": \"Negative Margins\",\n  \"intro-space\": \"Balanced Spacing\",\n  \"intro-interchangeable\": \"Choosing between Margin/Padding/Gap\",\n  \"vertical-margin-not-last\": \"Pseudo Elements\",\n  \"span-col\": \"Tables\",\n  \"card-basic\": \"Perspective\",\n  \"card-hover\": \"Flip Card\",\n  \"rotate-3d\": \"3D Transforms\",\n  \"translate-list\": \"Translations\",\n  \"property-transform\": \"Transitions\",\n  \"direction-basic\": \"Animations\",\n  \"playstate-basic\": \"Playstate\",\n  \"timing-basic\": \"Animations\",\n  \"align-start\": \"Text Align\",\n  \"web-typo\": \"Typography\",\n  \"dark-palette\": \"Dark Mode\",\n  \"primary-secondary\": \"Dark Mode\",\n\n  \"size-simple\": \"Typography\",\n  \"property-several\": \"Hover Transitions\",\n  \"perspective-parent\": \"3D Transforms\",\n  \"padding-four\": \"Padding\",\n  \"margin-auto\": \"Centering\",\n  \"gap-both\": \"Flex Gaps\",\n  \"align-all\": \"Flex Alignment\",\n  \"grow-more\": \"Flex Grow\",\n  \"justify-end\": \"Flex Justify\",\n  \"alpha-rgba\": \"Transparency\",\n  \"dark-buttons\": \"Dark Mode\",\n  \"gradient-radial\": \"Gradients\",\n  \"multiple-image\": \"Backgrounds\",\n  \"intro-form\": \"Responsive Form\",\n  \"other-origin\": \"2D Transforms\",\n};\n\nfunction Carousel({ kind, componentIds, byId }) {\n  const carouselRef = useRef();\n  const [currentIndex, setCurrentIndex] = useState(0);\n  const [offset, setOffset] = useState(0);\n\n  const handleTabClick = (e, index) => {\n    e.preventDefault();\n    setCurrentIndex(index);\n\n    const offset = e.target.offsetLeft;\n    const half = e.target.offsetWidth / 2;\n    const midpoint = carouselRef.current.offsetWidth / 2;\n\n    if (offset + half > midpoint) {\n      setOffset(offset + half - midpoint);\n    } else {\n      setOffset(0);\n    }\n  };\n\n  const carouselCN = classNames({\n    [cn.carousel]: true,\n    [cn[`is-${kind}`]]: true,\n    [cn[`is-${currentIndex + 1}`]]: true,\n  });\n\n  const tabsStyle = {\n    transform: `translateX(-${offset}px)`,\n  };\n\n  const carouselStyle = {\n    \"--index\": currentIndex,\n  };\n\n  return (\n    <div className={cn.main}>\n      <nav className={cn.tabs} style={tabsStyle}>\n        {componentIds.map((tab, index) => {\n          const tabCN = classNames({\n            [cn.tab]: true,\n            [cn.active]: index === currentIndex,\n          });\n\n          const label = LABELS[tab] || tab;\n\n          return (\n            <button\n              key={tab}\n              className={tabCN}\n              onClick={(e) => handleTabClick(e, index)}\n            >\n              <strong>{label}</strong>\n            </button>\n          );\n        })}\n      </nav>\n\n      <div ref={carouselRef} className={carouselCN} style={carouselStyle}>\n        <div className={cn.list}>\n          {componentIds.map((courseId, index) => {\n            const component = byId[courseId];\n            component.kind = kind;\n\n            const componentStyle = {\n              \"--n\": index,\n              \"--offset\": index - currentIndex,\n            };\n\n            const courseCN = classNames({\n              [cn.component]: true,\n              [cn.current]: index === currentIndex,\n            });\n\n            return (\n              <div key={courseId} className={courseCN} style={componentStyle}>\n                <Dispatcher part={component} index={999} />\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nCarousel.propTypes = {\n  kind: PropTypes.string,\n  componentIds: PropTypes.array,\n  byId: PropTypes.object,\n};\n\nexport default Carousel;\n"],"names":["LABELS","Carousel","kind","componentIds","byId","carouselRef","useRef","currentIndex","setCurrentIndex","useState","offset","setOffset","handleTabClick","e","index","half","midpoint","carouselCN","classNames","cn","tabsStyle","carouselStyle","jsxs","jsx","tab","tabCN","label","courseId","component","componentStyle","courseCN","Dispatcher","PropTypes"],"mappings":"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"}