zedcode/bs-manager
1
0
Fork 0
mirror of https://github.com/Zagrios/bs-manager.git synced 2026-07-03 14:08:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update filter panel component

Browse Source
This commit is contained in:
shidorien
2024-01-07 00:26:10 +01:00
parent f448f023f8
commit fcad40ec66
1 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/maps-mangement-components/filter-panel.component.tsx
+9 -5
View File
@@ -56,7 +56,7 @@ export function FilterPanel({ className, ref, playlist = false, filter, onChange
const renderDurationLabel = (sec: number): JSX.Element => {
const textValue = (() => {
if (sec === MIN_DURATION) {
return t("maps.map-filter-panel.duration");
return "0";
}
if (sec === MAX_DURATION) {
return "∞";
@@ -72,7 +72,7 @@ export function FilterPanel({ className, ref, playlist = false, filter, onChange
const renderNpsLabel = (nps: number): JSX.Element => {
const textValue = (() => {
if (nps === MIN_NPS) {
return "NPS";
return "0"
}
if (nps === MAX_NPS) {
return "∞";
@@ -167,9 +167,13 @@ export function FilterPanel({ className, ref, playlist = false, filter, onChange
return !playlist ? (
<motion.div ref={ref} className={`${className} bg-light-main-color-2 dark:bg-main-color-3`} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
<div className="w-full h-6 grid grid-cols-2 gap-x-12 px-4 mb-6 pt-2">
<BsmRange min={MIN_NPS} max={MAX_NPS} values={npss} onChange={onNpssChange} renderLabel={renderNpsLabel} step={0.1} />
<BsmRange min={MIN_DURATION} max={MAX_DURATION} values={durations} onChange={onDurationsChange} renderLabel={renderDurationLabel} step={5} />
<div className="w-full h-8 grid grid-cols-2 gap-x-12 px-4 mb-6 pt-1">
<BsmRange min={MIN_NPS} max={MAX_NPS} values={npss} onChange={onNpssChange} renderLabel={renderNpsLabel} step={0.1} />
<BsmRange min={MIN_DURATION} max={MAX_DURATION} values={durations} onChange={onDurationsChange} renderLabel={renderDurationLabel} step={5} />
<span className=" text-sm font-bold text-center mt-[10px]">{t("maps.map-filter-panel.nps")}</span>
<span className=" text-sm font-bold text-center mt-[10px]">{t("maps.map-filter-panel.duration")}</span>
</div>
<div className="w-full h-full flex gap-x-2">
<section className="shrink-0">