public commit

app/src/ui/components/form/FloatingSelect/FloatingSelect.tsx

@@ -0,0 +1,55 @@
+import { FloatingIndicator, Input, UnstyledButton } from "@mantine/core";
+import { useState } from "react";
+import { twMerge } from "tailwind-merge";
+
+export type FloatingSelectProps = {
+   data: string[];
+   description?: string;
+   label?: string;
+};
+
+export function FloatingSelect({ data, label, description }: FloatingSelectProps) {
+   const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
+   const [controlsRefs, setControlsRefs] = useState<Record<string, HTMLButtonElement | null>>({});
+   const [active, setActive] = useState(0);
+
+   const setControlRef = (index: number) => (node: HTMLButtonElement) => {
+      controlsRefs[index] = node;
+      setControlsRefs(controlsRefs);
+   };
+
+   const controls = data.map((item, index) => (
+      <button
+         key={item}
+         className={twMerge(
+            "transition-colors duration-100 px-2.5 py-2 leading-none rounded-lg text-md",
+            active === index && "text-white"
+         )}
+         ref={setControlRef(index)}
+         onClick={() => setActive(index)}
+      >
+         <span className="relative z-[1]">{item}</span>
+      </button>
+   ));
+
+   return (
+      <Input.Wrapper className="flex flex-col gap-1">
+         {label && (
+            <div className="flex flex-col">
+               <Input.Label>{label}</Input.Label>
+               {description && <Input.Description>{description}</Input.Description>}
+            </div>
+         )}
+         <div className="relative w-fit bg-primary/5 px-1.5 py-1 rounded-lg" ref={setRootRef}>
+            {controls}
+
+            <FloatingIndicator
+               target={controlsRefs[active]}
+               parent={rootRef}
+               className="bg-primary rounded-lg"
+            />
+         </div>
+         {/*<Input.Error>Input error</Input.Error>*/}
+      </Input.Wrapper>
+   );
+}