Create ButtonIconStack from frame buttons

app/components/reusable/ButtonIconStack/ButtonIconStack.tsx

@@ -0,0 +1,39 @@
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+interface ButtonIconStackProps {
+  icon: IconDefinition;
+  text: string;
+  onClick?: () => void;
+  style?: string;
+  additionalStyle?: string;
+}
+
+export function ButtonIconStack({
+  icon,
+  text = "",
+  onClick,
+  style,
+  additionalStyle,
+}: ButtonIconStackProps) {
+
+  const defaultStyle = twMerge(
+    "flex flex-col items-center justify-center text-xs transition-all duration-150",
+    "h-full w-full gap-1 p-2",
+    additionalStyle
+  )
+
+
+  return (
+    <button
+      className={style ?? defaultStyle}
+      onClick={onClick}
+    >
+      <FontAwesomeIcon icon={icon} size="xl" />
+      {text && (
+        <span className="text-nowrap text-xs font-medium">{text}</span>
+      )}
+    </button>
+  );
+}