Most simple components created

lib/component/tab/MattrixwvTab.tsx

@@ -0,0 +1,23 @@
+import type { MattrixwvTabProps } from "$/types/Tab";
+import { Tab } from "@headlessui/react";
+import clsx from "clsx";
+
+
+export default function MattrixwvTab(props: MattrixwvTabProps){
+	const {
+		children
+	} = props;
+
+
+	return (
+		<Tab
+			className={clsx(
+				"px-4 py-2",
+				"outline-none rounded-t-lg cursor-pointer",
+				"data-selected:text-blue-400 data-selected:border-b-4"
+			)}
+		>
+			{children}
+		</Tab>
+	);
+}

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>
+	);
+}

lib/component/tab/MattrixwvTabList.tsx

@@ -0,0 +1,18 @@
+import type { MattrixwvTabListProps } from "$/types/Tab";
+import { TabList } from "@headlessui/react";
+
+
+export default function MattrixwvTabList(props: MattrixwvTabListProps){
+	const {
+		children
+	} = props;
+
+
+	return (
+		<TabList
+			className="flex flex-row items-center justify-start w-full border-b"
+		>
+			{children}
+		</TabList>
+	);
+}

lib/component/tab/MattrixwvTabPanel.tsx

@@ -0,0 +1,18 @@
+import type { MattrixwvTabPanelProps } from "$/types/Tab";
+import { TabPanel } from "@headlessui/react";
+
+
+export default function MattrixwvTabPanel(props: MattrixwvTabPanelProps){
+	const {
+		children
+	} = props;
+
+
+	return (
+		<TabPanel
+			className="flex flex-row items-start justify-center w-full h-full"
+		>
+			{children}
+		</TabPanel>
+	);
+}

lib/component/tab/MattrixwvTabPanels.tsx

@@ -0,0 +1,18 @@
+import type { MattrixwvTabPanelsProps } from "$/types/Tab";
+import { TabPanels } from "@headlessui/react";
+
+
+export default function MattrixwvTabPanels(props: MattrixwvTabPanelsProps){
+	const {
+		children
+	} = props;
+
+
+	return (
+		<TabPanels
+			className="flex flex-row items-start justify-center w-full h-full overflow-scroll"
+		>
+			{children}
+		</TabPanels>
+	);
+}