81 lines
2.1 KiB
TypeScript
81 lines
2.1 KiB
TypeScript
import React from 'react'
|
|
import { cn } from '../lib/utils'
|
|
import { p } from './my-text'
|
|
import { Minus, Plus } from 'lucide-react'
|
|
|
|
interface QuantifierProps {
|
|
value: number
|
|
setValue: (value: number) => void
|
|
step?: number
|
|
unit?: string | { shortNotation: string }
|
|
min?: number
|
|
max?: number
|
|
}
|
|
|
|
export function Quantifier({
|
|
value,
|
|
setValue,
|
|
step = 1,
|
|
min = 0,
|
|
max = 99,
|
|
}: QuantifierProps) {
|
|
const decrease = () => {
|
|
if (value > min) setValue(value - step)
|
|
}
|
|
|
|
const increase = () => {
|
|
if (value < max) setValue(value + step)
|
|
}
|
|
|
|
return (
|
|
<div className="inline-flex items-center rounded-lg border border-gray-200">
|
|
<button
|
|
onClick={decrease}
|
|
disabled={value <= min}
|
|
className="flex h-8 w-8 items-center justify-center text-gray-500 hover:text-gray-700 disabled:opacity-30"
|
|
>
|
|
<Minus className="h-3.5 w-3.5" />
|
|
</button>
|
|
<p weight="semibold" className="min-w-[32px] text-center text-sm">
|
|
{value}
|
|
</p>
|
|
<button
|
|
onClick={increase}
|
|
disabled={value >= max}
|
|
className="flex h-8 w-8 items-center justify-center text-gray-500 hover:text-gray-700 disabled:opacity-30"
|
|
>
|
|
<Plus className="h-3.5 w-3.5" />
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function MiniQuantifier({
|
|
value,
|
|
setValue,
|
|
step = 1,
|
|
min = 0,
|
|
max = 99,
|
|
}: QuantifierProps) {
|
|
return (
|
|
<div className="inline-flex items-center rounded-md border border-gray-200">
|
|
<button
|
|
onClick={() => value > min && setValue(value - step)}
|
|
disabled={value <= min}
|
|
className="flex h-6 w-6 items-center justify-center text-gray-500 disabled:opacity-30"
|
|
>
|
|
<Minus className="h-3 w-3" />
|
|
</button>
|
|
<p weight="semibold" className="min-w-[24px] text-center text-xs">
|
|
{value}
|
|
</p>
|
|
<button
|
|
onClick={() => value < max && setValue(value + step)}
|
|
disabled={value >= max}
|
|
className="flex h-6 w-6 items-center justify-center text-gray-500 disabled:opacity-30"
|
|
>
|
|
<Plus className="h-3 w-3" />
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|