ershisan99/flashcards-example-project
1
0
Fork 0
mirror of https://github.com/ershisan99/flashcards-example-project.git synced 2026-01-02 20:59:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

add modals

Browse Source
This commit is contained in:
andres
2023-10-09 12:13:45 +02:00
parent 575b14c9b4
commit 5e37027dbf
25 changed files with 600 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/ui/slider/slider.tsx
View File

@@ -1,4 +1,4 @@
import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
import { ComponentPropsWithoutRef, ElementRef, forwardRef, useEffect } from 'react'
import * as SliderPrimitive from '@radix-ui/react-slider'
import { clsx } from 'clsx'
@@ -6,20 +6,35 @@ import { clsx } from 'clsx'
import s from './slider.module.scss'
const Slider = forwardRef<
ElementRef<typeof SliderPrimitive.Root>,
ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
>(({ className, ...props }, ref) => (
<div className={s.container}>
<span>{props?.value?.[0]}</span>
<SliderPrimitive.Root ref={ref} className={clsx(s.root, className)} {...props}>
<SliderPrimitive.Track className={s.track}>
<SliderPrimitive.Range className="absolute h-full bg-primary" />
</SliderPrimitive.Track>
<SliderPrimitive.Thumb className={s.thumb} />
<SliderPrimitive.Thumb className={s.thumb} />
</SliderPrimitive.Root>
<span>{props?.value?.[1]}</span>
</div>
))
Omit<ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, 'value'> & {
value?: (number | undefined)[]
}
>(({ className, value, ...props }, ref) => {
useEffect(() => {
if (value?.[1] === undefined || value?.[1] === null) {
props.onValueChange?.([value?.[0] ?? 0, props.max ?? 0])
}
}, [props.max, value])
return (
<div className={s.container}>
<span>{value?.[0]}</span>
<SliderPrimitive.Root
ref={ref}
className={clsx(s.root, className)}
{...props}
value={[value?.[0] ?? 0, value?.[1] ?? props.max ?? 0]}
>
<SliderPrimitive.Track className={s.track}>
<SliderPrimitive.Range className="absolute h-full bg-primary" />
</SliderPrimitive.Track>
<SliderPrimitive.Thumb className={s.thumb} />
<SliderPrimitive.Thumb className={s.thumb} />
</SliderPrimitive.Root>
<span>{value?.[1]}</span>
</div>
)
})
Slider.displayName = SliderPrimitive.Root.displayName