mirror of
https://github.com/voideditor/void
synced 2026-05-24 09:58:23 +00:00
xxs
This commit is contained in:
parent
82ffd4e8f4
commit
f292fa8df6
2 changed files with 19 additions and 16 deletions
|
|
@ -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}
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue