feat: custom slider

fezcode · fezcode · commit e29b697d5b05 · 2025-12-22T00:12:38.000+03:00
diff --git a/scripts/verify-commit.js b/scripts/verify-commit.js
@@ -9,8 +9,6 @@ if (!commitMsgFile) {
 }
 
 try {
-  const commitMsg = fs.readFileSync(commitMsgFile, 'utf8').trim();
-
   // Use the locally installed commitlint
   try {
     execSync(`npx commitlint --edit "${commitMsgFile}"`, { stdio: 'inherit' });
diff --git a/src/components/CustomSlider.js b/src/components/CustomSlider.js
@@ -0,0 +1,64 @@
+import React from 'react';
+
+const CustomSlider = ({
+  label,
+  value,
+  min = 0,
+  max = 100,
+  step = 1,
+  onChange,
+  className = '',
+  variant = 'default', // 'default' | 'brutalist'
+}) => {
+  const percentage = ((value - min) / (max - min)) * 100;
+
+  return (
+    <div className={`flex flex-col gap-2 w-full ${className}`}>
+      {label && (
+        <div className="flex justify-between items-end">
+          <label className="font-mono text-[10px] uppercase tracking-widest text-gray-500 font-bold">
+            {label}
+          </label>
+          <span className="font-mono text-xs text-emerald-500 font-bold">
+            {value}
+          </span>
+        </div>
+      )}
+
+      <div className="relative w-full h-6 flex items-center group">
+        {/* Track Background */}
+        <div className="absolute w-full h-1 bg-white/10 rounded-sm overflow-hidden">
+           {/* Filled Track */}
+           <div
+             className="h-full bg-emerald-500 transition-all duration-75 ease-out"
+             style={{ width: `${percentage}%` }}
+           />
+        </div>
+
+        {/* Input */}
+        <input
+          type="range"
+          min={min}
+          max={max}
+          step={step}
+          value={value}
+          onChange={(e) => onChange(Number(e.target.value))}
+          className="absolute w-full h-full opacity-0 cursor-pointer z-10"
+        />
+
+        {/* Custom Thumb (Visual only, follows percentage) */}
+        <div
+          className="absolute h-4 w-4 bg-[#050505] border-2 border-emerald-500 rounded-sm pointer-events-none transition-all duration-75 ease-out group-hover:scale-110 group-active:scale-95"
+          style={{
+            left: `calc(${percentage}% - 8px)`,
+          }}
+        >
+            {/* Inner dot */}
+            <div className="absolute inset-1 bg-emerald-500 opacity-0 group-hover:opacity-100 transition-opacity" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CustomSlider;

Original file line number	Diff line number	Diff line change
`@@ -9,8 +9,6 @@ if (!commitMsgFile) {`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`try {`
`12`		`- const commitMsg = fs.readFileSync(commitMsgFile, 'utf8').trim();`
`13`		`-`
`14`	`12`	`// Use the locally installed commitlint`
`15`	`13`	`try {`
`16`	`14`	execSync(`npx commitlint --edit "${commitMsgFile}"`, { stdio: 'inherit' });