src/components/App.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import Quick from "./Quick";
 import QuickItem from "./QuickItem";
 import QuickCategory from "./QuickCategory";
+import Clock from "./Clock";
 
 class App extends React.Component {
 	constructor(props) {
@@ -12,6 +13,7 @@ class App extends React.Component {
 	render(): JSX.Element {
 		return <div>
 			<div className="center-wrapper">
+				<Clock/>
 				<Quick>
 					<QuickCategory name="Productivity">
 						<QuickItem name="Nextcloud" url="#"/>

src/components/Clock.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+
+import "../style/clock.scss";
+
+interface State {
+	time: string;
+}
+
+class Clock extends React.Component<{}, State> {
+
+	private interval: NodeJS.Timeout;
+
+	constructor(props) {
+		super(props);
+		this.state = {
+			time: "12:00"
+		};
+	}
+
+	updateTime() {
+		const now = new Date();
+		
+		// Is there a native function for formatting time ??
+		this.setState({
+			time: `${this.zeroPad(now.getHours(), 2)}:${this.zeroPad(now.getMinutes(), 2)}`
+		});
+	}
+
+	zeroPad(number: number, pad: number): string {
+		const length = number.toString().length;
+		if (length < pad) {
+			return "0".repeat(pad - length) + number.toString();
+		} else {
+			return number.toString();
+		}
+	}
+
+	startTimer() {
+		this.interval = setInterval(()=>{
+			this.updateTime();
+		},1000);
+	}
+
+	componentDidMount() {
+		this.updateTime();
+		this.startTimer();
+	}
+
+	componentWillUnmount(){
+		clearInterval(this.interval);
+	}
+
+	render(): JSX.Element {
+		return <div className="clock-component">
+			<div className="time">
+				{this.state.time}
+			</div>
+		</div>;
+	}
+
+}
+
+
+export default Clock;

src/style/clock.scss

@@ -0,0 +1,8 @@
+.clock-component{
+
+
+	.time{
+		font-size: 10em;
+		text-align: center;
+	}
+}

src/style/default.scss

@@ -9,5 +9,5 @@ body {
 }
 
 .center-wrapper{
-	margin-top: 25%;
+	margin-top: 15%;
 }