@mikeheinrich/adobe-xd-design-system
Version:
Adobe XD-based design system with React components and Tailwind CSS
17 lines (16 loc) • 1.06 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState } from "react";
import { Button } from "./button";
import { cn } from "../lib/utils";
const ButtonGroup = React.forwardRef(({ className, items, defaultActiveId, onTabChange, ...props }, ref) => {
const [activeId, setActiveId] = useState(defaultActiveId || (items.length > 0 ? items[0].id : ""));
const handleTabClick = (id) => {
setActiveId(id);
if (onTabChange) {
onTabChange(id);
}
};
return (_jsx("div", { className: cn("btn-group inline-flex", className), ref: ref, ...props, children: items.map((item) => (_jsxs(Button, { type: "button", variant: activeId === item.id ? "button-group-active" : "button-group", onClick: () => handleTabClick(item.id), className: `px-4 ${activeId === item.id ? "border-t-[#d6002a] border-t-2" : ""}`, children: [item.icon && _jsx("span", { className: "mr-2", children: item.icon }), item.label] }, item.id))) }));
});
ButtonGroup.displayName = "ButtonGroup";
export { ButtonGroup };