Carousel

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "sebs7n-ui"
import { Carousel, CarouselContent, CarouselDots, CarouselItem, CarouselNext, CarouselPrevious } from "sebs7n-ui/carousel"

function Plans() {
  return (
    <Carousel aria-label="Planes" className="w-full max-w-sm">
      <CarouselContent>
        {PLANS.map((plan) => (
          <CarouselItem key={plan.name}>
            <Card>
              <CardHeader>
                <CardTitle>{plan.name}</CardTitle>
                <CardDescription>{plan.detail}</CardDescription>
              </CardHeader>
              <CardContent className="text-title-1 text-label tabular-nums">{plan.price}</CardContent>
            </Card>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
      <CarouselDots />
    </Carousel>
  )
}

import { Card, CardDescription, CardHeader, CardTitle } from "sebs7n-ui"
import { Carousel, CarouselContent, CarouselDots, CarouselItem, CarouselNext, CarouselPrevious } from "sebs7n-ui/carousel"

function Several() {
  return (
    <Carousel aria-label="Planes, de a dos" className="w-full max-w-lg" opts={{ align: "start" }}>
      <CarouselContent>
        {PLANS.map((plan) => (
          <CarouselItem className="basis-1/2" key={plan.name}>
            <Card size="sm">
              <CardHeader>
                <CardTitle>{plan.name}</CardTitle>
                <CardDescription>{plan.price}</CardDescription>
              </CardHeader>
            </Card>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
      <CarouselDots />
    </Carousel>
  )
}

import { Card, CardContent } from "sebs7n-ui"
import { Carousel, CarouselContent, CarouselDots, CarouselItem, CarouselNext, CarouselPrevious } from "sebs7n-ui/carousel"

function Photos() {
  return (
    <Card className="w-full max-w-xs gap-0 overflow-hidden py-0">
      <Carousel aria-label="Factura 0012 escaneada" bleed controls="overlay" opts={{ loop: true }}>
        <CarouselContent>
          {PAGES.map((page) => (
            <CarouselItem key={page.name}>
              <div aria-label={page.name} className="aspect-4/3" role="img" style={{ background: page.background }} />
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
        <CarouselDots />
      </Carousel>
      <CardContent className="p-4">
        <p className="text-headline text-label">Factura 0012</p>
        <p className="text-callout text-label-secondary">Acme S.A. · 3 páginas</p>
      </CardContent>
    </Card>
  )
}