Adopt Tamagui sliders in admin
This commit is contained in:
@@ -1300,7 +1300,7 @@ function LabeledSlider({
|
|||||||
<Slider.Track height={6} borderRadius={999} backgroundColor={border}>
|
<Slider.Track height={6} borderRadius={999} backgroundColor={border}>
|
||||||
<Slider.TrackActive backgroundColor={primary} />
|
<Slider.TrackActive backgroundColor={primary} />
|
||||||
</Slider.Track>
|
</Slider.Track>
|
||||||
<Slider.Thumb index={0} size="$1" backgroundColor={surface} borderColor={primary} borderWidth={2} />
|
<Slider.Thumb index={0} size="$2" backgroundColor={surface} borderColor={primary} borderWidth={2} />
|
||||||
</Slider>
|
</Slider>
|
||||||
</YStack>
|
</YStack>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom';
|
|||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { Copy, ExternalLink, Link2, RefreshCcw, RotateCcw, Settings, Share2 } from 'lucide-react';
|
import { Copy, ExternalLink, Link2, RefreshCcw, RotateCcw, Settings, Share2 } from 'lucide-react';
|
||||||
import { YStack, XStack } from '@tamagui/stacks';
|
import { YStack, XStack } from '@tamagui/stacks';
|
||||||
|
import { Slider } from 'tamagui';
|
||||||
import { SizableText as Text } from '@tamagui/text';
|
import { SizableText as Text } from '@tamagui/text';
|
||||||
import { Pressable } from '@tamagui/react-native-web-lite';
|
import { Pressable } from '@tamagui/react-native-web-lite';
|
||||||
import toast from 'react-hot-toast';
|
import toast from 'react-hot-toast';
|
||||||
@@ -652,7 +653,7 @@ function EffectSlider({
|
|||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
suffix?: string;
|
suffix?: string;
|
||||||
}) {
|
}) {
|
||||||
const { text, muted } = useAdminTheme();
|
const { text, muted, primary, border, surface } = useAdminTheme();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<YStack space="$1.5">
|
<YStack space="$1.5">
|
||||||
@@ -665,16 +666,20 @@ function EffectSlider({
|
|||||||
{suffix ? ` ${suffix}` : ''}
|
{suffix ? ` ${suffix}` : ''}
|
||||||
</Text>
|
</Text>
|
||||||
</XStack>
|
</XStack>
|
||||||
<input
|
<Slider
|
||||||
type="range"
|
width="100%"
|
||||||
min={min}
|
min={min}
|
||||||
max={max}
|
max={max}
|
||||||
step={step}
|
step={step}
|
||||||
value={value}
|
value={[value]}
|
||||||
|
onValueChange={(next) => onChange(next[0] ?? value)}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
onChange={(event) => onChange(Number(event.target.value))}
|
>
|
||||||
style={{ width: '100%' }}
|
<Slider.Track height={6} borderRadius={999} backgroundColor={border}>
|
||||||
/>
|
<Slider.TrackActive backgroundColor={primary} />
|
||||||
|
</Slider.Track>
|
||||||
|
<Slider.Thumb index={0} size="$2" backgroundColor={surface} borderColor={primary} borderWidth={2} />
|
||||||
|
</Slider>
|
||||||
</YStack>
|
</YStack>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user