Carousel

import { Card, CardContent } from "@/components/ui/card"
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"

const slides = [1, 2, 3, 4, 5]

export default function CarouselDemo() {
  return (
    <div className="mx-12 w-72">
      <Carousel orientation="horizontal">
        <CarouselContent>
          {slides.map((slide) => (
            <CarouselItem key={slide}>
              <Card>
                <CardContent className="flex aspect-square items-center justify-center">
                  <span className="text-4xl font-semibold">{slide}</span>
                </CardContent>
              </Card>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    </div>
  )
}

import { Card, CardContent } from "@/components/ui/card"
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"

const slides = [1, 2, 3, 4, 5]

export default function CarouselMultipleItems() {
  return (
    <div className="mx-12 w-72">
      <Carousel orientation="horizontal" opts={{ align: "start" }}>
        <CarouselContent>
          {slides.map((slide) => (
            <CarouselItem key={slide} className="basis-1/2">
              <Card size="sm">
                <CardContent className="flex aspect-square items-center justify-center">
                  <span className="text-3xl font-semibold">{slide}</span>
                </CardContent>
              </Card>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    </div>
  )
}

import { Card, CardContent } from "@/components/ui/card"
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"

const slides = [1, 2, 3, 4, 5]

export default function CarouselLoop() {
  return (
    <div className="mx-12 w-72">
      <Carousel orientation="horizontal" opts={{ loop: true }}>
        <CarouselContent>
          {slides.map((slide) => (
            <CarouselItem key={slide}>
              <Card>
                <CardContent className="flex aspect-square items-center justify-center">
                  <span className="text-4xl font-semibold">{slide}</span>
                </CardContent>
              </Card>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    </div>
  )
}

import { Card, CardContent } from "@/components/ui/card"
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"

const slides = [1, 2, 3, 4, 5]

export default function CarouselVertical() {
  return (
    <div className="mx-12 w-72">
      <div className="my-12">
        <Carousel orientation="vertical" opts={{ align: "start" }}>
          <CarouselContent className="h-64">
            {slides.map((slide) => (
              <CarouselItem key={slide} className="basis-1/2">
                <Card size="sm" className="h-full justify-center">
                  <CardContent className="flex items-center justify-center">
                    <span className="text-3xl font-semibold">{slide}</span>
                  </CardContent>
                </Card>
              </CarouselItem>
            ))}
          </CarouselContent>
          <CarouselPrevious />
          <CarouselNext />
        </Carousel>
      </div>
    </div>
  )
}

import {
  Carousel,
  CarouselContent,
  CarouselControls,
  CarouselDots,
  CarouselItem,
  CarouselPlayButton,
} from "@/components/ui/carousel"

const picks = [
  {
    eyebrow: "Today's pick",
    title: "Weekend breakfast",
    tint: "from-orange-500 to-red-500",
  },
  {
    eyebrow: "New",
    title: "Grilled meatballs",
    tint: "from-red-500 to-pink-500",
  },
  {
    eyebrow: "Chef's special",
    title: "Lentil soup",
    tint: "from-green-500 to-teal-500",
  },
  {
    eyebrow: "Dessert",
    title: "Künefe",
    tint: "from-purple-500 to-indigo-500",
  },
]

export default function CarouselFeatured() {
  return (
    <div className="w-[min(56rem,calc(100vw-2rem))]">
      <div className="max-w-sm">
        <Carousel orientation="horizontal" opts={{ align: "start" }}>
          <CarouselContent>
            {picks.map((pick) => (
              <CarouselItem key={pick.title} className="basis-[88%]">
                <div
                  className={`relative isolate flex aspect-4/5 flex-col gap-1 overflow-hidden rounded-3xl bg-linear-to-br p-5 text-white before:absolute before:inset-0 before:-z-10 before:bg-linear-to-b before:from-black/45 before:to-black/10 ${pick.tint}`}
                >
                  <p className="text-xs font-semibold uppercase">
                    {pick.eyebrow}
                  </p>
                  <p className="text-2xl font-bold tracking-tight">
                    {pick.title}
                  </p>
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
          <CarouselControls className="mt-4 justify-center">
            <CarouselDots variant="plain" />
            <CarouselPlayButton variant="ghost" />
          </CarouselControls>
        </Carousel>
      </div>
    </div>
  )
}

import { Button } from "@/components/ui/button"
import {
  Carousel,
  CarouselContent,
  CarouselControls,
  CarouselDots,
  CarouselItem,
  CarouselNext,
  CarouselPlayButton,
} from "@/components/ui/carousel"

const features = [
  {
    eyebrow: "Point of sale",
    title: "Take orders at the table.",
    tint: "from-blue-500 to-indigo-500",
  },
  {
    eyebrow: "Kitchen",
    title: "Every ticket, right on time.",
    tint: "from-orange-500 to-red-500",
  },
  {
    eyebrow: "Reservations",
    title: "A full room, every night.",
    tint: "from-green-500 to-teal-500",
  },
  {
    eyebrow: "Analytics",
    title: "Know what sells.",
    tint: "from-purple-500 to-pink-500",
  },
  {
    eyebrow: "Payments",
    title: "Split the bill in seconds.",
    tint: "from-cyan-500 to-blue-500",
  },
]

export default function CarouselSpotlight() {
  return (
    <div className="w-[min(56rem,calc(100vw-2rem))]">
      <div className="max-w-md">
        <Carousel orientation="horizontal" opts={{ loop: true }}>
          <CarouselContent>
            {features.slice(0, 3).map((feature) => (
              <CarouselItem key={feature.title}>
                <div className="flex aspect-10/7 flex-col items-center justify-center gap-3 rounded-3xl bg-muted p-8 text-center">
                  <p className="text-3xl font-bold tracking-tight">
                    Hestia POS
                  </p>
                  <p className="text-muted-foreground">{feature.title}</p>
                  <Button
                    size="sm"
                    className="mt-2 bg-foreground text-background hover:bg-foreground/85"
                  >
                    Learn more
                  </Button>
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
          <CarouselControls className="justify-center">
            <CarouselDots />
            <CarouselPlayButton />
            {<CarouselNext size="icon-sm" />}
          </CarouselControls>
        </Carousel>
      </div>
    </div>
  )
}

import { CaretRightIcon } from "@phosphor-icons/react"
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPlayButton,
} from "@/components/ui/carousel"

const popular = [
  {
    name: "Breakfast platter",
    price: "₺620",
    tint: "from-orange-500 to-red-500",
  },
  {
    name: "Grilled meatballs",
    price: "₺280",
    tint: "from-red-500 to-pink-500",
  },
  { name: "Menemen", price: "₺160", tint: "from-yellow-500 to-orange-500" },
  { name: "Lentil soup", price: "₺90", tint: "from-green-500 to-teal-500" },
  { name: "Künefe", price: "₺160", tint: "from-purple-500 to-indigo-500" },
]

export default function CarouselShelf() {
  return (
    <div className="w-[min(56rem,calc(100vw-2rem))]">
      <div className="max-w-md">
        <Carousel
          orientation="horizontal"
          opts={{ align: "start", dragFree: true }}
        >
          <div className="mb-3 flex items-center justify-between">
            <a
              href="#popular"
              className="flex items-center gap-1 text-xl font-bold tracking-tight"
            >
              Popular
              <CaretRightIcon className="size-4" />
            </a>
            <div className="flex items-center gap-3">
              <CarouselPlayButton variant="ghost" />
              <a href="#popular-all" className="text-primary">
                See all
              </a>
            </div>
          </div>
          <CarouselContent className="-ms-3">
            {popular.map((item) => (
              <CarouselItem key={item.name} className="basis-2/5 ps-3">
                <div
                  className={`aspect-square rounded-2xl bg-linear-to-br ${item.tint}`}
                />
                <p className="mt-2 truncate text-sm font-semibold">
                  {item.name}
                </p>
                <p className="text-xs text-muted-foreground tabular-nums">
                  {item.price}
                </p>
              </CarouselItem>
            ))}
          </CarouselContent>
        </Carousel>
      </div>
    </div>
  )
}

import {
  Carousel,
  CarouselContent,
  CarouselControls,
  CarouselDots,
  CarouselItem,
  CarouselNext,
  CarouselPlayButton,
  CarouselPrevious,
} from "@/components/ui/carousel"

const quotes = [
  { quote: "The checkout line is half as long.", author: "Ayşe Y. · Kadıköy" },
  {
    quote: "The kitchen finally keeps up on Fridays.",
    author: "Mert K. · Beşiktaş",
  },
  { quote: "Splitting the bill takes seconds now.", author: "Deniz A. · Moda" },
]

export default function CarouselTestimonials() {
  return (
    <div className="w-[min(56rem,calc(100vw-2rem))]">
      <div className="max-w-md rounded-3xl bg-muted p-8">
        <Carousel orientation="horizontal">
          <CarouselContent>
            {quotes.map((item) => (
              <CarouselItem key={item.quote}>
                <blockquote className="flex min-h-28 flex-col gap-3">
                  <p className="text-2xl font-bold tracking-tight">
                    “{item.quote}”
                  </p>
                  <footer className="text-muted-foreground">
                    {item.author}
                  </footer>
                </blockquote>
              </CarouselItem>
            ))}
          </CarouselContent>
          <CarouselControls className="justify-between">
            <div className="flex items-center gap-2">
              <CarouselPlayButton variant="ghost" />
              <CarouselDots variant="plain" />
            </div>
            <div className="flex gap-3">
              <CarouselPrevious size="icon-lg" />
              <CarouselNext size="icon-lg" />
            </div>
          </CarouselControls>
        </Carousel>
      </div>
    </div>
  )
}

import {
  Carousel,
  CarouselContent,
  CarouselControls,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"

const features = [
  {
    eyebrow: "Point of sale",
    title: "Take orders at the table.",
    tint: "from-blue-500 to-indigo-500",
  },
  {
    eyebrow: "Kitchen",
    title: "Every ticket, right on time.",
    tint: "from-orange-500 to-red-500",
  },
  {
    eyebrow: "Reservations",
    title: "A full room, every night.",
    tint: "from-green-500 to-teal-500",
  },
  {
    eyebrow: "Analytics",
    title: "Know what sells.",
    tint: "from-purple-500 to-pink-500",
  },
  {
    eyebrow: "Payments",
    title: "Split the bill in seconds.",
    tint: "from-cyan-500 to-blue-500",
  },
]

export default function CarouselGallery() {
  return (
    <div className="w-[min(56rem,calc(100vw-2rem))]">
      <Carousel orientation="horizontal" opts={{ align: "start" }}>
        <CarouselContent>
          {features.map((feature) => (
            <CarouselItem
              key={feature.title}
              className="basis-4/5 sm:basis-2/5"
            >
              <div
                className={`relative isolate flex aspect-3/4 flex-col gap-2 overflow-hidden rounded-3xl bg-linear-to-b p-7 text-white before:absolute before:inset-0 before:-z-10 before:bg-black/35 ${feature.tint}`}
              >
                <p className="text-sm font-semibold">{feature.eyebrow}</p>
                <p className="text-2xl font-semibold">{feature.title}</p>
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselControls className="justify-end">
          <CarouselPrevious />
          <CarouselNext />
        </CarouselControls>
      </Carousel>
    </div>
  )
}

import {
  Carousel,
  CarouselContent,
  CarouselControls,
  CarouselDots,
  CarouselItem,
  CarouselPlayButton,
} from "@/components/ui/carousel"

const picks = [
  {
    eyebrow: "Today's pick",
    title: "Weekend breakfast",
    tint: "from-orange-500 to-red-500",
  },
  {
    eyebrow: "New",
    title: "Grilled meatballs",
    tint: "from-red-500 to-pink-500",
  },
  {
    eyebrow: "Chef's special",
    title: "Lentil soup",
    tint: "from-green-500 to-teal-500",
  },
  {
    eyebrow: "Dessert",
    title: "Künefe",
    tint: "from-purple-500 to-indigo-500",
  },
]

export default function CarouselFeaturedAutoplay() {
  return (
    <div className="w-[min(56rem,calc(100vw-2rem))]">
      <div className="max-w-sm">
        <Carousel
          orientation="horizontal"
          opts={{ align: "start", loop: true }}
          autoplay={4000}
        >
          <CarouselContent>
            {picks.map((pick) => (
              <CarouselItem key={pick.title} className="basis-[88%]">
                <div
                  className={`relative isolate flex aspect-4/5 flex-col gap-1 overflow-hidden rounded-3xl bg-linear-to-br p-5 text-white before:absolute before:inset-0 before:-z-10 before:bg-linear-to-b before:from-black/45 before:to-black/10 ${pick.tint}`}
                >
                  <p className="text-xs font-semibold uppercase">
                    {pick.eyebrow}
                  </p>
                  <p className="text-2xl font-bold tracking-tight">
                    {pick.title}
                  </p>
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
          <CarouselControls className="mt-4 justify-center">
            <CarouselDots variant="plain" />
            <CarouselPlayButton variant="ghost" />
          </CarouselControls>
        </Carousel>
      </div>
    </div>
  )
}

import { Button } from "@/components/ui/button"
import {
  Carousel,
  CarouselContent,
  CarouselControls,
  CarouselDots,
  CarouselItem,
  CarouselNext,
  CarouselPlayButton,
} from "@/components/ui/carousel"

const features = [
  {
    eyebrow: "Point of sale",
    title: "Take orders at the table.",
    tint: "from-blue-500 to-indigo-500",
  },
  {
    eyebrow: "Kitchen",
    title: "Every ticket, right on time.",
    tint: "from-orange-500 to-red-500",
  },
  {
    eyebrow: "Reservations",
    title: "A full room, every night.",
    tint: "from-green-500 to-teal-500",
  },
  {
    eyebrow: "Analytics",
    title: "Know what sells.",
    tint: "from-purple-500 to-pink-500",
  },
  {
    eyebrow: "Payments",
    title: "Split the bill in seconds.",
    tint: "from-cyan-500 to-blue-500",
  },
]

export default function CarouselSpotlightAutoplay() {
  return (
    <div className="w-[min(56rem,calc(100vw-2rem))]">
      <div className="max-w-md">
        <Carousel orientation="horizontal" opts={{ loop: true }} autoplay>
          <CarouselContent>
            {features.slice(0, 3).map((feature) => (
              <CarouselItem key={feature.title}>
                <div className="flex aspect-10/7 flex-col items-center justify-center gap-3 rounded-3xl bg-muted p-8 text-center">
                  <p className="text-3xl font-bold tracking-tight">
                    Hestia POS
                  </p>
                  <p className="text-muted-foreground">{feature.title}</p>
                  <Button
                    size="sm"
                    className="mt-2 bg-foreground text-background hover:bg-foreground/85"
                  >
                    Learn more
                  </Button>
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
          <CarouselControls className="justify-center">
            <CarouselDots />
            <CarouselPlayButton />
            {!true && <CarouselNext size="icon-sm" />}
          </CarouselControls>
        </Carousel>
      </div>
    </div>
  )
}

import { CaretRightIcon } from "@phosphor-icons/react"
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPlayButton,
} from "@/components/ui/carousel"

const popular = [
  {
    name: "Breakfast platter",
    price: "₺620",
    tint: "from-orange-500 to-red-500",
  },
  {
    name: "Grilled meatballs",
    price: "₺280",
    tint: "from-red-500 to-pink-500",
  },
  { name: "Menemen", price: "₺160", tint: "from-yellow-500 to-orange-500" },
  { name: "Lentil soup", price: "₺90", tint: "from-green-500 to-teal-500" },
  { name: "Künefe", price: "₺160", tint: "from-purple-500 to-indigo-500" },
]

export default function CarouselShelfAutoplay() {
  return (
    <div className="w-[min(56rem,calc(100vw-2rem))]">
      <div className="max-w-md">
        <Carousel
          orientation="horizontal"
          autoplay={3000}
          opts={{ align: "start", loop: true }}
        >
          <div className="mb-3 flex items-center justify-between">
            <a
              href="#popular"
              className="flex items-center gap-1 text-xl font-bold tracking-tight"
            >
              Popular
              <CaretRightIcon className="size-4" />
            </a>
            <div className="flex items-center gap-3">
              <CarouselPlayButton variant="ghost" />
              <a href="#popular-all" className="text-primary">
                See all
              </a>
            </div>
          </div>
          <CarouselContent className="-ms-3">
            {popular.map((item) => (
              <CarouselItem key={item.name} className="basis-2/5 ps-3">
                <div
                  className={`aspect-square rounded-2xl bg-linear-to-br ${item.tint}`}
                />
                <p className="mt-2 truncate text-sm font-semibold">
                  {item.name}
                </p>
                <p className="text-xs text-muted-foreground tabular-nums">
                  {item.price}
                </p>
              </CarouselItem>
            ))}
          </CarouselContent>
        </Carousel>
      </div>
    </div>
  )
}

import {
  Carousel,
  CarouselContent,
  CarouselControls,
  CarouselDots,
  CarouselItem,
  CarouselNext,
  CarouselPlayButton,
  CarouselPrevious,
} from "@/components/ui/carousel"

const quotes = [
  { quote: "The checkout line is half as long.", author: "Ayşe Y. · Kadıköy" },
  {
    quote: "The kitchen finally keeps up on Fridays.",
    author: "Mert K. · Beşiktaş",
  },
  { quote: "Splitting the bill takes seconds now.", author: "Deniz A. · Moda" },
]

export default function CarouselTestimonialsAutoplay() {
  return (
    <div className="w-[min(56rem,calc(100vw-2rem))]">
      <div className="max-w-md rounded-3xl bg-muted p-8">
        <Carousel
          orientation="horizontal"
          autoplay={6000}
          opts={{ loop: true }}
        >
          <CarouselContent>
            {quotes.map((item) => (
              <CarouselItem key={item.quote}>
                <blockquote className="flex min-h-28 flex-col gap-3">
                  <p className="text-2xl font-bold tracking-tight">
                    “{item.quote}”
                  </p>
                  <footer className="text-muted-foreground">
                    {item.author}
                  </footer>
                </blockquote>
              </CarouselItem>
            ))}
          </CarouselContent>
          <CarouselControls className="justify-between">
            <div className="flex items-center gap-2">
              <CarouselPlayButton variant="ghost" />
              <CarouselDots variant="plain" />
            </div>
            <div className="flex gap-3">
              <CarouselPrevious size="icon-lg" />
              <CarouselNext size="icon-lg" />
            </div>
          </CarouselControls>
        </Carousel>
      </div>
    </div>
  )
}