sync
This commit is contained in:
parent
0befb1f4f1
commit
a8ec23e1e8
BIN
public/temp.jpg
BIN
public/temp.jpg
Binary file not shown.
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 22 KiB |
@ -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"
|
||||
} from "../components/ui/card";
|
||||
import {
|
||||
Tabs,
|
||||
TabsContent,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from "../components/ui/tabs"
|
||||
import {
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
CarouselNext,
|
||||
CarouselPrevious,
|
||||
} from "../components/ui/carousel"
|
||||
} 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>
|
||||
))}
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
{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>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user