import React from 'react'
import { Card, CardContent } from "@/app/components/shadcn-ui/Default-Ui/card"
import {
    Carousel,
    CarouselContent,
    CarouselItem,
    CarouselNext,
    CarouselPrevious,
} from "@/app/components/shadcn-ui/Default-Ui/carousel"

const BasicCarouselCode = () => {
  return (
    <>
    <div className="flex flex-wrap items-center justify-center gap-3 mt-4">
                <Carousel className="w-full max-w-xs">
                    <CarouselContent>
                        {Array.from({ length: 5 }).map((_, index) => (
                            <CarouselItem key={index}>
                                <div className="p-1">
                                    <Card className='border-ld'>
                                        <CardContent className="flex aspect-square items-center justify-center p-6">
                                            <span className="text-4xl text-ld font-semibold">{index + 1}</span>
                                        </CardContent>
                                    </Card>
                                </div>
                            </CarouselItem>
                        ))}
                    </CarouselContent>
                    <CarouselPrevious className='text-primary' />
                    <CarouselNext />
                </Carousel>
            </div>
    </>
  )
}

export default BasicCarouselCode

import React from 'react'
import { Card, CardContent } from "@/app/components/shadcn-ui/Default-Ui/card"
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/app/components/shadcn-ui/Default-Ui/carousel"


const VerticalCarouselCode = () => {
  return (
    <>
    <div className="flex flex-wrap items-center justify-center gap-3 my-16">
    <Carousel
      opts={{
        align: "start",
      }}
      orientation="vertical"
      className="w-full max-w-xs"
    >
      <CarouselContent className="-mt-1 h-[200px] border-border">
        {Array.from({ length: 5 }).map((_, index) => (
          <CarouselItem key={index} className="pt-1 md:basis-1/2">
            <div className="p-1">
              <Card>
                <CardContent className="flex items-center justify-center p-6">
                  <span className="text-3xl font-semibold text-ld">{index + 1}</span>
                </CardContent>
              </Card>
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
    </div>
    </>
  )
}

export default VerticalCarouselCode

import React from 'react'
import { Card, CardContent } from "@/app/components/shadcn-ui/Default-Ui/card"
import {
    Carousel,
    CarouselContent,
    CarouselItem,
    CarouselNext,
    CarouselPrevious,
} from "@/app/components/shadcn-ui/Default-Ui/carousel"

const CarouselMultipleItemCode = () => {
  return (
    <>
    <div className="flex flex-wrap items-center justify-center gap-3 mt-4">
        <Carousel className="w-full max-w-xs" >
            <CarouselContent>
                {Array.from({ length: 5 }).map((_, index) => (
                    <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
                        <div className="p-1">
                            <Card className='border-border'>
                                <CardContent className="flex aspect-square items-center justify-center p-6">
                                    <span className="text-4xl text-ld font-semibold">{index + 1}</span>
                                </CardContent>
                            </Card>
                        </div>
                    </CarouselItem>
                ))}
            </CarouselContent>
            <CarouselPrevious />
            <CarouselNext />
        </Carousel>
    </div>
    </>
  )
}

export default CarouselMultipleItemCode