gg

src/components/ui/forms/slider.tsx

@@ -1,5 +1,5 @@
-import { Slider as ChakraSlider, For, HStack } from '@chakra-ui/react';
-import * as React from 'react';
+import { Slider as ChakraSlider, For, HStack } from "@chakra-ui/react";
+import * as React from "react";
 
 export interface SliderProps extends ChakraSlider.RootProps {
   marks?: Array<number | { value: number; label: React.ReactNode }>;
@@ -8,36 +8,40 @@ export interface SliderProps extends ChakraSlider.RootProps {
   thumb?: React.ReactNode;
 }
 
-export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(function Slider(props, ref) {
-  const { marks: marksProp, label, showValue, thumb, ...rest } = props;
-  const value = props.defaultValue ?? props.value;
+export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
+  function Slider(props, ref) {
+    const { marks: marksProp, label, showValue, thumb, ...rest } = props;
+    const value = props.defaultValue ?? props.value;
 
-  const marks = marksProp?.map((mark) => {
-    if (typeof mark === 'number') return { value: mark, label: undefined };
-    return mark;
-  });
+    const marks = marksProp?.map((mark) => {
+      if (typeof mark === "number") return { value: mark, label: undefined };
+      return mark;
+    });
 
-  const hasMarkLabel = !!marks?.some((mark) => mark.label);
+    const hasMarkLabel = !!marks?.some((mark) => mark.label);
 
-  return (
-    <ChakraSlider.Root ref={ref} thumbAlignment='center' {...rest}>
-      {label && !showValue && <ChakraSlider.Label>{label}</ChakraSlider.Label>}
-      {label && showValue && (
-        <HStack justify='space-between'>
+    return (
+      <ChakraSlider.Root ref={ref} thumbAlignment="center" {...rest}>
+        {label && !showValue && (
           <ChakraSlider.Label>{label}</ChakraSlider.Label>
-          <ChakraSlider.ValueText />
-        </HStack>
-      )}
-      <ChakraSlider.Control data-has-mark-label={hasMarkLabel || undefined}>
-        <ChakraSlider.Track>
-          <ChakraSlider.Range />
-        </ChakraSlider.Track>
-        <SliderThumbs value={value} thumb={thumb} />
-        <SliderMarks marks={marks} />
-      </ChakraSlider.Control>
-    </ChakraSlider.Root>
-  );
-});
+        )}
+        {label && showValue && (
+          <HStack justify="space-between">
+            <ChakraSlider.Label>{label}</ChakraSlider.Label>
+            <ChakraSlider.ValueText />
+          </HStack>
+        )}
+        <ChakraSlider.Control data-has-mark-label={hasMarkLabel || undefined}>
+          <ChakraSlider.Track>
+            <ChakraSlider.Range />
+          </ChakraSlider.Track>
+          <SliderThumbs value={value} thumb={thumb} />
+          <SliderMarks marks={marks} />
+        </ChakraSlider.Control>
+      </ChakraSlider.Root>
+    );
+  },
+);
 
 function SliderThumbs(props: { value?: number[]; thumb?: React.ReactNode }) {
   const { value, thumb } = props;
@@ -57,22 +61,24 @@ interface SliderMarksProps {
   marks?: Array<number | { value: number; label: React.ReactNode }>;
 }
 
-const SliderMarks = React.forwardRef<HTMLDivElement, SliderMarksProps>(function SliderMarks(props, ref) {
-  const { marks } = props;
-  if (!marks?.length) return null;
+const SliderMarks = React.forwardRef<HTMLDivElement, SliderMarksProps>(
+  function SliderMarks(props, ref) {
+    const { marks } = props;
+    if (!marks?.length) return null;
 
-  return (
-    <ChakraSlider.MarkerGroup ref={ref}>
-      {marks.map((mark, index) => {
-        const value = typeof mark === 'number' ? mark : mark.value;
-        const label = typeof mark === 'number' ? undefined : mark.label;
-        return (
-          <ChakraSlider.Marker key={index} value={value}>
-            <ChakraSlider.MarkerIndicator />
-            {label}
-          </ChakraSlider.Marker>
-        );
-      })}
-    </ChakraSlider.MarkerGroup>
-  );
-});
+    return (
+      <ChakraSlider.MarkerGroup ref={ref}>
+        {marks.map((mark, index) => {
+          const value = typeof mark === "number" ? mark : mark.value;
+          const label = typeof mark === "number" ? undefined : mark.label;
+          return (
+            <ChakraSlider.Marker key={index} value={value}>
+              <ChakraSlider.MarkerIndicator />
+              {label}
+            </ChakraSlider.Marker>
+          );
+        })}
+      </ChakraSlider.MarkerGroup>
+    );
+  },
+);