94 lines
3.3 KiB
React
94 lines
3.3 KiB
React
|
import { Button } from "../components/ui/button"
|
||
|
|
import {
|
||
|
|
Card,
|
||
|
|
CardContent,
|
||
|
|
CardDescription,
|
||
|
|
CardFooter,
|
||
|
|
CardHeader,
|
||
|
|
CardTitle,
|
||
|
|
} from "../components/ui/card"
|
||
|
|
import {
|
||
|
|
Tabs,
|
||
|
|
TabsContent,
|
||
|
|
TabsList,
|
||
|
|
TabsTrigger,
|
||
|
|
} from "../components/ui/tabs"
|
||
|
|
import {
|
||
|
|
Carousel,
|
||
|
|
CarouselContent,
|
||
|
|
CarouselItem,
|
||
|
|
CarouselNext,
|
||
|
|
CarouselPrevious,
|
||
|
|
} from "../components/ui/carousel"
|
||
|
|
|
||
|
|
const data = [{
|
||
|
|
value: "thisPage",
|
||
|
|
handle: "1",
|
||
|
|
title: "This Page",
|
||
|
|
description: "random text",
|
||
|
|
images: [{ src: "temp.jpg", alt: "text" }, { src: "temp.jpg", alt: "text2" }]
|
||
|
|
}, {
|
||
|
|
value: "thatPage",
|
||
|
|
title: "That Page",
|
||
|
|
handle: "2",
|
||
|
|
description: "random text",
|
||
|
|
images: [{ src: "temp.jpg", alt: "text" }, { src: "temp.jpg", alt: "text2" }]
|
||
|
|
}, {
|
||
|
|
value: "otherPge",
|
||
|
|
title: "Other Page",
|
||
|
|
handle: "3",
|
||
|
|
description: "random text",
|
||
|
|
images: [{ src: "temp.jpg", alt: "text" }, { src: "temp.jpg", alt: "text2" }]
|
||
|
|
}];
|
||
|
|
|
||
|
|
export function ShowcaseTabs() {
|
||
|
|
return (
|
||
|
|
<Tabs defaultValue={data[0].value} className="h-full">
|
||
|
|
|
||
|
|
{data.map((item) => (
|
||
|
|
<TabsContent value={item.value} className="">
|
||
|
|
<Card className="h-full">
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle>{item.title}</CardTitle>
|
||
|
|
<CardDescription>
|
||
|
|
{item.description}
|
||
|
|
</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<Carousel className="w-full h-full" opts={{ align: "start", loop: "true" }}>
|
||
|
|
<CarouselContent>
|
||
|
|
{item.images.map((image, index) => (
|
||
|
|
<CarouselItem key={index}>
|
||
|
|
<Card>
|
||
|
|
<CardContent className="flex aspect-square items-center justify-center p-6">
|
||
|
|
<img src={image.src} alt={image.alt} />
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</CarouselItem>
|
||
|
|
))}
|
||
|
|
</CarouselContent>
|
||
|
|
<div className="w-full pt-10 grid grid-cols-2 gap-4 ">
|
||
|
|
<div className="col-start-1 flex text-center justify-center w-full h-full">
|
||
|
|
<CarouselPrevious />
|
||
|
|
</div>
|
||
|
|
<div className="col-start-2 flex justify-center">
|
||
|
|
<CarouselNext />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Carousel>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</TabsContent>
|
||
|
|
))
|
||
|
|
}
|
||
|
|
|
||
|
|
<TabsList className={`grid w-full mt-4 grid-cols-${data.length}`}>
|
||
|
|
{data.map((item) => (
|
||
|
|
<TabsTrigger value={item.value}>{item.handle}</TabsTrigger>
|
||
|
|
))}
|
||
|
|
</TabsList>
|
||
|
|
|
||
|
|
</Tabs>
|
||
|
|
)
|
||
|
|
}
|