ar-design
Version:
AR Design is a (react | nextjs) ui library.
30 lines (29 loc) • 1.46 kB
JavaScript
"use client";
import React, { useEffect, useState } from "react";
import "../../../assets/css/components/data-display/tabs/tabs.css";
const Tabs = ({ tabs = [], activeTab, onChange, onClose }) => {
// states
const [currentTab, setCurrentTab] = useState(0);
// useEffects
useEffect(() => {
setCurrentTab(activeTab ?? 0);
}, [activeTab]);
return (React.createElement("div", { className: "ar-tabs" },
React.createElement("div", { className: "tabs" }, tabs.length > 0 &&
tabs.map((tab, index) => {
let className = ["item"];
if (currentTab === index)
className.push("selection");
return (React.createElement("div", { key: tab.title ?? index, className: className.map((c) => c).join(" "), onClick: () => {
setCurrentTab(index);
onChange && onChange(index);
} },
React.createElement("span", null, tab.title),
tab.config?.canBeClosed && (React.createElement("span", { className: "close-button", onClick: (event) => {
event.stopPropagation();
onClose && onClose(index);
} }, "\u2716"))));
})),
React.createElement("div", { className: "content" }, tabs.map((tab, index) => currentTab === index && tab.content))));
};
export default Tabs;