feat: adjust app/pages/home.jsx

app/app.jsx

@@ -1,13 +1,21 @@
 import React from 'react';
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
 
+import Header from './components/header';
 import Home from './pages/home';
 import StationProfile from './pages/station-profile';
 
+import packageInfo from '../package.json'
+const VERSION = packageInfo.version;
+
 export default function App() {
 
     return (
 	<Router>
+	    <Header />
+		<p>
+		    This website (Version:&nbsp;{VERSION}) dislays a public transport station profile for the provided UIC station code.
+		</ p>
 	    <Routes>
 		<Route path="/" element={<Home />} />
 		<Route path="/:uic" element={<StationProfile />} />

app/components/header.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Link} from 'react-router-dom';
+
+export default function Header(){
+
+    return (
+	<>
+	    <Link
+	    to='/'
+	    >
+		<button>
+		    Home
+		</button>
+	    </Link>
+	    <Link
+		title="imprint"
+		target="_blank"
+		rel="noopener noreferrer nofollow"
+		to='https://www.swingbe.de/imprint/'
+	    >
+		<button>
+		    Imprint
+		</button>
+	    </Link>
+	    <Link
+		title="privacy policy"
+		target="_blank"
+		rel="noopener noreferrer nofollow"
+		to='https://www.swingbe.de/privacy-policy/'
+	    >
+		<button>
+		    Privacy Policy
+		</button>
+	    </Link>
+	    <Link
+		title="source"
+		target="_blank"
+		rel="noopener noreferrer nofollow"
+		to='https://git.wtf-eg.de/dancesWithCycles/station-profile'
+	    >
+		<button>
+		    Source
+		</button>
+	    </Link>
+	</>
+    );
+};

app/pages/home.jsx

@@ -1,9 +1,93 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 export default function Home() {
+
+    const uicUnavailable = '';
+
+    const [uic, setUic] = useState(uicUnavailable);
+    const [uicError, setUicError] = useState('');
+    const [isComplete, setIsComplete] = useState(false);
+    const handleSubmit = (e) => {
+	console.log('handleSubmit() start...');
+	e.preventDefault();
+
+        setUicError("");
+        if (isNaN(uic)) {
+	    console.log('handleSubmit() UIC NOT valid');
+
+            setUicError("Error! Enter valid UIC: ");
+	} else {
+	    console.log('handleSubmit() UIC is complete');
+	    setIsComplete(true);
+	}
+
+	console.log('handleSubmit() done.');
+    };
+
+    const handleSend = (e) => {
+	e.preventDefault();
+	console.log("Home:handleSend() uic: " + uic);
+
+	setUic(uicUnavailable);
+	setUicError('');
+	setIsComplete(false);
+	console.log("Home:handleSend() done.");
+    };
+
+    const ButtonSend = () => {
+	if(isComplete) {
+	    console.log('buttonSend() complete');
+	    return(
+		<div>
+		    <label
+			htmlFor="button-send"
+		    >3. Send: </label>
+		    <button
+			className ="button-send"
+			id="button-send"
+			type="button"
+			onClick={e => handleSend(e)}
+		    >Send</button>
+		</div>
+	    );
+	}else{
+	    console.log('buttonSend() NOT complete');
+	    return(
+		<div>
+		    {(!isComplete) ? <label htmlFor="button-send">3.Push Submit before Send! </label> : null}
+		    <button type="button" disabled>Send</button>
+		</div>
+	    );
+	}
+    };
+
     return (
 	<>
 	    Enter UIC station code:
+	    <br />
+            <form onSubmit={e => handleSubmit(e)}>
+		<label htmlFor="input-uic">{uicError ? '1. ' + uicError : '1. UIC: '}</label>
+		<input
+		    onChange={e => setUic(uic => e.target.value)}
+		    type="text"
+		    value={uic}
+		    placeholder="Enter UIC"
+		    required
+		    className="input-uic"
+		    id="input-uic"
+		    name="input-uic"
+		/>
+		<br />
+		<label htmlFor="button-submit">2.Submit: </label>
+		<button
+		    type="submit"
+		    className="button-submit"
+		    id="button-submit"
+		>
+                Submit
+            </button>
+	    </form>
+	    <ButtonSend />
 	</>
     );
 }

app/pages/station-profile.jsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import {get} from '../utils/request';
-
 import { useParams } from "react-router-dom";
 
+import {get} from '../utils/request';
+
 export default function StationProfile() {
 
     // Get the userId param from the URL.

config/webpack.common.js

@@ -21,11 +21,6 @@ module.exports = {
 		include: path.resolve(__dirname, '../app'),
 		use: ['babel-loader'],
 	    },
-	    {
-		//test all *.css using style-loader and css-loader
-		test: /\.css$/i,
-		use: ["style-loader", "css-loader"],
-	    },
 	]
     },
     resolve: {