2024-04-15 16:37:54 +02:00
|
|
|
import {
|
2024-05-14 16:42:19 +02:00
|
|
|
Card,
|
|
|
|
CardContent,
|
|
|
|
CardDescription,
|
|
|
|
CardHeader,
|
|
|
|
CardTitle,
|
|
|
|
} from "../components/ui/card";
|
2024-04-15 16:37:54 +02:00
|
|
|
import {
|
2024-05-14 16:42:19 +02:00
|
|
|
Tabs,
|
|
|
|
TabsContent,
|
|
|
|
TabsList,
|
|
|
|
TabsTrigger,
|
|
|
|
} from "../components/ui/tabs";
|
2024-04-15 16:37:54 +02:00
|
|
|
|
2024-05-28 12:21:34 +02:00
|
|
|
import { dictionary } from "../i18n/dictionary";
|
2024-04-15 16:37:54 +02:00
|
|
|
|
2024-05-28 12:21:34 +02:00
|
|
|
|
|
|
|
export function ShowcaseTabs({ currentLocale }) {
|
|
|
|
const { showcase } = dictionary[currentLocale];
|
2024-05-14 16:42:19 +02:00
|
|
|
return (
|
|
|
|
<Tabs
|
2024-05-28 12:21:34 +02:00
|
|
|
defaultValue={showcase[0].value}
|
2024-05-14 16:42:19 +02:00
|
|
|
className="bottom-0 flex flex-col h-full my-auto"
|
|
|
|
>
|
2024-05-28 12:21:34 +02:00
|
|
|
<TabsList className={`grid w-full mt-4 grid-cols-${showcase.length}`}>
|
|
|
|
{showcase.map((item) => (
|
2024-05-26 13:29:06 +02:00
|
|
|
<TabsTrigger value={item.value} key={item.value}>{item.handle}</TabsTrigger>
|
2024-05-14 16:42:19 +02:00
|
|
|
))}
|
|
|
|
</TabsList>
|
2024-05-28 12:21:34 +02:00
|
|
|
{showcase.map((item) => (
|
2024-05-26 13:29:06 +02:00
|
|
|
<TabsContent value={item.value} className="h-full" key={item.value}>
|
2024-05-14 16:42:19 +02:00
|
|
|
<Card className="h-[90%] my-auto">
|
|
|
|
<CardHeader>
|
|
|
|
<CardTitle>{item.title}</CardTitle>
|
2024-05-26 13:29:06 +02:00
|
|
|
<CardDescription>
|
|
|
|
<span className="text-pretty">{item.description}</span>
|
|
|
|
</CardDescription>
|
2024-05-14 16:42:19 +02:00
|
|
|
</CardHeader>
|
2024-05-26 13:29:06 +02:00
|
|
|
<CardContent className="h-[85%] w-full">
|
|
|
|
<div className="h-full w-full">
|
|
|
|
<img
|
|
|
|
src={item.image}
|
|
|
|
alt={item.imageAlt}
|
|
|
|
className="object-cover h-full w-full rounded-lg "
|
|
|
|
/>
|
|
|
|
</div>
|
2024-05-14 16:42:19 +02:00
|
|
|
</CardContent>
|
|
|
|
</Card>
|
|
|
|
</TabsContent>
|
|
|
|
))}
|
|
|
|
</Tabs>
|
|
|
|
);
|
2024-04-15 16:37:54 +02:00
|
|
|
}
|