import React from 'react';

const TinyBarLoader = () => {
  return (
    <>
      {/* Light Mode Section */}
      <section className="flex h-screen w-full bg-white dark:bg-gray-900">
        <div className="relative w-10 h-10 m-auto">
          <div
            className="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-30deg] translate-y-[-18px] TinyBarLoader"
            style={{ animationDelay: '-0.0833333333s' }}
          ></div>
          <div
            className="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-60deg] translate-y-[-18px] TinyBarLoader"
            style={{ animationDelay: '-0.1666666667s' }}
          ></div>
          <div
            className="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-90deg] translate-y-[-18px] TinyBarLoader"
            style={{ animationDelay: '-0.25s' }}
          ></div>
          <div
            className="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-120deg] translate-y-[-18px] TinyBarLoader"
            style={{ animationDelay: '-0.3333333333s' }}
          ></div>
          <div
            className="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-150deg] translate-y-[-18px] TinyBarLoader"
            style={{ animationDelay: '-0.4166666667s' }}
          ></div>
          <div
            className="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-180deg] translate-y-[-18px] TinyBarLoader"
            style={{ animationDelay: '-0.5s' }}
          ></div>
          <div
            className="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-210deg] translate-y-[-18px] TinyBarLoader"
            style={{ animationDelay: '-0.5833333333s' }}
          ></div>
          <div
            className="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-240deg] translate-y-[-18px] TinyBarLoader"
            style={{ animationDelay: '-0.6666666667s' }}
          ></div>
          <div
            className="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-270deg] translate-y-[-18px] TinyBarLoader"
            style={{ animationDelay: '-0.75s' }}
          ></div>
          <div
            className="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-300deg] translate-y-[-18px] TinyBarLoader"
            style={{ animationDelay: '-0.8333333333s' }}
          ></div>
          <div
            className="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-330deg] translate-y-[-18px] TinyBarLoader"
            style={{ animationDelay: '-0.9166666667s' }}
          ></div>
          <div
            className="absolute w-1 h-[18px] bg-black dark:bg-white rounded-sm origin-[50%_25px] transform rotate-[-360deg] translate-y-[-18px] TinyBarLoader"
            style={{ animationDelay: '-1s' }}
          ></div>
        </div>
      </section>

      {/* Dark Mode Section */}
      <section className="flex w-full h-screen bg-black dark:bg-gray-900">
        <div className="relative w-10 h-10 m-auto">
          <div
            className="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-30deg] translate-y-[-18px] TinyBarLoader"
            style={{ animationDelay: '-0.0833333333s' }}
          ></div>
          <div
            className="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-60deg] translate-y-[-18px] TinyBarLoader"
            style={{ animationDelay: '-0.1666666667s' }}
          ></div>
          <div
            className="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-90deg] translate-y-[-18px] TinyBarLoader"
            style={{ animationDelay: '-0.25s' }}
          ></div>
          <div
            className="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-120deg] translate-y-[-18px] TinyBarLoader"
            style={{ animationDelay: '-0.3333333333s' }}
          ></div>
          <div
            className="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-150deg] translate-y-[-18px] TinyBarLoader"
            style={{ animationDelay: '-0.4166666667s' }}
          ></div>
          <div
            className="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-180deg] translate-y-[-18px] TinyBarLoader"
            style={{ animationDelay: '-0.5s' }}
          ></div>
          <div
            className="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-210deg] translate-y-[-18px] TinyBarLoader"
            style={{ animationDelay: '-0.5833333333s' }}
          ></div>
          <div
            className="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-240deg] translate-y-[-18px] TinyBarLoader"
            style={{ animationDelay: '-0.6666666667s' }}
          ></div>
          <div
            className="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-270deg] translate-y-[-18px] TinyBarLoader"
            style={{ animationDelay: '-0.75s' }}
          ></div>
          <div
            className="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-300deg] translate-y-[-18px] TinyBarLoader"
            style={{ animationDelay: '-0.8333333333s' }}
          ></div>
          <div
            className="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-330deg] translate-y-[-18px] TinyBarLoader"
            style={{ animationDelay: '-0.9166666667s' }}
          ></div>
          <div
            className="absolute w-1 h-[18px] bg-white dark:bg-black rounded-sm origin-[50%_25px] transform rotate-[-360deg] translate-y-[-18px] TinyBarLoader"
            style={{ animationDelay: '-1s' }}
          ></div>
        </div>
      </section>
    </>
  );
};

export default TinyBarLoader;