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
No known key found for this signature in database
2 changed files with 60 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/temp.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 22 KiB

138
src/components/ShowcaseTabs.jsx
View File

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