Theme changing. Simple routing

client/src/components/UI/Headline/Headline.module.css

@@ -0,0 +1,7 @@
+.HeadlineTitle {
+  color: var(--color-primary);
+}
+
+.HeadlineSubtitle {
+  color: var(--color-primary);
+}

client/src/components/UI/Headline/Headline.tsx

@@ -0,0 +1,18 @@
+import { Fragment } from 'react';
+import classes from './Headline.module.css';
+
+interface ComponentProps {
+  title: string;
+  subtitle?: string;
+}
+
+const Headline = (props: ComponentProps): JSX.Element => {
+  return (
+    <Fragment>
+      <h2 className={classes.HeadlineTitle}>{props.title}</h2>
+      {props.subtitle && <p className={classes.HeadlineSubtitle}>{props.subtitle}</p>}
+    </Fragment>
+  )
+}
+
+export default Headline;

client/src/components/UI/Icon/Icon.module.css

@@ -0,0 +1,4 @@
+.Icon {
+  color: var(--color-primary);
+  width: 90%;
+}

client/src/components/UI/Icon/Icon.tsx

@@ -0,0 +1,25 @@
+import classes from './Icon.module.css';
+
+import { Icon as MDIcon } from '@mdi/react';
+
+interface ComponentProps {
+  icon: string;
+}
+
+const Icon = (props: ComponentProps): JSX.Element => {
+  const MDIcons = require('@mdi/js');
+  let iconPath = MDIcons[props.icon];
+
+  if (!iconPath) {
+    console.log('icon not found');
+    iconPath = MDIcons.mdiCancel;
+  }
+
+  return (
+    <MDIcon className={classes.Icon}
+      path={iconPath}
+    />
+    )
+}
+
+export default Icon;

client/src/components/UI/Layout/Layout.module.css

@@ -0,0 +1,4 @@
+.Container {
+  width: 100%;
+  padding: var(--space-p-x);
+}

client/src/components/UI/Layout/Layout.tsx

@@ -0,0 +1,9 @@
+import classes from './Layout.module.css';
+
+export const Container = (props: any): JSX.Element => {
+  return (
+    <div className={classes.Container}>
+      {props.children}
+    </div>
+  )
+}