Tabs

1'use client'
2
3import * as React from 'react'
4
5import {
6    Tabs,
7    TabsContent,
8    TabsList,
9    TabsTrigger,
10} from '@/components/ui/tabs'
11
12export function TabsDemo() {
13    return (
14        <Tabs defaultValue="details" className="sm:w-80">
15            <TabsList className="w-full grid-cols-3 gap-2 sm:grid">
16                <TabsTrigger value="details">Details</TabsTrigger>
17                <TabsTrigger value="reviews">Reviews</TabsTrigger>
18                <TabsTrigger value="faq">FAQ</TabsTrigger>
19            </TabsList>
20
21            <TabsContent
22                value="details"
23                className="shadow-3xl min-h-28 space-y-3 rounded-xl bg-gray-100 p-4"
24            >
25                <h3 className="text-primary text-lg/5 font-semibold">
26                    Product Details
27                </h3>
28                <p className="text-sm">
29                    This product is made from 100% organic materials and offers
30                    unmatched comfort.
31                </p>
32            </TabsContent>
33
34            <TabsContent
35                value="reviews"
36                className="shadow-3xl min-h-28 space-y-3 rounded-xl bg-gray-100 p-4"
37            >
38                <h3 className="text-primary text-lg/5 font-semibold">
39                    Customer Reviews
40                </h3>
41                <p className="text-sm">⭐ 4.7 out of 5 based on 230 reviews</p>
42            </TabsContent>
43
44            <TabsContent
45                value="faq"
46                className="shadow-3xl min-h-28 space-y-3 rounded-xl bg-gray-100 p-4"
47            >
48                <h3 className="text-primary text-lg/5 font-semibold">
49                    Frequently Asked Questions
50                </h3>
51                <ul className="list-disc pl-5 text-sm">
52                    <li>Is this product machine washable?</li>
53                    <li>Do you ship internationally?</li>
54                </ul>
55            </TabsContent>
56        </Tabs>
57    )
58}
59