Added option to set custom greetings. Moved HomeHeader to separate file. Cleaned up README file

client/src/components/Home/Header/Header.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
+import { Config, GlobalState } from '../../../interfaces';
+import WeatherWidget from '../../Widgets/WeatherWidget/WeatherWidget';
+import { getDateTime } from './functions/getDateTime';
+import { greeter } from './functions/greeter';
+import classes from './Header.module.css';
+
+interface Props {
+  config: Config;
+}
+
+const Header = (props: Props): JSX.Element => {
+  const [dateTime, setDateTime] = useState<string>(getDateTime());
+  const [greeting, setGreeting] = useState<string>(greeter());
+
+  useEffect(() => {
+    let dateTimeInterval: NodeJS.Timeout;
+
+    dateTimeInterval = setInterval(() => {
+      setDateTime(getDateTime());
+      setGreeting(greeter());
+    }, 1000);
+
+    return () => window.clearInterval(dateTimeInterval);
+  }, []);
+
+  return (
+    <header className={classes.Header}>
+      <p>{dateTime}</p>
+      <Link to="/settings" className={classes.SettingsLink}>
+        Go to Settings
+      </Link>
+      <span className={classes.HeaderMain}>
+        <h1>{greeting}</h1>
+        <WeatherWidget />
+      </span>
+    </header>
+  );
+};
+
+const mapStateToProps = (state: GlobalState) => {
+  return {
+    config: state.config.config,
+  };
+};
+
+export default connect(mapStateToProps)(Header);