upstream-plane/apps/web/core/components/base-layouts/layout-switcher.tsx

/**
 * Copyright (c) 2023-present Plane Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

import { useTranslation } from "@plane/i18n";
import { Tooltip } from "@makeplane/propel/components/tooltip";
import type { TBaseLayoutType } from "@plane/types";
import { cn } from "@plane/utils";
import { usePlatformOS } from "@/hooks/use-platform-os";
import { BASE_LAYOUTS } from "./constants";

type Props = {
  layouts?: TBaseLayoutType[];
  onChange: (layout: TBaseLayoutType) => void;
  selectedLayout: TBaseLayoutType;
};

export function LayoutSwitcher(props: Props) {
  const { layouts, onChange, selectedLayout } = props;
  const { isMobile } = usePlatformOS();
  const { t } = useTranslation();

  const handleOnChange = (layoutKey: TBaseLayoutType) => {
    if (selectedLayout !== layoutKey) {
      onChange(layoutKey);
    }
  };

  return (
    <div className="flex items-center gap-1 rounded-md bg-layer-3 p-1">
      {BASE_LAYOUTS.map((layout) => {
        if (layouts && !layouts.includes(layout.key)) return null;
        const Icon = layout.icon;
        return (
          <Tooltip key={layout.key} label={t(layout.label)} disabled={isMobile}>
            <button
              type="button"
              aria-label={t(layout.label)}
              className={cn(
                "group grid h-5.5 w-7 place-items-center overflow-hidden rounded-sm transition-all hover:bg-layer-transparent-hover",
                {
                  "bg-layer-transparent-active hover:bg-layer-transparent-active": selectedLayout === layout.key,
                }
              )}
              onClick={() => handleOnChange(layout.key)}
            >
              <Icon
                width={14}
                height={14}
                strokeWidth={2}
                className={cn("size-3.5", {
                  "text-primary": selectedLayout === layout.key,
                  "text-secondary": selectedLayout !== layout.key,
                })}
              />
            </button>
          </Tooltip>
        );
      })}
    </div>
  );
}