moves selectable button in components

Open-Earth-Foundation · Mar 3, 2025 · d884117 · d884117
1 parent 9edb829
commit d884117
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 48 deletions.
diff --git a/app/src/components/custom-selectable-buttons.tsx b/app/src/components/custom-selectable-buttons.tsx
@@ -0,0 +1,52 @@
+import { TFunction } from "i18next";
+import { FC } from "react";
+import { Button } from "./ui/button";
+import { Icon } from "@chakra-ui/react";
+import { InventoryButtonCheckIcon } from "./icons";
+
+export default function CustomSelectableButton({
+  field,
+  value,
+  inputValue,
+  inputValueFunction,
+  t,
+}: {
+  value: string;
+  field: any;
+  inputValue: string;
+  inputValueFunction: Function;
+  t: TFunction;
+}) {
+  return (
+    <Button
+      key={value}
+      w="181px"
+      borderColor={
+        inputValue === value ? "interactive.secondary" : "border.neutral"
+      }
+      bg={inputValue === value ? "background.neutral" : "base.light"}
+      h="56px"
+      color={inputValue === value ? "content.link" : "content.secondary"}
+      borderRadius="4xl"
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+      fontFamily="heading"
+      fontStyle="500"
+      textTransform="uppercase"
+      lineHeight="20px"
+      gap="8px"
+      letterSpacing="wide"
+      className="transition-all duration-150"
+      borderWidth="1px"
+      variant={inputValue === value ? "solid" : "outline"}
+      onClick={() => {
+        field.onChange(value);
+        inputValueFunction(value);
+      }}
+    >
+      {inputValue == value && <Icon as={InventoryButtonCheckIcon} />}
+      {t(value)}
+    </Button>
+  );
+}
diff --git a/app/src/components/steps/add-inventory-details-step.tsx b/app/src/components/steps/add-inventory-details-step.tsx
@@ -31,6 +31,7 @@ import {
 import { Field } from "@/components/ui/field";
 import { Button } from "../ui/button";
 import { InventoryButtonCheckIcon } from "../icons";
+import CustomSelectableButton from "../custom-selectable-buttons";
 
 export default function SetInventoryDetailsStep({
   t,
@@ -360,51 +361,3 @@ export default function SetInventoryDetailsStep({
     </Box>
   );
 }
-
-interface CustomSelectableButtonProps {
-  value: string;
-  field: any;
-  inputValue: string;
-  inputValueFunction: Function;
-  t: TFunction;
-}
-const CustomSelectableButton: FC<CustomSelectableButtonProps> = ({
-  field,
-  value,
-  inputValue,
-  inputValueFunction,
-  t,
-}) => {
-  return (
-    <Button
-      key={value}
-      w="181px"
-      borderColor={
-        inputValue === value ? "interactive.secondary" : "border.neutral"
-      }
-      bg={inputValue === value ? "background.neutral" : "base.light"}
-      h="56px"
-      color={inputValue === value ? "content.link" : "content.secondary"}
-      borderRadius="4xl"
-      display="flex"
-      justifyContent="center"
-      alignItems="center"
-      fontFamily="heading"
-      fontStyle="500"
-      textTransform="uppercase"
-      lineHeight="20px"
-      gap="8px"
-      letterSpacing="wide"
-      className="transition-all duration-150"
-      borderWidth="1px"
-      variant={inputValue === value ? "solid" : "outline"}
-      onClick={() => {
-        field.onChange(value);
-        inputValueFunction(value);
-      }}
-    >
-      {inputValue == value && <Icon as={InventoryButtonCheckIcon} />}
-      {t(value)}
-    </Button>
-  );
-};