personal-website/src/components/ShowcaseTabs.jsx

import { useTranslations } from "../i18n/utils";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "../components/ui/card";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "../components/ui/tabs";

export function ShowcaseTabs({ currentLocale }) {
  const t = useTranslations(currentLocale);
  const showcase = t("showcase");
  return (
    <Tabs
      defaultValue={showcase[0].value}
      className="bottom-0 flex flex-col h-full my-auto"
    >
      <TabsList className={`grid w-full mt-4 grid-cols-${showcase.length}`}>
        {showcase.map((item) => (
          <TabsTrigger value={item.value} key={item.value}>{item.handle}</TabsTrigger>
        ))}
      </TabsList>
      {showcase.map((item) => (
        <TabsContent value={item.value} className="h-full max-h-[92%]" key={item.value}>
          <Card className="h-[90%] my-auto">
            <CardHeader>
              <CardTitle>{item.title}</CardTitle>
              <CardDescription>
                <span className="text-pretty">{item.description}</span>
              </CardDescription>
            </CardHeader>
            <CardContent className="w-full max-h-[78%] lg:h-full">
              <div className="h-full w-full">
                <img
                  src={item.image}
                  alt={item.imageAlt}
                  className="object-fit h-full w-full rounded-lg"
                />
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      ))}
    </Tabs>
  );
}