blboun3/personal-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

sync

Browse Source
This commit is contained in:
Blboun3
2024-05-14 16:42:19 +02:00
parent 0befb1f4f1
commit a8ec23e1e8
2 changed files with 60 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
src/components/ShowcaseTabs.jsx
View File

@@ -1,93 +1,75 @@
import { Button } from "../components/ui/button"
import { Button } from "../components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "../components/ui/card"
Card,
CardContent,
CardDescription,
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"
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "../components/ui/tabs";
const data = [{
const data = [
{
value: "thisPage",
handle: "1",
handle: "Projekt 1",
title: "This Page",
description: "random text",
images: [{ src: "temp.jpg", alt: "text" }, { src: "temp.jpg", alt: "text2" }]
}, {
images: [
{ src: "temp.jpg", alt: "text" },
{ src: "temp.jpg", alt: "text2" },
],
},
{
value: "thatPage",
title: "That Page",
handle: "2",
handle: "Projekt 2",
description: "random text",
images: [{ src: "temp.jpg", alt: "text" }, { src: "temp.jpg", alt: "text2" }]
}, {
images: [
{ src: "temp.jpg", alt: "text" },
{ src: "temp.jpg", alt: "text2" },
],
},
{
value: "otherPge",
title: "Other Page",
handle: "3",
handle: "Projekt 3",
description: "random text",
images: [{ src: "temp.jpg", alt: "text" }, { src: "temp.jpg", alt: "text2" }]
}];
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>
)
return (
<Tabs
defaultValue={data[0].value}
className="bottom-0 flex flex-col h-full my-auto"
>
<TabsList className={`grid w-full mt-4 grid-cols-${data.length}`}>
{data.map((item) => (
<TabsTrigger value={item.value}>{item.handle}</TabsTrigger>
))}
</TabsList>
{data.map((item) => (
<TabsContent value={item.value} className="h-full">
<Card className="h-[90%] my-auto">
<CardHeader>
<CardTitle>{item.title}</CardTitle>
<CardDescription>{item.description}</CardDescription>
</CardHeader>
<CardContent>
<img src="/temp.jpg" alt="" />
</CardContent>
</Card>
</TabsContent>
))}
</Tabs>
);
}