react/components/slider/slider-dot.tsx

import React from 'react'
import useTheme from '../styles/use-theme'
import withDefaults from '../utils/with-defaults'

interface Props {
  left: number
  disabled?: boolean
  isClick?: boolean
}

const defaultProps = {
  left: 0,
  disabled: false,
  isClick: false,
}

type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
export type SliderDotProps = Props & typeof defaultProps & NativeAttrs

const SliderDot = React.forwardRef<HTMLDivElement, React.PropsWithChildren<SliderDotProps>>(
  ({ children, disabled, left, isClick }, ref: React.Ref<HTMLDivElement>) => {
    const theme = useTheme()

    return (
      <div className={`dot ${disabled ? 'disabled' : ''} ${isClick ? 'click' : ''}`} ref={ref}>
        {children}
        <style jsx>{`
          .dot {
            position: absolute;
            left: ${left}%;
            top: 50%;
            transform: translate(-50%, -50%);
            height: 1.25rem;
            line-height: 1.25rem;
            border-radius: 0.625rem;
            user-select: none;
            font-weight: 700;
            font-size: 0.75rem;
            z-index: 100;
            background-color: ${theme.palette.success};
            color: ${theme.palette.background};
            text-align: center;
            padding: 0 calc(0.86 * ${theme.layout.gapHalf});
          }

          .dot.disabled {
            cursor: not-allowed !important;
            background-color: ${theme.palette.accents_2};
            color: ${theme.palette.accents_4};
          }

          .dot.click {
            transition: all 200ms ease;
          }

          .dot:hover {
            cursor: grab;
          }

          .dot:active {
            cursor: grabbing;
          }
        `}</style>
      </div>
    )
  },
)

export default withDefaults(SliderDot, defaultProps)