marquee tw

import { tw, animation, css, keyframes } from 'twind/css';
import Netlify from '@/constants/svg/netlify.svg';
import Nike from '@/constants/svg/nike.svg';
import Figma from '@/constants/svg/figma.svg';
import Aws from '@/constants/svg/aws.svg';

function Marquee() {
  const MarqueeA = keyframes({
    '0%': { transform: `translateX(0%)` },
    '100%': { transform: `translateX(-100%)` },
  });
  const MarqueeB = keyframes({
    '0%': { transform: `translateX(100%)` },
    '100%': { transform: `translateX(0%)` },
  });
  const marqueeAnimation_A = animation(`35s linear infinite`, MarqueeA);
  const marqueeAnimation_B = animation(`35s linear infinite`, MarqueeB);

  //   return <div>Hello Marquee!</div>;
  return (
    <div className={tw(`relative flex overflow-x-hidden`)}>
      <div className={tw`${marqueeAnimation_A} py-12 whitespace-nowrap flex`}>
        <Aws className={tw(`m-12 mb-8 `)} width={120} />
        <Netlify className={tw(`m-12`)} width={140} />
        <Nike className={tw(`m-12`)} width={140} />
        <Figma className={tw(`m-12`)} width={140} />
        <Aws className={tw(`m-12 mb-8 `)} width={120} />
        <Netlify className={tw(`m-12`)} width={140} />
        <Nike className={tw(`m-12`)} width={140} />
        <Figma className={tw(`m-12`)} width={140} />
      </div>
      <div className={tw`${marqueeAnimation_B} absolute top-0 py-12 flex whitespace-nowrap`}>
        <Aws className={tw(`m-12 mb-8 `)} width={120} />
        <Netlify className={tw(`m-12`)} width={140} />
        <Nike className={tw(`m-12`)} width={140} />
        <Figma className={tw(`m-12`)} width={140} />
        <Aws className={tw(`m-12 mb-8 `)} width={120} />
        <Netlify className={tw(`m-12`)} width={140} />
        <Nike className={tw(`m-12`)} width={140} />
        <Figma className={tw(`m-12`)} width={140} />
      </div>
    </div>
  );
}

export default Marquee;