feat: init

apps/web/core/components/dropdowns/buttons.tsx

@@ -0,0 +1,133 @@
+"use client";
+import React from "react";
+// helpers
+import { Tooltip } from "@plane/propel/tooltip";
+import { cn } from "@plane/utils";
+// types
+import { usePlatformOS } from "@/hooks/use-platform-os";
+import { BACKGROUND_BUTTON_VARIANTS, BORDER_BUTTON_VARIANTS } from "./constants";
+import type { TButtonVariants } from "./types";
+
+export type DropdownButtonProps = {
+  children: React.ReactNode;
+  className?: string;
+  isActive: boolean;
+  tooltipContent?: string | React.ReactNode | null;
+  tooltipHeading: string;
+  showTooltip: boolean;
+  variant: TButtonVariants;
+  renderToolTipByDefault?: boolean;
+};
+
+type ButtonProps = {
+  children: React.ReactNode;
+  className?: string;
+  isActive: boolean;
+  tooltipContent?: string | React.ReactNode | null;
+  tooltipHeading: string;
+  showTooltip: boolean;
+  renderToolTipByDefault?: boolean;
+};
+
+export const DropdownButton: React.FC<DropdownButtonProps> = (props) => {
+  const {
+    children,
+    className,
+    isActive,
+    tooltipContent,
+    renderToolTipByDefault = true,
+    tooltipHeading,
+    showTooltip,
+    variant,
+  } = props;
+  const ButtonToRender: React.FC<ButtonProps> = BORDER_BUTTON_VARIANTS.includes(variant)
+    ? BorderButton
+    : BACKGROUND_BUTTON_VARIANTS.includes(variant)
+      ? BackgroundButton
+      : TransparentButton;
+
+  return (
+    <ButtonToRender
+      className={className}
+      isActive={isActive}
+      tooltipContent={tooltipContent}
+      tooltipHeading={tooltipHeading}
+      showTooltip={showTooltip}
+      renderToolTipByDefault={renderToolTipByDefault}
+    >
+      {children}
+    </ButtonToRender>
+  );
+};
+
+const BorderButton: React.FC<ButtonProps> = (props) => {
+  const { children, className, isActive, tooltipContent, renderToolTipByDefault, tooltipHeading, showTooltip } = props;
+  const { isMobile } = usePlatformOS();
+
+  return (
+    <Tooltip
+      tooltipHeading={tooltipHeading}
+      tooltipContent={<>{tooltipContent}</>}
+      disabled={!showTooltip}
+      isMobile={isMobile}
+      renderByDefault={renderToolTipByDefault}
+    >
+      <div
+        className={cn(
+          "h-full w-full flex items-center gap-1.5 border-[0.5px] border-custom-border-300 hover:bg-custom-background-80 rounded text-xs px-2 py-0.5",
+          { "bg-custom-background-80": isActive },
+          className
+        )}
+      >
+        {children}
+      </div>
+    </Tooltip>
+  );
+};
+
+const BackgroundButton: React.FC<ButtonProps> = (props) => {
+  const { children, className, tooltipContent, tooltipHeading, renderToolTipByDefault, showTooltip } = props;
+  const { isMobile } = usePlatformOS();
+  return (
+    <Tooltip
+      tooltipHeading={tooltipHeading}
+      tooltipContent={<>{tooltipContent}</>}
+      disabled={!showTooltip}
+      isMobile={isMobile}
+      renderByDefault={renderToolTipByDefault}
+    >
+      <div
+        className={cn(
+          "h-full w-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </Tooltip>
+  );
+};
+
+const TransparentButton: React.FC<ButtonProps> = (props) => {
+  const { children, className, isActive, tooltipContent, tooltipHeading, renderToolTipByDefault, showTooltip } = props;
+  const { isMobile } = usePlatformOS();
+  return (
+    <Tooltip
+      tooltipHeading={tooltipHeading}
+      tooltipContent={<>{tooltipContent}</>}
+      disabled={!showTooltip}
+      isMobile={isMobile}
+      renderByDefault={renderToolTipByDefault}
+    >
+      <div
+        className={cn(
+          "h-full w-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 hover:bg-custom-background-80",
+          { "bg-custom-background-80": isActive },
+          className
+        )}
+      >
+        {children}
+      </div>
+    </Tooltip>
+  );
+};