feat: implemented the split button component (#4040)

Co-authored-by: zeudev <coding@zeu.dev>

components/shared/SplitButton.stories.tsx

@@ -0,0 +1,40 @@
+import { action } from "@storybook/addon-actions";
+import { SplitButton } from "./SplitButton";
+
+export default {
+  title: "Components/SplitButton",
+  component: SplitButton,
+  argTypes: {
+    actions: {
+      control: "object",
+      description: "Array of actions with label and onClick function",
+    },
+  },
+};
+
+const createAction = (label: string) => ({
+  label,
+  onClick: action(`${label} clicked`),
+});
+
+export const Default = {
+  args: {
+    actions: [createAction("Action 1"), createAction("Action 2"), createAction("Action 3")],
+  },
+};
+
+export const SingleOption = {
+  args: {
+    actions: [createAction("Only Option")],
+  },
+};
+
+export const LongLabels = {
+  args: {
+    actions: [
+      createAction("This is a very long action label"),
+      createAction("Another lengthy option here"),
+      createAction("Yet another extended choice"),
+    ],
+  },
+};

components/shared/SplitButton.tsx

@@ -0,0 +1,47 @@
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import { useState } from "react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "components/atoms/Dropdown/dropdown";
+import Button from "./Button/button";
+
+type Action = { label: string; onClick: () => void };
+type NonEmptyArray<T> = [T, ...T[]];
+
+type SplitButtonProps = {
+  actions: NonEmptyArray<Action>;
+};
+
+export const SplitButton = ({ actions }: SplitButtonProps) => {
+  const [action, setAction] = useState<Action>(actions[0]);
+
+  return (
+    <div className="inline-flex rounded-md shadow-sm">
+      <Button variant="primary" className="rounded-r-none" onClick={action.onClick}>
+        {action.label}
+      </Button>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="primary" className="px-2 rounded-l-none !border-l-white">
+            <ChevronDownIcon className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          {actions.map((actionItem) => (
+            <DropdownMenuItem
+              key={actionItem.label}
+              onClick={() => {
+                setAction(actionItem);
+              }}
+            >
+              {actionItem.label}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+};