This commit is contained in:
Andrew Pareles 2025-03-06 03:43:11 -08:00
parent 82ffd4e8f4
commit f292fa8df6
2 changed files with 19 additions and 16 deletions

View file

@ -183,7 +183,7 @@ const ReasoningOptionDropdown = () => {
<span className='text-void-fg-3 text-xs pointer-events-none inline-block w-10'>Budget</span> <span className='text-void-fg-3 text-xs pointer-events-none inline-block w-10'>Budget</span>
<VoidSlider <VoidSlider
width={50} width={50}
size='xs' size='xxs'
min={min} min={min}
max={max} max={max}
step={(max - min) / 8} step={(max - min) / 8}

View file

@ -211,6 +211,10 @@ export const VoidInputBox = ({ onChangeText, onCreateInstance, inputBoxRef, plac
/> />
}; };
export const VoidSlider = ({ export const VoidSlider = ({
value, value,
onChange, onChange,
@ -225,7 +229,7 @@ export const VoidSlider = ({
value: number; value: number;
onChange: (value: number) => void; onChange: (value: number) => void;
disabled?: boolean; disabled?: boolean;
size?: 'xs' | 'sm' | 'sm+' | 'md'; size?: 'xxs' | 'xs' | 'sm' | 'sm+' | 'md';
min?: number; min?: number;
max?: number; max?: number;
step?: number; step?: number;
@ -235,12 +239,6 @@ export const VoidSlider = ({
// Calculate percentage for position // Calculate percentage for position
const percentage = ((value - min) / (max - min)) * 100; const percentage = ((value - min) / (max - min)) * 100;
// Get numeric thumb size for padding calculation
const thumbSizePx =
size === 'xs' ? 2.5 * 4 : // Convert rem to px (approx)
size === 'sm' ? 3 * 4 :
size === 'sm+' ? 3.5 * 4 : 4 * 4; // md size
// Handle track click // Handle track click
const handleTrackClick = (e: React.MouseEvent<HTMLDivElement>) => { const handleTrackClick = (e: React.MouseEvent<HTMLDivElement>) => {
if (disabled) return; if (disabled) return;
@ -317,17 +315,19 @@ export const VoidSlider = ({
{/* Track */} {/* Track */}
<div <div
className={`relative ${size === 'xs' ? 'h-1' : className={`relative ${size === 'xxs' ? 'h-0.5' :
size === 'sm' ? 'h-1.5' : size === 'xs' ? 'h-1' :
size === 'sm+' ? 'h-2' : 'h-2.5' size === 'sm' ? 'h-1.5' :
size === 'sm+' ? 'h-2' : 'h-2.5'
} bg-gray-200 dark:bg-gray-700 rounded-full cursor-pointer`} } bg-gray-200 dark:bg-gray-700 rounded-full cursor-pointer`}
onClick={handleTrackClick} onClick={handleTrackClick}
> >
{/* Filled part of track */} {/* Filled part of track */}
<div <div
className={`absolute left-0 ${size === 'xs' ? 'h-1' : className={`absolute left-0 ${size === 'xxs' ? 'h-0.5' :
size === 'sm' ? 'h-1.5' : size === 'xs' ? 'h-1' :
size === 'sm+' ? 'h-2' : 'h-2.5' size === 'sm' ? 'h-1.5' :
size === 'sm+' ? 'h-2' : 'h-2.5'
} bg-gray-900 dark:bg-white rounded-full`} } bg-gray-900 dark:bg-white rounded-full`}
style={{ width: `${percentage}%` }} style={{ width: `${percentage}%` }}
/> />
@ -336,7 +336,11 @@ export const VoidSlider = ({
{/* Thumb with sizes matching VoidSwitch */} {/* Thumb with sizes matching VoidSwitch */}
<div <div
className={`absolute top-1/2 transform -translate-x-1/2 -translate-y-1/2 className={`absolute top-1/2 transform -translate-x-1/2 -translate-y-1/2
${size === 'xs' ? 'h-2.5 w-2.5' : size === 'sm' ? 'h-3 w-3' : size === 'sm+' ? 'h-3.5 w-3.5' : 'h-4 w-4'} ${size === 'xxs' ? 'h-2 w-2' :
size === 'xs' ? 'h-2.5 w-2.5' :
size === 'sm' ? 'h-3 w-3' :
size === 'sm+' ? 'h-3.5 w-3.5' : 'h-4 w-4'
}
bg-white dark:bg-gray-900 rounded-full shadow-md ${disabled ? 'cursor-not-allowed' : 'cursor-grab active:cursor-grabbing'}`} bg-white dark:bg-gray-900 rounded-full shadow-md ${disabled ? 'cursor-not-allowed' : 'cursor-grab active:cursor-grabbing'}`}
style={{ left: `${percentage}%`, zIndex: 2 }} // Ensure thumb is above the invisible clickable area style={{ left: `${percentage}%`, zIndex: 2 }} // Ensure thumb is above the invisible clickable area
onMouseDown={(e) => { onMouseDown={(e) => {
@ -371,7 +375,6 @@ export const VoidSlider = ({
export const VoidSwitch = ({ export const VoidSwitch = ({
value, value,
onChange, onChange,