Refactored code, make 2 components, cleanup and clean style
This commit is contained in:
parent
72a451a710
commit
232df0d13d
GPG Key ID:
EA4CE0D1E2A6DC98
22
src/components/Select.tsx
Normal file
22
src/components/Select.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import { ChangeEvent } from "react";
|
||||
|
||||
interface SelectProps {
|
||||
value: string | number;
|
||||
onChange: (event: ChangeEvent<HTMLSelectElement>) => void;
|
||||
options: string[];
|
||||
label: string;
|
||||
disabledLabel: string;
|
||||
}
|
||||
|
||||
const Select = ({ value, onChange, options, disabledLabel }: SelectProps) => (
|
||||
<select className="select w-full input input-secondary" value={value} onChange={onChange}>
|
||||
<option disabled>{disabledLabel}</option>
|
||||
{options.map((option, index) => (
|
||||
<option key={option} value={index}>
|
||||
{option}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
|
||||
export default Select;
|
||||
40
src/components/Slider.tsx
Normal file
40
src/components/Slider.tsx
Normal file
@ -0,0 +1,40 @@
|
||||
import { ChangeEvent } from "react";
|
||||
|
||||
interface SliderProps {
|
||||
range: { min: number; max: number };
|
||||
value: number;
|
||||
onChange: (e?: ChangeEvent<HTMLInputElement>) => unknown;
|
||||
step?: number;
|
||||
suffix?: string;
|
||||
}
|
||||
|
||||
const Slider = (props: SliderProps) => {
|
||||
return (
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
className="range flex-grow mr-2"
|
||||
max={props.range.max}
|
||||
min={props.range.min}
|
||||
onChange={props.onChange}
|
||||
step={props.step ?? 1}
|
||||
type="range"
|
||||
value={props.value}
|
||||
/>
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
className="input input-secondary"
|
||||
max={props.range.max}
|
||||
min={props.range.min}
|
||||
onChange={props.onChange}
|
||||
step={props.step ?? 1}
|
||||
type="number"
|
||||
value={props.value}
|
||||
size={4}
|
||||
/>
|
||||
<span>{props.suffix}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Slider;
|
||||
@ -10,26 +10,8 @@ const listsLabels = {
|
||||
rodzajObrobki: "Rodzaj Obróbki",
|
||||
material: "Material",
|
||||
};
|
||||
import { ChangeEvent } from "react";
|
||||
|
||||
interface SelectProps {
|
||||
value: string | number;
|
||||
onChange: (event: ChangeEvent<HTMLSelectElement>) => void;
|
||||
options: string[];
|
||||
label: string;
|
||||
disabledLabel: string;
|
||||
}
|
||||
|
||||
const Select = ({ value, onChange, options, disabledLabel }: SelectProps) => (
|
||||
<select className="select w-full input input-secondary" value={value} onChange={onChange}>
|
||||
<option disabled>{disabledLabel}</option>
|
||||
{options.map((option, index) => (
|
||||
<option key={option} value={index}>
|
||||
{option}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
import Slider from "../../components/Slider";
|
||||
import Select from "../../components/Select";
|
||||
|
||||
const HomePage = () => {
|
||||
const [state, setState] = useState({
|
||||
@ -53,7 +35,7 @@ const HomePage = () => {
|
||||
<h1 className="text-3xl mb-6 text-center text-gray-700">Wybór parametrów</h1>
|
||||
<div className="space-y-4">
|
||||
{Object.keys(lists).map((key) => (
|
||||
<div className="mb-4">
|
||||
<div className="mb-4" key={key}>
|
||||
<label className="block text-gray-700 text-sm font-bold mb-2">
|
||||
{listsLabels[key as keyof typeof listsLabels]}
|
||||
</label>
|
||||
@ -70,113 +52,46 @@ const HomePage = () => {
|
||||
</div>
|
||||
|
||||
<label className="flex text-gray-700 text-sm font-bold mb-0">Głębokość Skrawania</label>
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
type="range"
|
||||
min={1}
|
||||
max={50}
|
||||
value={state.glebokoscSkrawania}
|
||||
className="range flex-grow mr-2 "
|
||||
onChange={(e) => {
|
||||
setState((prev) => ({ ...prev, glebokoscSkrawania: Number(e.target.value) }));
|
||||
}}
|
||||
/>
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
value={state.glebokoscSkrawania}
|
||||
onChange={(e) => {
|
||||
setState((prev) => ({ ...prev, glebokoscSkrawania: Number(e.target.value) }));
|
||||
}}
|
||||
className="input input-secondary w-20"
|
||||
type="number"
|
||||
min={1}
|
||||
max={50}
|
||||
/>
|
||||
<span>mm</span>
|
||||
</div>
|
||||
</div>
|
||||
<Slider
|
||||
range={{ min: 1, max: 50 }}
|
||||
value={state.glebokoscSkrawania}
|
||||
onChange={(e) => {
|
||||
setState((prev) => ({ ...prev, glebokoscSkrawania: Number(e!.target.value) }));
|
||||
}}
|
||||
suffix="mm"
|
||||
/>
|
||||
|
||||
<label className="flex text-gray-700 text-sm font-bold mb-0">Szerokość Skrawania</label>
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
type="range"
|
||||
min={1}
|
||||
max={30}
|
||||
value={state.szerokoscSkrawania}
|
||||
className="range flex-grow mr-2"
|
||||
onChange={(e) => {
|
||||
setState((prev) => ({ ...prev, szerokoscSkrawania: Number(e.target.value) }));
|
||||
}}
|
||||
/>
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
value={state.szerokoscSkrawania}
|
||||
onChange={(e) => {
|
||||
setState((prev) => ({ ...prev, szerokoscSkrawania: Number(e.target.value) }));
|
||||
}}
|
||||
className="input input-secondary w-20"
|
||||
type="number"
|
||||
min={1}
|
||||
max={30}
|
||||
/>
|
||||
<span>mm</span>
|
||||
</div>
|
||||
</div>
|
||||
<Slider
|
||||
range={{ min: 1, max: 30 }}
|
||||
value={state.szerokoscSkrawania}
|
||||
onChange={(e) => {
|
||||
setState((prev) => ({ ...prev, szerokoscSkrawania: Number(e!.target.value) }));
|
||||
}}
|
||||
suffix="mm"
|
||||
/>
|
||||
|
||||
<label className="flex text-gray-700 text-sm font-bold mb-0">Tolerancja</label>
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
type="range"
|
||||
min={0.1}
|
||||
max={5}
|
||||
value={state.tolerancja}
|
||||
className="range flex-grow mr-2"
|
||||
onChange={(e) => {
|
||||
setState((prev) => ({ ...prev, tolerancja: Number(e.target.value) }));
|
||||
}}
|
||||
step={0.01}
|
||||
/>
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
value={state.tolerancja}
|
||||
onChange={(e) => {
|
||||
setState((prev) => ({ ...prev, tolerancja: Number(e.target.value) }));
|
||||
}}
|
||||
className="input input-secondary w-20"
|
||||
type="number"
|
||||
min={0.1}
|
||||
max={5}
|
||||
step={0.01}
|
||||
/>
|
||||
<span>mm</span>
|
||||
</div>
|
||||
</div>
|
||||
<Slider
|
||||
range={{ min: 0.1, max: 5 }}
|
||||
value={state.tolerancja}
|
||||
onChange={(e) => {
|
||||
setState((prev) => ({ ...prev, tolerancja: Number(e!.target.value) }));
|
||||
}}
|
||||
suffix="mm"
|
||||
step={0.01}
|
||||
/>
|
||||
|
||||
<label className="flex text-gray-700 text-sm font-bold mb-0">Chropowatość</label>
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
type="range"
|
||||
min={0.1}
|
||||
max={5}
|
||||
value={state.chropowatosc}
|
||||
className="range flex-grow mr-2"
|
||||
onChange={(e) => {
|
||||
setState((prev) => ({ ...prev, chropowatosc: Number(e.target.value) }));
|
||||
}}
|
||||
step={0.01}
|
||||
/>
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
value={state.chropowatosc}
|
||||
onChange={(e) => {
|
||||
setState((prev) => ({ ...prev, chropowatosc: Number(e.target.value) }));
|
||||
}}
|
||||
className="input input-secondary w-20"
|
||||
type="number"
|
||||
min={0.1}
|
||||
max={5}
|
||||
step={0.01}
|
||||
/>
|
||||
<span>mm</span>
|
||||
</div>
|
||||
</div>
|
||||
<Slider
|
||||
range={{ min: 0.1, max: 5 }}
|
||||
value={state.chropowatosc}
|
||||
onChange={(e) => {
|
||||
setState((prev) => ({ ...prev, chropowatosc: Number(e!.target.value) }));
|
||||
}}
|
||||
suffix="mm"
|
||||
step={0.01}
|
||||
/>
|
||||
|
||||
<button
|
||||
className="btn btn-secondary w-full mt-4"
|
||||
@ -196,30 +111,15 @@ const HomePage = () => {
|
||||
Policz
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="m-4 p-6 bg-white rounded-lg shadow-md w-fit max-w-xs">
|
||||
<h1 className="text-4xl mb-8 text-center text-gray-800 tracking-wider">Wyniki</h1>
|
||||
<div className="space-y-2">
|
||||
<span className="text-gray-800 block tracking-wide">
|
||||
rodzajFrezowania: <span className="text-black font-medium">{state.rodzajFrezowania}</span>
|
||||
</span>
|
||||
<span className="text-gray-800 block tracking-wide">
|
||||
rodzajObrobki: <span className="text-black font-medium">{state.rodzajObrobki}</span>
|
||||
</span>
|
||||
<span className="text-gray-800 block tracking-wide">
|
||||
material: <span className="text-black font-medium">{state.material}</span>
|
||||
</span>
|
||||
<span className="text-gray-800 block tracking-wide">
|
||||
glebokoscSkrawania: <span className="text-black font-medium">{state.glebokoscSkrawania}</span>
|
||||
</span>
|
||||
<span className="text-gray-800 block tracking-wide">
|
||||
szerokoscSkrawania: <span className="text-black font-medium">{state.szerokoscSkrawania}</span>
|
||||
</span>
|
||||
<span className="text-gray-800 block tracking-wide">
|
||||
tolerancja: <span className="text-black font-medium">{state.tolerancja}</span>
|
||||
</span>
|
||||
<span className="text-gray-800 block tracking-wide">
|
||||
chropowatość: <span className="text-black font-medium">{state.chropowatosc}</span>
|
||||
</span>
|
||||
{Object.keys(state).map((key) => (
|
||||
<span key={key} className="text-gray-800 block tracking-wide">
|
||||
{key}: <span className="text-black font-medium">{state[key as keyof typeof state]}</span>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
.grow-width {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user