loading-carousel

1"use client"
2 
3import React from "react"
4 
5import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
6 
7import { LoadingCarousel } from "../ui/loading-carousel"
8 
9export function LoadingCarouselDemo() {
10  return (
11    <div className="space-y-8 p-4 w-full">
12      <div className="w-full">
13        <CardHeader>
14          <CardTitle>Default LoadingCarousel</CardTitle>
15        </CardHeader>
16        <CardContent>
17          <LoadingCarousel />
18        </CardContent>
19      </div>
20 
21      <div className="w-full">
22        <CardHeader>
23          <CardTitle>Wide Aspect Ratio with Top Text</CardTitle>
24        </CardHeader>
25        <CardContent>
26          <LoadingCarousel
27            aspectRatio="wide"
28            textPosition="top"
29            showIndicators={false}
30          />
31        </CardContent>
32      </div>
33 
34      <div className="w-full">
35        <CardHeader>
36          <CardTitle>Background Tips + Gradient</CardTitle>
37        </CardHeader>
38        <CardContent>
39          <LoadingCarousel
40            aspectRatio="wide"
41            backgroundTips={true}
42            backgroundGradient={true}
43          />
44        </CardContent>
45      </div>
46 
47      <div className="w-full">
48        <CardHeader>
49          <CardTitle>Custom Interval and Navigation</CardTitle>
50        </CardHeader>
51        <CardContent>
52          <LoadingCarousel autoplayInterval={2000} showNavigation={true} />
53        </CardContent>
54      </div>
55 
56      <div className="w-full">
57        <CardHeader>
58          <CardTitle>Shuffled Tips with Custom Interval</CardTitle>
59        </CardHeader>
60        <CardContent>
61          <LoadingCarousel
62            shuffleTips={true}
63            autoplayInterval={3000}
64            showProgress={false}
65          />
66        </CardContent>
67      </div>
68 
69      <div className="w-full">
70        <CardHeader>
71          <CardTitle>Square Aspect Ratio with Background Tips</CardTitle>
72        </CardHeader>
73        <CardContent>
74          <LoadingCarousel
75            aspectRatio="square"
76            backgroundTips={true}
77            backgroundGradient={true}
78          />
79        </CardContent>
80      </div>
81    </div>
82  )
83}