import Glide, { Options } from "@glidejs/glide"; import "@glidejs/glide/dist/css/glide.core.min.css"; import "@glidejs/glide/dist/css/glide.theme.min.css"; import { ComponentProps, FC, useEffect, useRef } from "react"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { FiArrowLeft, FiArrowRight } from "@calcom/ui/components/icon"; import { SkeletonText } from "../skeleton"; const SliderButton: FC> = (props) => { const { children, ...rest } = props; return ( ); }; export const Slider = ({ title = "", className = "", items, itemKey = (item) => `${item}`, renderItem, options = {}, }: { title?: string; className?: string; items: T[]; itemKey?: (item: T) => string; renderItem?: (item: T) => JSX.Element; options?: Options; }) => { const glide = useRef(null); const slider = useRef(null); const { isLocaleReady } = useLocale(); useEffect(() => { if (glide.current) { slider.current = new Glide(glide.current, { type: "carousel", ...options, }).mount(); } return () => slider.current?.destroy(); }, [options]); return (
{isLocaleReady ? ( title && (

{title}

) ) : ( )}
    {items.map((item) => { if (typeof renderItem !== "function") return null; return (
  • {renderItem(item)}
  • ); })}
); };