@sikka/hawa/dist/appTabs/index.mjs

Modern UI Kit made with Tailwind

"use client";

// layout/appTabs/AppTabs.tsx
import React, { useState } from "react";

// util/index.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
  return twMerge(clsx(inputs));
}

// layout/appTabs/AppTabs.tsx
var AppTabs = ({ tabs, className }) => {
  const [selectedIndex, setSelectedIndex] = useState(0);
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: cn(
        "hawa-w-full hawa-border-b hawa-bg-card hawa-p-6 hawa-pb-0",
        className
      )
    },
    /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-center" }, tabs.map((tab, index) => {
      const selected = index === selectedIndex;
      return /* @__PURE__ */ React.createElement(
        "a",
        {
          href: tab.path,
          key: index,
          onMouseDown: (e) => {
            if (tab.onMouseDown) {
              tab.onMouseDown(e);
            }
          },
          onClick: (e) => {
            if (tab.onClick) {
              tab.onClick(e);
            }
            setSelectedIndex(index);
          },
          className: cn(
            "hawa-z-10 hawa-flex hawa-items-center hawa-translate-y-[1.1px] hawa-select-none hawa-flex-row hawa-gap-2 hawa-rounded-t hawa-p-4 hawa-py-2 hawa-text-sm hawa-transition-all",
            "hawa-border",
            // Always have a border but make it transparent
            selected ? "hawa-border hawa-border-b-transparent hawa-bg-background" : "hawa-cursor-pointer hawa-border-transparent hover:hawa-bg-card-foreground/5"
          )
        },
        tab.icon && tab.icon,
        tab.label
      );
    }))
  );
};
export {
  AppTabs
};
//# sourceMappingURL=index.mjs.map