personal-website/src/components/ShowcaseTabs.jsx

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

const data = [
  {
    value: "thisPage",
    handle: "Projekt 1",
    title: "This Page",
    description: "random text",
    images: [
      { src: "temp.jpg", alt: "text" },
      { src: "temp.jpg", alt: "text2" },
    ],
  },
  {
    value: "thatPage",
    title: "That Page",
    handle: "Projekt 2",
    description: "random text",
    images: [
      { src: "temp.jpg", alt: "text" },
      { src: "temp.jpg", alt: "text2" },
    ],
  },
  {
    value: "otherPge",
    title: "Other Page",
    handle: "Projekt 3",
    description: "random text",
    images: [
      { src: "temp.jpg", alt: "text" },
      { src: "temp.jpg", alt: "text2" },
    ],
  },
];

export function ShowcaseTabs() {
  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>
  );
}