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

client/src/components/Home/Header/Header.module.css

@@ -0,0 +1,31 @@
+.Header h1 {
+  color: var(--color-primary);
+  font-weight: 700;
+  font-size: 4em;
+  display: inline-block;
+}
+
+.Header p {
+  color: var(--color-primary);
+  font-weight: 300;
+  text-transform: uppercase;
+  height: 30px;
+}
+
+.HeaderMain {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2.5rem;
+}
+
+.SettingsLink {
+  visibility: visible;
+  color: var(--color-accent);
+}
+
+@media (min-width: 769px) {
+  .SettingsLink {
+    visibility: hidden;
+  }
+}

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

client/src/components/Home/Header/functions/getDateTime.ts

@@ -0,0 +1,39 @@
+export const getDateTime = (): string => {
+  const days = [
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday',
+  ];
+  const months = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
+
+  const now = new Date();
+
+  const useAmericanDate = localStorage.useAmericanDate === 'true';
+
+  if (!useAmericanDate) {
+    return `${days[now.getDay()]}, ${now.getDate()} ${
+      months[now.getMonth()]
+    } ${now.getFullYear()}`;
+  } else {
+    return `${days[now.getDay()]}, ${
+      months[now.getMonth()]
+    } ${now.getDate()} ${now.getFullYear()}`;
+  }
+};

client/src/components/Home/Header/functions/greeter.ts

@@ -0,0 +1,17 @@
+export const greeter = (): string => {
+  const now = new Date().getHours();
+  let msg: string;
+
+  const greetingsSchemaRaw =
+    localStorage.getItem('greetingsSchema') ||
+    'Good evening!;Good afternoon!;Good morning!;Good night!';
+  const greetingsSchema = greetingsSchemaRaw.split(';');
+
+  if (now >= 18) msg = greetingsSchema[0];
+  else if (now >= 12) msg = greetingsSchema[1];
+  else if (now >= 6) msg = greetingsSchema[2];
+  else if (now >= 0) msg = greetingsSchema[3];
+  else msg = 'Hello!';
+
+  return msg;
+};