Dashboard/ui/components/KanbanColumn/KanbanColumn.tsx

"use client";
/*
 * Documentation:
 * KanbanColumn — https://app.subframe.com/f023064a5ca0/library?component=KanbanColumn_bbc08458-14aa-4512-a807-e673a64315ab
 */

import React from "react";
import { FeatherChevronsLeft } from "@subframe/core";
import { FeatherChevronsRight } from "@subframe/core";
import { FeatherLock } from "@subframe/core";
import * as SubframeCore from "@subframe/core";
import * as SubframeUtils from "../../utils";

export interface KanbanColumnRootProps
  extends React.HTMLAttributes<HTMLDivElement> {
  collapsed?: boolean;
  name?: React.ReactNode;
  price?: React.ReactNode;
  icon?: React.ReactNode;
  badge?: React.ReactNode;
  cards?: React.ReactNode;
  sumLocked?: boolean;
  className?: string;
}

const KanbanColumnRoot = React.forwardRef<
  HTMLDivElement,
  KanbanColumnRootProps
>(function KanbanColumnRoot(
  {
    collapsed = false,
    name,
    price,
    icon = <FeatherChevronsLeft />,
    badge,
    cards,
    sumLocked = false,
    className,
    ...otherProps
  }: KanbanColumnRootProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "group/bbc08458 flex w-80 flex-col items-center gap-2 rounded-md border-2 border-solid border-border-default bg-surface-neutral-tertiary px-1.5 py-1.5 shrink-0 min-w-80 self-start",
        { "h-full w-12 px-0 min-w-12": collapsed },
        className
      )}
      ref={ref}
      {...otherProps}
    >
      <div
        className={SubframeUtils.twClassNames(
          "flex w-full flex-col items-center",
          { "grow shrink-0 basis-0 bg-surface-neutral-tertiary": collapsed }
        )}
      >
        <div
          className={SubframeUtils.twClassNames(
            "flex w-full items-center justify-between px-1 pt-1.5 pb-1 gap-2",
            { "flex-col rounded-md py-3 cursor-pointer": collapsed }
          )}
        >
          <FeatherChevronsRight
            className={SubframeUtils.twClassNames(
              "hidden text-body-small-semibold-0 font-body-small-semibold-0 text-icon-neutral-tertiary",
              { "inline-flex": collapsed }
            )}
          />
          <div
            className={SubframeUtils.twClassNames(
              "hidden grow shrink-0 basis-0 flex-col items-center gap-2 self-stretch py-3",
              { flex: collapsed }
            )}
          >
            <div className="flex h-0.5 w-full flex-none flex-col items-center gap-2 bg-border-default" />
          </div>
          {name ? (
            <span
              className={SubframeUtils.twClassNames(
                "hidden break-words text-body-small-semibold-150 font-body-small-semibold-150 text-text-neutral-primary [writing-mode:vertical-rl] rotate-180",
                { inline: collapsed }
              )}
            >
              {name}
            </span>
          ) : null}
          <div
            className={SubframeUtils.twClassNames(
              "flex min-w-[0px] items-center gap-2.5 grow shrink",
              { "flex-col px-1 py-1": collapsed }
            )}
          >
            {name ? (
              <span
                className={SubframeUtils.twClassNames(
                  "min-w-[0px] break-words text-body-small-semibold-150 font-body-small-semibold-150 text-text-neutral-primary",
                  { hidden: collapsed }
                )}
              >
                {name}
              </span>
            ) : null}
            {badge ? (
              <div
                className={SubframeUtils.twClassNames(
                  "flex items-center gap-2.5 shrink-0",
                  { "px-1 py-2": collapsed }
                )}
              >
                {badge}
              </div>
            ) : null}
          </div>
          <div
            className={SubframeUtils.twClassNames(
              "flex min-w-[0px] items-center gap-2 shrink-0",
              { hidden: collapsed }
            )}
          >
            <div
              className={SubframeUtils.twClassNames(
                "hidden items-center gap-1 shrink-0",
                { flex: sumLocked }
              )}
            >
              <FeatherLock className="text-body-extra-small-regular-0 font-body-extra-small-regular-0 text-icon-neutral-subtle" />
              <span className="whitespace-nowrap text-body-extra-small-regular-150 font-body-extra-small-regular-150 text-text-neutral-subtle">
                Summe gesperrt
              </span>
            </div>
            {price ? (
              <span
                className={SubframeUtils.twClassNames(
                  "break-words text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-tertiary",
                  { hidden: sumLocked }
                )}
              >
                {price}
              </span>
            ) : null}
            {icon ? (
              <SubframeCore.IconWrapper className="text-body-small-semibold-0 font-body-small-semibold-0 text-icon-neutral-tertiary">
                {icon}
              </SubframeCore.IconWrapper>
            ) : null}
          </div>
        </div>
      </div>
      <div
        className={SubframeUtils.twClassNames(
          "flex h-0.5 w-full flex-none flex-col items-center gap-2 bg-border-default",
          { hidden: collapsed }
        )}
      />
      {cards ? (
        <div
          className={SubframeUtils.twClassNames(
            "flex w-full flex-col items-center gap-3 pb-2",
            { hidden: collapsed }
          )}
        >
          {cards}
        </div>
      ) : null}
    </div>
  );
});

export const KanbanColumn = KanbanColumnRoot;