Home and Settings components

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

@@ -1,3 +1,17 @@
+.Header h1 {
+  color: var(--color-primary);
+  font-weight: 700;
+  font-size: 4em;
+  margin-bottom: 0.5em;
+}
+
+.Header p {
+  color: var(--color-primary);
+  font-weight: 300;
+  text-transform: uppercase;
+  height: 30px;
+}
+
 .SettingsButton {
   width: 35px;
   height: 35px;

client/src/components/Home/Home.tsx

@@ -3,22 +3,65 @@ import Icon from '../UI/Icon/Icon';
 
 import classes from './Home.module.css';
 import { Container } from '../UI/Layout/Layout';
-import Headline from '../UI/Headline/Headline';
+import Headline from '../UI/Headlines/Headline/Headline';
+import SectionHeadline from '../UI/Headlines/SectionHeadline/SectionHeadline';
+import Apps from '../Apps/Apps';
 
 const Home = (): JSX.Element => {
   const dateAndTime = (): 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 date = new Date();
+    const now = new Date();
 
-
-    return `${days[date.getDay()]}, ${date.getDate()} of ${months[date.getMonth()]} ${date.getFullYear()}`;
+    return `${days[now.getDay()]}, ${now.getDate()} of ${months[now.getMonth()]} ${now.getFullYear()}`;
   }
 
+  const greeter = (): string => {
+    const now = new Date().getHours();
+    let msg: string;
+
+    if (now > 18) {
+      msg = 'Good evening!';
+    } else if (now > 12) {
+      msg = 'Good afternoon!';
+    } else if (now > 6) {
+      msg = 'Good morning!';
+    } else if (now > 0) {
+      msg = 'Good night!';
+    } else {
+      msg = 'Hello!';
+    }
+
+    return msg;
+  }
+
+  (() => {
+    const mdiName = 'book-open-blank-variant';
+    const expected = 'mdiBookOpenBlankVariant';
+
+    let parsedName = mdiName
+      .split('-')
+      .map((word: string) => `${word[0].toUpperCase()}${word.slice(1)}`)
+      .join('');
+    parsedName = `mdi${parsedName}`;
+    
+    console.log(parsedName);
+    console.log(parsedName === expected);
+  })();
+
   return (
     <Container>
-      <Headline title='Home' subtitle={dateAndTime()} />
+      <header className={classes.Header}>
+        <p>{dateAndTime()}</p>
+        <h1>{greeter()}</h1>
+      </header>
+
+      <SectionHeadline title='Apps' />
+      <Apps />
+
+      <SectionHeadline title='Bookmarks' />
+
       <Link to='/settings' className={classes.SettingsButton}>
         <Icon icon='mdiCog' />
       </Link>