add timer section

.env

@@ -0,0 +1 @@
+DATE_OF_THE_EXAM=2021-06-22T00:00:00.000Z

src/features/IndexPage/IndexPage.tsx

@@ -10,16 +10,19 @@ import { QUERY_PROFESSIONS } from './queries';
 
 import Layout from 'common/Layout/Layout';
 import Header from './components/Header/Header';
+import Timer from './components/Timer/Timer';
 
 interface IndexPageProps {
   professions: Profession[];
   qualifications: Qualification[];
+  dateOfTheExam: string;
 }
 
-const IndexPage = ({ qualifications }: IndexPageProps) => {
+const IndexPage = ({ qualifications, dateOfTheExam }: IndexPageProps) => {
   return (
     <Layout padding={false}>
       <Header qualifications={qualifications} />
+      <Timer dateOfTheExam={dateOfTheExam} />
     </Layout>
   );
 };
@@ -37,7 +40,11 @@ const getQualificationsFromProfessions = (
 };
 
 export const getStaticProps: GetStaticProps = async () => {
-  const pageProps: IndexPageProps = { professions: [], qualifications: [] };
+  const pageProps: IndexPageProps = {
+    professions: [],
+    qualifications: [],
+    dateOfTheExam: new Date(process.env.DATE_OF_THE_EXAM ?? 0).toISOString(),
+  };
   const client = createClient();
 
   try {

src/features/IndexPage/components/Section/Section.tsx

@@ -15,14 +15,14 @@ export enum BgColor {
 }
 
 export interface SectionProps extends React.HTMLAttributes<HTMLElement> {
-  size: Size;
-  bgColor: BgColor;
-  className: string;
+  size?: Size;
+  bgColor?: BgColor;
+  className?: string;
 }
 
 const Section = ({
-  size,
-  bgColor,
+  size = Size.Medium,
+  bgColor = BgColor.Primary,
   className,
   children,
   ...rest

src/features/IndexPage/components/Timer/Timer.tsx

@@ -0,0 +1,75 @@
+import { polishPlurals } from 'polish-plurals';
+import { useCountdown } from 'libs/hooks';
+
+import { makeStyles } from '@material-ui/core/styles';
+import { Container, Typography, Grid } from '@material-ui/core';
+import Section from '../Section/Section';
+
+export interface TimerProps {
+  dateOfTheExam: Date | string;
+}
+
+const Timer = ({ dateOfTheExam }: TimerProps) => {
+  const classes = useStyles();
+  const { days, minutes, hours, seconds } = useCountdown(
+    new Date(dateOfTheExam)
+  );
+
+  return (
+    <Section className={classes.textAlignCenter}>
+      <Container>
+        <Typography variant="h2" gutterBottom>
+          Do najbliższej sesji egzaminacyjnej pozostało
+        </Typography>
+        <Grid container spacing={2}>
+          {[
+            {
+              number: days,
+              text: polishPlurals('dzień', 'dni', 'dni', days),
+            },
+            {
+              number: hours,
+              text: polishPlurals('godzina', 'godziny', 'godzin', hours),
+            },
+            {
+              number: minutes,
+              text: polishPlurals('minuta', 'minuty', 'minut', minutes),
+            },
+            {
+              number: seconds,
+              text: polishPlurals('sekunda', 'sekundy', 'sekund', seconds),
+            },
+          ].map(({ number, text }) => (
+            <Grid key={text} item xs={6} sm={3}>
+              <Typography
+                variant="h3"
+                component="p"
+                className={classes.number}
+                gutterBottom
+              >
+                {number}
+              </Typography>
+              <Typography variant="h4" component="h3">
+                {text}
+              </Typography>
+            </Grid>
+          ))}
+        </Grid>
+      </Container>
+    </Section>
+  );
+};
+
+const useStyles = makeStyles(theme => ({
+  textAlignCenter: {
+    textAlign: 'center',
+  },
+  number: {
+    padding: theme.spacing(2),
+    border: `1px solid #fff`,
+    borderRadius: 10,
+    display: 'inline-block',
+  },
+}));
+
+export default Timer;

src/libs/hooks/useCountdown.ts

@@ -16,8 +16,8 @@ const calculateDifference = (
     days: difference > 0 ? Math.floor(difference / (1000 * 60 * 60 * 24)) : 0,
     hours:
       difference > 0 ? Math.floor((difference / (1000 * 60 * 60)) % 24) : 0,
-    minutes: difference ? Math.floor((difference / 1000 / 60) % 60) : 0,
-    seconds: difference ? Math.floor((difference / 1000) % 60) : 0,
+    minutes: difference > 0 ? Math.floor((difference / 1000 / 60) % 60) : 0,
+    seconds: difference > 0 ? Math.floor((difference / 1000) % 60) : 0,
   };
 };