Dashboard/ui/components/Tabs/Tabs.tsx

"use client";
/*
 * Documentation:
 * Tabs — https://app.subframe.com/f023064a5ca0/library?component=Tabs_e1ad5091-8ad8-4319-b1f7-3e47f0256c20
 */

import React from "react";
import * as SubframeCore from "@subframe/core";
import * as SubframeUtils from "../../utils";

export interface TabBottomProps extends React.HTMLAttributes<HTMLDivElement> {
  disabled?: boolean;
  active?: boolean;
  icon?: React.ReactNode;
  children?: React.ReactNode;
  className?: string;
}

const TabBottom = React.forwardRef<HTMLDivElement, TabBottomProps>(
  function TabBottom(
    {
      disabled = false,
      active = false,
      icon = null,
      children,
      className,
      ...otherProps
    }: TabBottomProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "group/d5612535 flex w-full cursor-pointer items-center justify-center gap-2 rounded-t-md border-b-2 border-solid border-border-default bg-surface-neutral-secondary px-4 py-2.5 hover:border-b-2 hover:border-x-0 hover:border-t-0 hover:border-solid hover:border-brand-brand-border-solid-default hover:bg-surface-neutral-primary active:border-b-2 active:border-x-0 active:border-t-0 active:border-solid active:border-border-default active:bg-surface-neutral-secondary focus-within:shadow-focus",
          {
            "border-b-2 border-x-0 border-t-0 border-solid border-brand-brand-border-solid-default bg-surface-feedback-subtle-information":
              active,
            "hover:border-b hover:border-x-0 hover:border-t-0 hover:border-solid hover:border-border-disabled hover:bg-surface-neutral-disabled active:bg-surface-neutral-disabled focus-within:shadow-none":
              disabled,
          },
          className
        )}
        ref={ref}
        {...otherProps}
      >
        {icon ? (
          <SubframeCore.IconWrapper
            className={SubframeUtils.twClassNames(
              "text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-tertiary group-hover/d5612535:text-text-neutral-primary",
              {
                "text-text-neutral-primary": active,
                "text-text-neutral-disabled group-hover/d5612535:text-text-neutral-disabled":
                  disabled,
              }
            )}
          >
            {icon}
          </SubframeCore.IconWrapper>
        ) : null}
        {children ? (
          <span
            className={SubframeUtils.twClassNames(
              "text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-secondary group-hover/d5612535:text-text-neutral-primary",
              {
                "text-body-small-medium-0 font-body-small-medium-0": active,
                "text-text-neutral-disabled group-hover/d5612535:text-text-neutral-disabled":
                  disabled,
              }
            )}
          >
            {children}
          </span>
        ) : null}
      </div>
    );
  }
);

export interface TabTopProps extends React.HTMLAttributes<HTMLDivElement> {
  disabled?: boolean;
  active?: boolean;
  icon?: React.ReactNode;
  children?: React.ReactNode;
  className?: string;
}

const TabTop = React.forwardRef<HTMLDivElement, TabTopProps>(function TabTop(
  {
    disabled = false,
    active = false,
    icon = null,
    children,
    className,
    ...otherProps
  }: TabTopProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "group/0bd8ab70 flex w-full cursor-pointer items-center justify-center gap-2 rounded-b-md border-t-2 border-solid border-border-default bg-surface-neutral-secondary px-4 py-2.5 hover:border-t-2 hover:border-x-0 hover:border-b-0 hover:border-solid hover:border-brand-brand-border-solid-default hover:bg-surface-neutral-primary active:border-t-2 active:border-x-0 active:border-b-0 active:border-solid active:border-border-default active:bg-surface-neutral-secondary focus-within:shadow-focus",
        {
          "border-t-2 border-x-0 border-b-0 border-solid border-brand-brand-border-solid-default bg-surface-feedback-subtle-information":
            active,
          "hover:border-t hover:border-x-0 hover:border-b-0 hover:border-solid hover:border-border-disabled hover:bg-surface-neutral-disabled active:bg-surface-neutral-disabled focus-within:shadow-none":
            disabled,
        },
        className
      )}
      ref={ref}
      {...otherProps}
    >
      {icon ? (
        <SubframeCore.IconWrapper
          className={SubframeUtils.twClassNames(
            "text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-tertiary group-hover/0bd8ab70:text-text-neutral-primary",
            {
              "text-text-neutral-primary": active,
              "text-text-neutral-disabled group-hover/0bd8ab70:text-text-neutral-disabled":
                disabled,
            }
          )}
        >
          {icon}
        </SubframeCore.IconWrapper>
      ) : null}
      {children ? (
        <span
          className={SubframeUtils.twClassNames(
            "text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-secondary group-hover/0bd8ab70:text-text-neutral-primary",
            {
              "text-body-small-medium-0 font-body-small-medium-0": active,
              "text-text-neutral-disabled group-hover/0bd8ab70:text-text-neutral-disabled":
                disabled,
            }
          )}
        >
          {children}
        </span>
      ) : null}
    </div>
  );
});

export interface TabsRootProps extends React.HTMLAttributes<HTMLDivElement> {
  children?: React.ReactNode;
  className?: string;
}

const TabsRoot = React.forwardRef<HTMLDivElement, TabsRootProps>(
  function TabsRoot(
    { children, className, ...otherProps }: TabsRootProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "flex w-full items-center gap-2",
          className
        )}
        ref={ref}
        {...otherProps}
      >
        <div className="flex grow shrink-0 basis-0 items-start">
          {children ? (
            <div className="flex grow shrink-0 basis-0 items-start">
              {children}
            </div>
          ) : null}
        </div>
      </div>
    );
  }
);

export const Tabs = Object.assign(TabsRoot, {
  TabBottom,
  TabTop,
});