34 lines
981 B
TypeScript
34 lines
981 B
TypeScript
|
import { Slider } from 'primereact/slider';
|
||
|
|
import React, { useEffect, useState } from 'react';
|
||
|
|
|
||
|
|
export default function AffinitySlider({ initialValue, onChange }: { initialValue: number, onChange?: (value: number) => void }) {
|
||
|
|
const [value, setValue] = useState(initialValue);
|
||
|
|
useEffect(() => {setValue(initialValue)}, [initialValue]);
|
||
|
|
|
||
|
|
const label = (value: number) => {
|
||
|
|
if (value < 0.2) {
|
||
|
|
return 'Nemesis';
|
||
|
|
} else if (value < 0.5) {
|
||
|
|
return 'Enemies';
|
||
|
|
} else if (value < 0.9) {
|
||
|
|
return 'Bad vibes';
|
||
|
|
} else if (value < 1.1) {
|
||
|
|
return 'Neutral';
|
||
|
|
} else if (value < 1.5) {
|
||
|
|
return 'Good vibes';
|
||
|
|
} else if (value < 1.8) {
|
||
|
|
return 'Good friends';
|
||
|
|
} else {
|
||
|
|
return 'Besties';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Slider value={value} min={0} max={2} step={.1} onChange={(e) =>setValue(e.value)} className='w-80 bg-gray-400' />
|
||
|
|
<span className="px-4 w-1/5">
|
||
|
|
{ label(value) }
|
||
|
|
</span>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|