first commit

calcom/packages/ui/components/arrow-button/ArrowButton.tsx

@@ -0,0 +1,26 @@
+import { Icon } from "../..";
+
+export type ArrowButtonProps = {
+  arrowDirection: "up" | "down";
+  onClick: () => void;
+};
+
+export function ArrowButton(props: ArrowButtonProps) {
+  return (
+    <>
+      {props.arrowDirection === "up" ? (
+        <button
+          className="bg-default text-muted hover:text-emphasis border-default hover:border-emphasis invisible absolute left-0 -ml-4 -mt-4 mb-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-3"
+          onClick={props.onClick}>
+          <Icon name="arrow-up" className="h-5 w-5" />
+        </button>
+      ) : (
+        <button
+          className="bg-default text-muted border-default hover:text-emphasis hover:border-emphasis invisible absolute left-0 -ml-4 mt-8 hidden h-6 w-6  scale-0 items-center justify-center rounded-md border p-1 transition-all  group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-3"
+          onClick={props.onClick}>
+          <Icon name="arrow-down" className="h-5 w-5" />
+        </button>
+      )}
+    </>
+  );
+}

calcom/packages/ui/components/arrow-button/index.ts

@@ -0,0 +1,2 @@
+export { ArrowButton } from "./ArrowButton";
+export type { ArrowButtonProps } from "./ArrowButton";