rentgen/options.tsx

116 lines
4.3 KiB
TypeScript
Raw Normal View History

2022-01-23 21:42:49 +01:00
import React from 'react';
import './options.scss';
2021-11-07 09:17:19 +01:00
export default function Options({
2022-01-23 21:42:49 +01:00
minValueLength,
setMinValueLength,
cookiesOnly,
setCookiesOnly,
cookiesOrOriginOnly,
setCookiesOrOriginOnly,
2022-01-24 12:50:54 +01:00
warningDataDialogAck,
setWarningDataDialogAck,
2022-01-24 12:21:28 +01:00
logoVisibility,
setLogoVisibility,
}: {
2022-01-23 21:42:49 +01:00
minValueLength: number;
setMinValueLength: (n: number) => void;
cookiesOnly: boolean;
setCookiesOnly: (b: boolean) => void;
cookiesOrOriginOnly: boolean;
setCookiesOrOriginOnly: (b: boolean) => void;
2022-01-24 12:50:54 +01:00
warningDataDialogAck: boolean;
setWarningDataDialogAck: (b: boolean) => void;
logoVisibility: boolean;
setLogoVisibility: (b: boolean) => void;
2021-11-07 09:17:19 +01:00
}) {
2022-01-23 21:42:49 +01:00
return (
<div className="options-container">
2022-01-24 12:50:54 +01:00
<span>Interfejs</span>
2022-01-23 21:42:49 +01:00
<fieldset>
<div className="input-container">
<input
type="checkbox"
2022-01-24 12:50:54 +01:00
id="logoVisibility"
checked={logoVisibility}
2022-01-23 21:42:49 +01:00
onChange={(e) => {
2022-01-24 12:50:54 +01:00
setLogoVisibility(e.target.checked);
2022-01-23 21:42:49 +01:00
localStorage.setItem(
2022-01-24 12:50:54 +01:00
'logoVisibility',
e.target.checked as unknown as string
2022-01-23 21:42:49 +01:00
);
}}
/>
2022-01-24 12:50:54 +01:00
<label className="label-checkbox" htmlFor="logoVisibility">
Wyświetlaj logo <i>Internet. Czas działać!</i>
2022-01-24 12:21:28 +01:00
</label>
</div>
<div className="input-container">
<input
type="checkbox"
2022-01-24 12:50:54 +01:00
id="warningDataDialogAck"
checked={warningDataDialogAck}
2022-01-24 12:21:28 +01:00
onChange={(e) => {
2022-01-24 12:50:54 +01:00
setWarningDataDialogAck(e.target.checked);
2022-01-24 12:21:28 +01:00
localStorage.setItem(
2022-01-24 12:50:54 +01:00
'warningDataDialogAck',
e.target.checked as unknown as string
2022-01-24 12:21:28 +01:00
);
}}
/>
2022-01-24 12:50:54 +01:00
<label
className="label-checkbox"
htmlFor="warningDataDialogAck"
>
Wyświetlaj komunikat o pozyskiwanych danych
2022-01-23 21:42:49 +01:00
</label>
</div>
</fieldset>
<span>Ustawienia zaawansowane</span>
<fieldset>
<div className="input-container">
<label htmlFor="minValueLength">
Pokazuj tylko wartości o długości co najmniej{' '}
</label>
<input
type="number"
id="minValueLength"
value={minValueLength}
onChange={(e) =>
setMinValueLength(parseInt(e.target.value))
}
/>
</div>
<div className="input-container">
<input
type="checkbox"
id="cookiesOnly"
checked={cookiesOnly}
onChange={(e) => setCookiesOnly(e.target.checked)}
/>
<label className="label-checkbox" htmlFor="cookiesOnly">
Pokazuj tylko dane z cookiesów
</label>
</div>
<div className="input-container">
<input
type="checkbox"
id="cookiesOrOriginOnly"
checked={cookiesOrOriginOnly}
onChange={(e) =>
setCookiesOrOriginOnly(e.target.checked)
}
/>
<label
className="label-checkbox"
htmlFor="cookiesOrOriginOnly"
>
Pokazuj tylko dane z cookiesów lub z częścią historii
przeglądania
</label>
</div>
</fieldset>
</div>
);
2021-11-07 09:17:19 +01:00
}