change: グラフサイズの変更のUIをスライダーに変更

package.json

@@ -34,6 +34,7 @@
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-slider": "^1.2.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
     "@tauri-apps/api": "^1",

src/components/ui/slider.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-neutral-100 dark:bg-neutral-800">
+      <SliderPrimitive.Range className="absolute h-full bg-neutral-900 dark:bg-neutral-50" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-neutral-900 bg-white ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-50 dark:bg-neutral-950 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }

src/consts/chart.ts

@@ -19,4 +19,4 @@ export const displayDataType: Record<HardwareDataType, string> = {
   clock: "Clock",
 } as const;
 
-export const sizes = ["sm", "md", "lg", "xl", "2xl"] as const;
+export const sizeOptions = ["sm", "md", "lg", "xl", "2xl"] as const;

src/template/Settings.tsx

@@ -7,7 +7,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { sizes } from "@/consts/chart";
+import { Slider } from "@/components/ui/slider";
+import { sizeOptions } from "@/consts/chart";
 import type { ChartDataType } from "@/types/hardwareDataType";
 import type { Settings as SettingTypes } from "@/types/settingsType";
 
@@ -81,26 +82,30 @@ const SettingColorMode = () => {
 
 const SettingLineChartSize = () => {
   const { settings, updateSettingAtom } = useSettingsAtom();
+  const sizeIndex = sizeOptions.indexOf(
+    settings.graphSize as SettingTypes["graphSize"],
+  );
 
-  const toggleGraphSize = async (size: SettingTypes["graphSize"]) => {
-    await updateSettingAtom("graphSize", size);
+  const changeGraphSize = async (value: number[]) => {
+    await updateSettingAtom("graphSize", sizeOptions[value[0]]);
   };
 
   return (
-    <div className="flex items-center space-x-4 py-4">
-      <Label className="text-lg">Line Chart Size</Label>
-      <Select value={settings.graphSize} onValueChange={toggleGraphSize}>
-        <SelectTrigger className="w-[180px]">
-          <SelectValue placeholder="Please select" />
-        </SelectTrigger>
-        <SelectContent>
-          {sizes.map((size) => (
-            <SelectItem key={size} value={size}>
-              {size.toUpperCase()}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
+    <div className="my-4 w-96 ">
+      <Label className="block text-lg mb-2">Line Chart Size</Label>
+      <Slider
+        min={0}
+        max={sizeOptions.length - 1}
+        step={1}
+        value={[sizeIndex]}
+        onValueChange={changeGraphSize}
+        className="w-full mt-4"
+      />
+      <div className="flex justify-between text-sm mt-2">
+        {sizeOptions.map((size) => (
+          <span key={size}>{size.toUpperCase()}</span>
+        ))}
+      </div>
     </div>
   );
 };

src/types/settingsType.ts

@@ -1,9 +1,9 @@
-import type { sizes } from "@/consts/chart";
+import type { sizeOptions } from "@/consts/chart";
 import type { ChartDataType } from "./hardwareDataType";
 
 export type Settings = {
   language: string;
   theme: "light" | "dark";
   display_targets: Array<ChartDataType>;
-  graphSize: (typeof sizes)[number];
+  graphSize: (typeof sizeOptions)[number];
 };