Calendar component

src/components/Calendar.jsx

@@ -0,0 +1,26 @@
+import styles from '@styles/components/Calendar.module.css'
+
+const weekDays = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN']
+
+const Stats = ({ data, days, firstDayOfWeek }) => (
+  <div className={styles.calendar}>
+    {weekDays.map(day => <span key={day} className={styles.weekDay}>{day}</span>)}
+    {days.map(date => {
+      const day = parseInt(date.split('-')[2])
+      const dayData = data[date] && `${data[date][1]} / ${data[date][0]}`
+
+      return (
+        <div
+          key={date}
+          className={styles[dayData ? 'filled' : 'empty']}
+          style={day === 1 ? { gridColumnStart: firstDayOfWeek } : {}}
+        >
+          <span className={styles.dayNumber}>{day}</span>
+          {dayData && <span className={styles.dayData}>{dayData}</span>}
+        </div>
+      )
+    })}
+  </div>
+)
+
+export default Stats

src/styles/components/Calendar.module.css

@@ -0,0 +1,42 @@
+.calendar {
+  display: grid;
+  gap: 0.4vh;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.weekDay {
+  color: var(--color-first);
+  font-size: 2vh;
+  font-weight: 600;
+  padding: 3vh 0;
+  text-align: center;
+}
+
+.filled, .empty {
+  align-items: center;
+  box-sizing: border-box;
+  color: var(--color-white);
+  display: flex;
+  flex-direction: column;
+  height: 9vh;
+  justify-content: space-between;
+  padding: 1vh 0.25vh;
+}
+
+.filled {
+  background: var(--color-first);
+}
+
+.empty {
+  background: var(--color-second);
+}
+
+.dayNumber {
+  font-size: 2.5vh;
+  font-weight: 600;
+}
+
+.dayData {
+  font-size: 1.7vh;
+  font-weight: 600;
+}