PageTabs

import { PageTabs, Panel } from "density-base-ui";
import { X } from "lucide-react";

const items = [
  { id: "overview", label: "Overview" },
  { id: "roadmap", label: "Roadmap" },
  { id: "activity", label: "Activity" },
  { id: "disabled", label: "Archived", disabled: true },
];

export default function PageTabsExample() {
  return (
    <Panel>
      <style>{`
        .page-tabs-example-close {
          opacity: 0;
          transition: opacity 120ms ease;
        }

        [role="tab"]:hover .page-tabs-example-close,
        [role="tab"]:focus-visible .page-tabs-example-close {
          opacity: 1;
        }
      `}</style>
      <PageTabs
        aria-label="Project pages"
        activeId="overview"
        items={items}
        renderTab={(item, state) => (
          <span style={styles.tabContent}>
            <span style={styles.tabLabel}>{item.label}</span>
            {!state.disabled ? (
              <X
                aria-hidden="true"
                className="page-tabs-example-close"
                size={12}
                strokeWidth={1.75}
                style={styles.closeIcon}
              />
            ) : null}
          </span>
        )}
      />
      <section style={styles.page}>Overview</section>
    </Panel>
  );
}

const styles = {
  tabContent: {
    display: "inline-grid",
    gridTemplateColumns: "minmax(0, 1fr) auto",
    alignItems: "center",
    gap: "0.25rem",
    width: "100%",
    minWidth: 0,
  },
  tabLabel: {
    overflow: "hidden",
    textOverflow: "ellipsis",
    whiteSpace: "nowrap",
  },
  closeIcon: {
    marginInlineEnd: "-0.25rem",
  },
  page: {
    minHeight: "5rem",
    padding: "1rem",
  },
} as const;