WIP countdown widget

src/App.jsx

@@ -9,6 +9,7 @@ import Maximise from './components/widgets/background/Maximise';
 import Favourite from './components/widgets/background/Favourite';
 import PhotoInformation from './components/widgets/background/PhotoInformation';
 import Date from './components/widgets/time/Date';
+import Countdown from './components/widgets/countdown/Countdown';
 
 import Navbar from './components/widgets/navbar/Navbar';
 
@@ -72,6 +73,7 @@ export default class App extends React.PureComponent {
           <Clock/>
           <Date/>
           <Quote language={language.toasts} languagecode={languagecode} />
+          <Countdown/>
           <PhotoInformation language={language} className={tooltipClassList} />
           <div className='bottom-navbar'>
             <Maximise/>

src/components/widgets/countdown/Countdown.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Countdown from 'react-countdown';
+
+import './countdown.scss';
+
+export default class CountdownWidget extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+        countdown: new Date(localStorage.getItem('birthday')),
+        message: localStorage.getItem('countdownmessage') || 'until tomorrow'
+    };
+  }
+
+  render() {
+    if (localStorage.getItem('countdown') === 'false') return;
+    return <h4 className='countdown'>
+        <Countdown date={this.state.countdown + 10000} onComplete={() => this.setState({ message: 'Today\'s the day!'})} /><br/>
+        {this.state.message}
+    </h4>;
+  }
+}

src/components/widgets/countdown/countdown.scss

@@ -0,0 +1,5 @@
+.countdown {
+    position: absolute;
+    bottom: 0;
+    font-size: 0.95em;
+}