Most simple components created

lib/component/tab/MattrixwvTabGroup.tsx

@@ -0,0 +1,48 @@
+import type { MattrixwvTabGroupProps } from "$/types/Tab";
+import { TabGroup } from "@headlessui/react";
+import clsx from "clsx";
+import MattrixwvTab from "./MattrixwvTab";
+import MattrixwvTabList from "./MattrixwvTabList";
+import MattrixwvTabPanel from "./MattrixwvTabPanel";
+import MattrixwvTabPanels from "./MattrixwvTabPanels";
+
+
+export default function MattrixwvTabGroup(props: MattrixwvTabGroupProps){
+	const {
+		tabs,
+		className
+	} = props;
+
+
+	return (
+		<TabGroup
+			className={clsx(
+				"flex flex-col items-center justify-center w-full h-full overflow-hidden",
+				className
+			)}
+		>
+			<MattrixwvTabList>
+				{
+					tabs.map((tab, index) => (
+						<MattrixwvTab
+							key={index}
+						>
+							{tab.tab}
+						</MattrixwvTab>
+					))
+				}
+			</MattrixwvTabList>
+			<MattrixwvTabPanels>
+				{
+					tabs.map((tab, index) => (
+						<MattrixwvTabPanel
+							key={index}
+						>
+							{tab.content}
+						</MattrixwvTabPanel>
+					))
+				}
+			</MattrixwvTabPanels>
+		</TabGroup>
+	);
+}