iBoss/bolt-diy
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

More styling changes

Browse Source 
Added settings scss file and a settings slider scss
This commit is contained in:
Dustin Loring
2024-12-08 08:36:03 -05:00
parent 19816d9b5e
commit 96020a5a6c
4 changed files with 169 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/components/ui/SettingsSlider.tsx
View File

@@ -1,6 +1,7 @@
import { motion } from 'framer-motion';
import { memo } from 'react';
import { classNames } from '~/utils/classNames';
import '~/styles/components/SettingsSlider.scss';
interface SliderOption<T> {
value: T;
@@ -22,11 +23,11 @@ export const SettingsSlider = memo(<T,>({ selected, options, setSelected }: Sett
const isLeftSelected = selected === options.left.value;
return (
<div className="relative flex items-center bg-bolt-elements-prompt-background rounded-lg">
<div className="settings-slider">
<motion.div
className={classNames(
'absolute h-full transition-all duration-300 rounded-lg',
isLeftSelected ? 'left-0 w-1/2 bg-[#b44aff]' : 'right-0 w-1/2 bg-[#b44aff]',
'settings-slider__thumb',
isLeftSelected ? 'settings-slider__thumb--left' : 'settings-slider__thumb--right'
)}
initial={false}
animate={{
@@ -42,8 +43,8 @@ export const SettingsSlider = memo(<T,>({ selected, options, setSelected }: Sett
<button
onClick={() => setSelected?.(options.left.value)}
className={classNames(
'relative z-10 flex-1 p-2 rounded-lg text-sm transition-colors duration-200',
isLeftSelected ? 'text-white' : 'text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary',
'settings-slider__button',
isLeftSelected ? 'settings-slider__button--selected' : 'settings-slider__button--unselected'
)}
>
{options.left.text}
@@ -51,8 +52,8 @@ export const SettingsSlider = memo(<T,>({ selected, options, setSelected }: Sett
<button
onClick={() => setSelected?.(options.right.value)}
className={classNames(
'relative z-10 flex-1 p-2 rounded-lg text-sm transition-colors duration-200',
!isLeftSelected ? 'text-white' : 'text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary',
'settings-slider__button',
!isLeftSelected ? 'settings-slider__button--selected' : 'settings-slider__button--unselected'
)}
>
{options.right.text}