Scroller

import React from "react";
import { Scroller } from "@/components/ui/scroller";

export const Vertical = () => (
    <div className="flex flex-col gap-2">
        <div className="font-bold text-xl dark:text-white">Vertical</div>
        <Scroller height={220} overflow="y" width="100%">
            <div className="flex flex-col gap-4 w-[400px]">
            <div className="bg-[#171717] dark:bg-[#ededed] h-64 w-64" />
            <div className="bg-[#171717] dark:bg-[#ededed] h-64 w-64" />
            </div>
        </Scroller>
    </div>
);

export const Horizontal = () => (
    <div className="flex flex-col gap-2 w-1/2">
        <div className="font-bold text-xl dark:text-white">Horizontal</div>
        <Scroller height="100%" overflow="x" width="100%">
            <div className="flex gap-4 min-w-[120%]">
            <div className="bg-[#171717] dark:bg-[#ededed] h-64 w-64" />
            <div className="bg-[#171717] dark:bg-[#ededed] h-64 w-64" />
            <div className="bg-[#171717] dark:bg-[#ededed] h-64 w-64" />
            <div className="bg-[#171717] dark:bg-[#ededed] h-64 w-64" />
            </div>
        </Scroller>
    </div>
);

export const Free = () => (
    <div className="flex flex-col gap-2 w-1/2">
        <div className="font-bold text-xl dark:text-white">Free</div>
        <Scroller height={220} overflow="both" width="100%">
            <div className="grid grid-flow-col grid-rows-2 gap-4">
            {[...Array.from({ length: 6 }, (_, i) => (
                <div className="bg-[#171717] dark:bg-[#ededed] h-96 w-96" key={i} />
            ))]}
            </div>
        </Scroller>
    </div>
);


export const VerticalWithButtons = () => (
    <div className="flex flex-col gap-2 w-1/2">
        <div className="font-bold text-xl dark:text-white">Vertical with buttons</div>
        <Scroller
          childrenContainerClassName="gap-4"
          height={220}
          overflow="y"
          withButtons
        >
          {[...Array.from({ length: 4 }, (_, i) => (
            <div className="bg-[#171717] dark:bg-[#ededed] dark:text-[#171717] text-[#ededed] h-60 w-full" key={i} />
          ))]}
        </Scroller>
    </div>
);


export const HorizontalWithButtons = () => (
    <div className="flex flex-col gap-2 w-1/2">
        <div className="font-bold text-xl dark:text-white">Horizontal with buttons</div>
        <Scroller
          childrenContainerClassName="gap-4"
          height="100%"
          overflow="x"
          width="100%"
          withButtons
        >
          {[...Array.from({ length: 4 }, (_, i) => (
            <div className="bg-[#171717] dark:bg-[#ededed] dark:text-[#171717] text-[#ededed] h-60 w-96" key={i} />
          ))]}
        </Scroller>
    </div>
);