タブ

'use client'

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

export default function Component() {
const tabsData = [
{
value: "tab1",
title: "タブ1",
content: {
title: "タブ1のコンテンツ",
description: "これはタブ1の内容です。自由にカスタマイズしてください。",
},
},
{
value: "tab2",
title: "タブ2",
content: {
title: "タブ2のコンテンツ",
description: "タブ2の内容がここに表示されます。",
},
},
{
value: "tab3",
title: "タブ3",
content: {
title: "タブ3のコンテンツ",
description: "タブ3の内容です。必要に応じて変更してください。",
},
},
]

return (
<div className="w-full max-w-4xl mx-auto p-4 h-[500px]">
<Tabs defaultValue="tab1" orientation="vertical" className="flex h-full">
<TabsList className="h-full flex-col justify-start w-[80px] space-y-2 rounded-r-none bg-muted/50 p-2">
{tabsData.map((tab) => (
<TabsTrigger key={tab.value} value={tab.value} className="relative w-full text-left justify-start px-2 py-4 h-[120px] data-[state=active]:bg-background data-[state=active]:text-foreground">
<div className="-rotate-90 transform origin-center absolute inset-0 flex items-center justify-center">
{tab.title}
</div>
</TabsTrigger>
))}
</TabsList>
<div className="flex-grow">
{tabsData.map((tab) => (
<TabsContent key={tab.value} value={tab.value} className="mt-0 border-0">
<Card className="border-0 shadow-none">
<CardHeader className="pb-2">
<CardTitle>{tab.content.title}</CardTitle>
<CardDescription>{tab.content.description}</CardDescription>
</CardHeader>
<CardContent>
<p>ここに追加のコンテンツを入れることができます。</p>
</CardContent>
</Card>
</TabsContent>
))}
</div>
</Tabs>
</div>
)
}