one-day-update-vna

2026-07-21 16:46:47 +07:00
parent cc1214a59f
commit 47f859c298
175 changed files with 15135 additions and 87 deletions
@@ -0,0 +1,122 @@
+"use client";
+
+import React from "react";
+import clsx from "clsx";
+
+interface CustomSliderProps {
+  label?: string;
+  value: number;
+  min?: number;
+  max?: number;
+  step?: number;
+
+  onChange?: (value: number) => void;
+
+  showValue?: boolean;
+  disabled?: boolean;
+
+  className?: string;
+  labelClassName?: string;
+  sliderClassName?: string;
+  thumbClassName?: string;
+  trackClassName?: string;
+
+  color?: string;
+  trackColor?: string;
+
+  renderValue?: (value: number) => React.ReactNode;
+}
+
+const CustomSlider = ({
+  label,
+  value,
+  min = 0,
+  max = 1,
+  step = 0.01,
+
+  onChange,
+
+  showValue = true,
+  disabled = false,
+
+  className,
+  labelClassName,
+  sliderClassName,
+
+  color = "#2563eb",
+  trackColor = "#e5e7eb",
+
+  renderValue,
+}: CustomSliderProps) => {
+  const percentage = ((value - min) / (max - min)) * 100;
+
+  return (
+    <div className={clsx("w-full space-y-3", className)}>
+      {/* Header */}
+      {(label || showValue) && (
+        <div
+          className={clsx("flex items-center justify-between", labelClassName)}
+        >
+          {label && (
+            <span className="text-sm font-medium text-gray-700">{label}</span>
+          )}
+
+          {showValue && (
+            <span className="text-sm font-semibold text-gray-900">
+              {renderValue ? renderValue(value) : value}
+            </span>
+          )}
+        </div>
+      )}
+
+      {/* Slider */}
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        disabled={disabled}
+        value={value}
+        onChange={(e) => onChange?.(Number(e.target.value))}
+        className={clsx(
+          `
+          w-full
+          appearance-none
+          bg-transparent
+          cursor-pointer
+
+          disabled:opacity-50
+          disabled:cursor-not-allowed
+
+          [&::-webkit-slider-runnable-track]:h-2
+          [&::-webkit-slider-runnable-track]:rounded-full
+
+          [&::-webkit-slider-thumb]:appearance-none
+          [&::-webkit-slider-thumb]:h-6
+          [&::-webkit-slider-thumb]:w-6
+          [&::-webkit-slider-thumb]:rounded-full
+          [&::-webkit-slider-thumb]:bg-white
+          [&::-webkit-slider-thumb]:border-4
+          [&::-webkit-slider-thumb]:shadow-md
+          [&::-webkit-slider-thumb]:-mt-2
+
+          [&::-moz-range-track]:h-2
+          [&::-moz-range-track]:rounded-full
+
+          [&::-moz-range-thumb]:h-6
+          [&::-moz-range-thumb]:w-6
+          [&::-moz-range-thumb]:rounded-full
+          [&::-moz-range-thumb]:bg-white
+          [&::-moz-range-thumb]:border-4
+          `,
+          sliderClassName,
+        )}
+        style={{
+          background: `linear-gradient(to right, ${color} ${percentage}%, ${trackColor} ${percentage}%)`,
+        }}
+      />
+    </div>
+  );
+};
+
+export default CustomSlider;