Dashboard/ui/components/SettingsPage/SettingsPage.tsx

"use client";
/*
 * Documentation:
 * Settings Page — https://app.subframe.com/f023064a5ca0/library?component=Settings+Page_53f07300-26e0-4199-9638-0ee2178f4587
 */

import React from "react";
import * as SubframeUtils from "../../utils";

export interface SettingRowProps extends React.HTMLAttributes<HTMLDivElement> {
  label?: React.ReactNode;
  helpText?: React.ReactNode;
  select?: React.ReactNode;
  className?: string;
}

const SettingRow = React.forwardRef<HTMLDivElement, SettingRowProps>(
  function SettingRow(
    { label, helpText, select, className, ...otherProps }: SettingRowProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "flex w-full items-center gap-4",
          className
        )}
        ref={ref}
        {...otherProps}
      >
        <div className="flex flex-col items-start gap-1">
          {label ? (
            <span className="text-body-default-medium-0 font-body-default-medium-0 text-text-neutral-primary">
              {label}
            </span>
          ) : null}
          {helpText ? (
            <span className="w-full text-body-extra-small-regular-150 font-body-extra-small-regular-150 text-text-neutral-tertiary">
              {helpText}
            </span>
          ) : null}
        </div>
        {select ? (
          <div className="flex grow shrink-0 basis-0 items-center justify-end">
            {select}
          </div>
        ) : null}
      </div>
    );
  }
);

export interface SwitchSettingProps
  extends React.HTMLAttributes<HTMLDivElement> {
  label?: React.ReactNode;
  description?: React.ReactNode;
  _switch?: React.ReactNode;
  className?: string;
}

const SwitchSetting = React.forwardRef<HTMLDivElement, SwitchSettingProps>(
  function SwitchSetting(
    {
      label,
      description,
      _switch,
      className,
      ...otherProps
    }: SwitchSettingProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "flex w-full items-center justify-center gap-4",
          className
        )}
        ref={ref}
        {...otherProps}
      >
        <div className="flex flex-col items-start gap-1">
          {label ? (
            <span className="text-body-default-medium-0 font-body-default-medium-0 text-text-neutral-primary">
              {label}
            </span>
          ) : null}
          <div className="flex w-full items-center gap-2">
            {description ? (
              <span className="grow shrink-0 basis-0 text-body-extra-small-medium-150 font-body-extra-small-medium-150 text-text-neutral-tertiary">
                {description}
              </span>
            ) : null}
          </div>
        </div>
        <div className="flex grow shrink-0 basis-0 items-center justify-end gap-2">
          {_switch ? (
            <div className="flex items-center gap-2">{_switch}</div>
          ) : null}
        </div>
      </div>
    );
  }
);

export interface SectionHeaderProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
  title?: React.ReactNode;
  description?: React.ReactNode;
  className?: string;
}

const SectionHeader = React.forwardRef<HTMLDivElement, SectionHeaderProps>(
  function SectionHeader(
    { title, description, className, ...otherProps }: SectionHeaderProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "flex w-full flex-col items-start gap-1",
          className
        )}
        ref={ref}
        {...otherProps}
      >
        {title ? (
          <span className="text-heading- font-heading- text-text-neutral-primary">
            {title}
          </span>
        ) : null}
        {description ? (
          <span className="w-full text-body-small-regular-150 font-body-small-regular-150 text-text-neutral-tertiary">
            {description}
          </span>
        ) : null}
      </div>
    );
  }
);

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

const NeutralCard = React.forwardRef<HTMLDivElement, NeutralCardProps>(
  function NeutralCard(
    { children, className, ...otherProps }: NeutralCardProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "flex h-full w-full flex-col items-start gap-3 rounded-lg bg-surface-neutral-secondary px-4 py-4",
          className
        )}
        ref={ref}
        {...otherProps}
      >
        {children ? (
          <div className="flex w-full grow shrink-0 basis-0 flex-col items-start gap-3">
            {children}
          </div>
        ) : null}
      </div>
    );
  }
);

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

const Divider = React.forwardRef<HTMLDivElement, DividerProps>(function Divider(
  { className, ...otherProps }: DividerProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "flex h-px w-full flex-col items-center gap-2 bg-surface-neutral-tertiary",
        className
      )}
      ref={ref}
      {...otherProps}
    />
  );
});

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

const MultiColumnLayout = React.forwardRef<
  HTMLDivElement,
  MultiColumnLayoutProps
>(function MultiColumnLayout(
  { colums, className, ...otherProps }: MultiColumnLayoutProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "flex w-full items-start gap-4",
        className
      )}
      ref={ref}
      {...otherProps}
    >
      {colums ? (
        <div className="flex grow shrink-0 basis-0 flex-col items-start gap-4">
          {colums}
        </div>
      ) : null}
    </div>
  );
});

export interface SettingsPageRootProps
  extends React.HTMLAttributes<HTMLDivElement> {
  pageTitle?: React.ReactNode;
  pageDescription?: React.ReactNode;
  tabs?: React.ReactNode;
  children?: React.ReactNode;
  className?: string;
}

const SettingsPageRoot = React.forwardRef<
  HTMLDivElement,
  SettingsPageRootProps
>(function SettingsPageRoot(
  {
    pageTitle,
    pageDescription,
    tabs,
    children,
    className,
    ...otherProps
  }: SettingsPageRootProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "flex h-full w-full flex-col items-start gap-4 bg-surface-neutral-tertiary px-10 pb-8 overflow-auto",
        className
      )}
      ref={ref}
      {...otherProps}
    >
      {tabs ? (
        <div className="flex w-full flex-col items-start">{tabs}</div>
      ) : null}
      <div className="flex w-full flex-col items-start gap-4">
        <div className="flex w-full flex-col items-start gap-2">
          {pageTitle ? (
            <span className="text-title-page font-title-page text-text-neutral-primary">
              {pageTitle}
            </span>
          ) : null}
          {pageDescription ? (
            <span className="w-full text-body-default-regular-150 font-body-default-regular-150 text-text-neutral-tertiary">
              {pageDescription}
            </span>
          ) : null}
        </div>
        <div className="flex w-full grow shrink-0 basis-0 flex-col items-start gap-2">
          {children ? (
            <div className="flex w-full grow shrink-0 basis-0 flex-col items-start gap-4">
              {children}
            </div>
          ) : null}
        </div>
      </div>
    </div>
  );
});

export const SettingsPage = Object.assign(SettingsPageRoot, {
  SettingRow,
  SwitchSetting,
  SectionHeader,
  NeutralCard,
  Divider,
  MultiColumnLayout,
});