# All files index.jsx

100% Statements 32/32
77.27% Branches 17/22
100% Functions 8/8
100% Lines 29/29

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    341x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x

    1x
    3x
    3x
    29x
    29x

    3x

    2x

    1x
    1x
    1x
    2x

    1x
    1x
    1ximport clsx from 'clsx'
    import PropTypes from 'prop-types'

    const StickyCard = ({ cards, children }) => {
      return (
        <section className="flex flex-col gap-4 pt-[30px] pb-[20px]">
          {cards.map((card, index) => {
            const animateSlide = index % 2 === 0 ? 'animate-slide-in-left' : 'animate-slide-in-right'
            return (
              <div
                key={card?.id}
      E          style={{ position: 'sticky', top: `calc(50px + ${(index + 1) * 30}px)` }}
                className={clsx(
          E        'sticky z-10 m-auto flex w-[50vw] justify-center overflow-hidden rounded-2xl bg-[#0a192f] px-8 pt-4 after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-2xl after:outline after:-outline-offset-2 after:outline-white/20',
                  animateSlide
                )}
              >
                <div className="animate-wiggle h-[30vh]">
                  <p className="animate-hue-rotate hue-clip text-gradient text-2xl">Card Item</p>
                </div>
              </div>
            )
          })}
        </section>
      )
    }

    StickyCard.propTypes = {
      cards: PropTypes.array.isRequired,
      children: PropTypes.node
    }

    export default StickyCard