Refactored code, make 2 components, cleanup and clean style

src/components/Select.tsx

@@ -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;

src/components/Slider.tsx

@@ -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;

src/features/Home/HomePage.tsx

@@ -10,26 +10,8 @@ const listsLabels = {
 	rodzajObrobki: "Rodzaj Obróbki",
 	material: "Material",
 };
-import { ChangeEvent } from "react";
+import Slider from "../../components/Slider";
-
+import Select from "../../components/Select";
-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>
-);
 
 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">
+				<Slider
-					<input
+					range={{ min: 1, max: 50 }}
-						type="range"
+					value={state.glebokoscSkrawania}
-						min={1}
+					onChange={(e) => {
-						max={50}
+						setState((prev) => ({ ...prev, glebokoscSkrawania: Number(e!.target.value) }));
-						value={state.glebokoscSkrawania}
+					}}
-						className="range flex-grow mr-2 "
+					suffix="mm"
-						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>
 				<label className="flex text-gray-700 text-sm font-bold mb-0">Szerokość Skrawania</label>
-				<div className="flex items-center space-x-2">
+				<Slider
-					<input
+					range={{ min: 1, max: 30 }}
-						type="range"
+					value={state.szerokoscSkrawania}
-						min={1}
+					onChange={(e) => {
-						max={30}
+						setState((prev) => ({ ...prev, szerokoscSkrawania: Number(e!.target.value) }));
-						value={state.szerokoscSkrawania}
+					}}
-						className="range flex-grow mr-2"
+					suffix="mm"
-						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>
 				<label className="flex text-gray-700 text-sm font-bold mb-0">Tolerancja</label>
-				<div className="flex items-center space-x-2">
+				<Slider
-					<input
+					range={{ min: 0.1, max: 5 }}
-						type="range"
+					value={state.tolerancja}
-						min={0.1}
+					onChange={(e) => {
-						max={5}
+						setState((prev) => ({ ...prev, tolerancja: Number(e!.target.value) }));
-						value={state.tolerancja}
+					}}
-						className="range flex-grow mr-2"
+					suffix="mm"
-						onChange={(e) => {
+					step={0.01}
-							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>
 				<label className="flex text-gray-700 text-sm font-bold mb-0">Chropowatość</label>
-				<div className="flex items-center space-x-2">
+				<Slider
-					<input
+					range={{ min: 0.1, max: 5 }}
-						type="range"
+					value={state.chropowatosc}
-						min={0.1}
+					onChange={(e) => {
-						max={5}
+						setState((prev) => ({ ...prev, chropowatosc: Number(e!.target.value) }));
-						value={state.chropowatosc}
+					}}
-						className="range flex-grow mr-2"
+					suffix="mm"
-						onChange={(e) => {
+					step={0.01}
-							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>
 
 				<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">
+					{Object.keys(state).map((key) => (
-						rodzajFrezowania: <span className="text-black font-medium">{state.rodzajFrezowania}</span>
+						<span key={key} className="text-gray-800 block tracking-wide">
-					</span>
+							{key}: <span className="text-black font-medium">{state[key as keyof typeof state]}</span>
-					<span className="text-gray-800 block tracking-wide">
+						</span>
-						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>
 				</div>
 			</div>
 		</>

src/main.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+.grow-width {
+	width: fit-content;
+}