Reshaped Carousel

import * as React from "react";
import { ProgressIndicator, Reshaped, View } from "reshaped/bundle";
import Carousel from "@/components/ui/reshaped-carousel";

function Component() {
  const [index, setIndex] = React.useState(0);
  return (
    <View gap={4} align="center">
      <Carousel
        visibleItems={3}
        onScroll={() => {}}
        onChange={(args) => setIndex(args.index)}
      >
        <View backgroundColor="neutral-faded" height={25} />
        <View backgroundColor="neutral-faded" height={25} />
        <View backgroundColor="neutral-faded" height={25} />
        <View backgroundColor="neutral-faded" height={25} />
        <View backgroundColor="neutral-faded" height={25} />
        <View backgroundColor="neutral-faded" height={25} />
        <View backgroundColor="neutral-faded" height={25} />
        <View backgroundColor="neutral-faded" height={25} />
        <View backgroundColor="neutral-faded" height={25} />
      </Carousel>
      <ProgressIndicator total={7} activeIndex={index} />
    </View>
  );
}

export default function Demo() {
  return (
    <Reshaped theme="slate">
      <div style={{ maxWidth: 640, width: "100%", margin: "0 auto", padding: 24 }}>
        <Component />
      </div>
    </Reshaped>
  );
}