personal-website/src/components/ShowcaseTabs.jsx

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-[87%] bottom-0 flex flex-col">
            <div className="my-auto">
                <div>
                    {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>
                </div>
            </div>
        </Tabs>
    )
}