1// page.tsx
2
3import { Tabs } from "./Tabs";
4
5const Page = () => {
6  const tabItems = [
7    {
8      id: "tab1",
9      label: "Tab 1",
10      content: (
11        <>
12          <h3 className="border-b text-xl font-bold">Tab 01</h3>
13          <p className="pt-2 text-slate-500 dark:text-slate-400">
14            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore,
15            aut.
16          </p>
17          <p className="text-slate-500 dark:text-slate-400">
18            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eveniet
19            culpa ut vitae repudiandae rem facere.
20          </p>
21        </>
22      ),
23    },
24    {
25      id: "tab2",
26      label: "Tab 2",
27      content: (
28        <>
29          <h3 className="border-b text-xl font-bold">Tab 02</h3>
30          <p className="pt-2 text-slate-500 dark:text-slate-400">
31            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore,
32            aut.
33          </p>
34          <p className="text-slate-500 dark:text-slate-400">
35            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eveniet
36            culpa ut vitae repudiandae rem facere.
37          </p>
38        </>
39      ),
40    },
41    {
42      id: "tab3",
43      label: "Tab 3",
44      content: (
45        <>
46          <h3 className="border-b text-xl font-bold">Tab 03</h3>
47          <p className="pt-2 text-slate-500 dark:text-slate-400">
48            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore,
49            aut.
50          </p>
51          <p className="text-slate-500 dark:text-slate-400">
52            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eveniet
53            culpa ut vitae repudiandae rem facere.
54          </p>
55        </>
56      ),
57    },
58  ];
59
60  return (
61    <>
62      <Tabs tabs={tabItems} defaultValue="tab1" className="w-[320px]" />
63    </>
64  );
65};
66export default Page;