calendar

src/assets/icons/stroke-left-black.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="22" viewBox="0 0 12 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6095 0.402728C12.1302 0.939699 12.1302 1.8103 11.6095 2.34727L3.21895 11L11.6095 19.6527C12.1302 20.1897 12.1302 21.0603 11.6095 21.5973C11.0888 22.1342 10.2446 22.1342 9.72386 21.5973L0.390523 11.9723C-0.130176 11.4353 -0.130176 10.5647 0.390523 10.0277L9.72386 0.402728C10.2446 -0.134243 11.0888 -0.134243 11.6095 0.402728Z" fill="#272727"/>
+</svg>

src/assets/icons/stroke-right-black.svg

@@ -0,0 +1,4 @@
+
+<svg width="12" height="22" viewBox="0 0 12 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.390524 21.5973C-0.130175 21.0603 -0.130175 20.1897 0.390524 19.6527L8.78105 11L0.390523 2.34727C-0.130176 1.8103 -0.130176 0.939699 0.390523 0.402729C0.911222 -0.134243 1.75544 -0.134243 2.27614 0.402729L11.6095 10.0277C12.1302 10.5647 12.1302 11.4353 11.6095 11.9723L2.27614 21.5973C1.75544 22.1342 0.911223 22.1342 0.390524 21.5973Z" fill="#272727"/>
+</svg>

src/components/aside/Aside.tsx

@@ -1,8 +1,9 @@
 // Components
-import SectionTitle from '../global/SectionTitle';
-import AsideNews from './AsideNews';
+import SectionTitle from "../global/SectionTitle";
+import AsideNews from "./AsideNews";
+import Calendar from "./Calendar";
 // Images
-import placeholder2 from '../../assets/images/placeholder2.png';
+import placeholder2 from "../../assets/images/placeholder2.png";
 
 const Aside = () => {
   return (
@@ -47,6 +48,9 @@ const Aside = () => {
           />
         </div>
       </div>
+      <div className="aside-calendar">
+        <Calendar />
+      </div>
     </div>
   );
 };

src/components/aside/Calendar.tsx

@@ -0,0 +1,17 @@
+// Modules
+import { useState } from "react";
+import { Calendar as ReactCalendar } from "react-calendar";
+import { LazyLoadComponent } from "react-lazy-load-image-component";
+
+const Calendar = () => {
+  const [value, onChange] = useState(new Date());
+  return (
+    <div className="calendar">
+      <LazyLoadComponent useIntersectionObserver>
+        <ReactCalendar value={value} onChange={onChange} />
+      </LazyLoadComponent>
+    </div>
+  );
+};
+
+export default Calendar;

src/styles/_aside.scss

@@ -1,13 +1,16 @@
 .aside {
-  background: $gray;
-  padding: 2.4rem 1.6rem;
   height: fit-content;
+  display: flex;
+  flex-direction: column;
+  gap: 5.6rem;
 }
 
 .aside-wrapper {
   display: flex;
   flex-direction: column;
   gap: 3.2rem;
+  background: $gray;
+  padding: 2.4rem 1.6rem;
 }
 
 .aside-inner {
@@ -15,3 +18,9 @@
   flex-direction: column;
   gap: 2.4rem;
 }
+
+.aside-calendar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/styles/_calendar.scss

@@ -0,0 +1,103 @@
+.calendar {
+  display: flex;
+  justify-content: center;
+}
+
+.react-calendar__navigation__label {
+  font-weight: bold;
+  font-size: 1.8rem;
+}
+
+.react-calendar__navigation__arrow.react-calendar__navigation__next2-button,
+.react-calendar__navigation__arrow.react-calendar__navigation__prev2-button {
+  display: none;
+}
+
+.react-calendar__navigation__label__labelText.react-calendar__navigation__label__labelText--from {
+  text-transform: capitalize;
+}
+
+.react-calendar {
+  border: none;
+}
+
+.react-calendar__month-view__weekdays {
+  display: grid !important;
+  grid-template-columns: repeat(7, 1fr);
+  column-gap: 0.8rem;
+}
+.react-calendar__month-view__weekdays__weekday {
+  text-transform: capitalize;
+  color: $main;
+  font-size: 1.6rem;
+  font-weight: bold;
+  margin-bottom: 1.6rem;
+  padding: 0;
+}
+
+.react-calendar__tile.react-calendar__month-view__days__day {
+  font-size: 1.6rem;
+  color: $black;
+}
+
+.react-calendar__tile.react-calendar__month-view__days__day.react-calendar__month-view__days__day--neighboringMonth {
+  color: $gray-dark;
+}
+
+.react-calendar__tile--active {
+  color: $white !important;
+}
+
+.react-calendar__month-view__days__day--weekend {
+  color: $black;
+}
+
+.react-calendar__month-view__days {
+  display: grid !important;
+  grid-template-columns: repeat(7, 1fr);
+  column-gap: 2.4rem;
+  row-gap: 1.1rem;
+}
+
+.react-calendar__tile {
+  width: 3rem;
+  height: 3rem;
+  padding: 0.8rem;
+  border-radius: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.react-calendar__tile--now:enabled:hover {
+  background: $red;
+  color: $white !important;
+}
+
+.react-calendar__tile--now:enabled:focus {
+  background: $blue;
+  color: $white !important;
+}
+
+.react-calendar__tile--now {
+  background: $red;
+  color: $white !important;
+}
+
+.react-calendar__navigation__arrow.react-calendar__navigation__next-button {
+  display: block;
+  background: url("../assets/icons/stroke-right-black.svg") no-repeat center;
+  color: transparent;
+}
+
+.react-calendar__navigation__arrow.react-calendar__navigation__prev-button {
+  display: block;
+  background: url("../assets/icons/stroke-left-black.svg") no-repeat center;
+  color: transparent;
+}
+
+.react-calendar__year-view__months__month,
+.react-calendar__decade-view__years__year,
+.react-calendar__century-view__decades__decade {
+  border-radius: 0;
+}

src/styles/_general.scss

@@ -46,6 +46,11 @@ abbr[title] {
   text-decoration: none;
 }
 
+abbr {
+  width: 2rem;
+  text-align: center;
+}
+
 h1,
 h2,
 h3,
@@ -62,3 +67,13 @@ h6 {
   padding: 0 4rem;
   margin: 0 auto;
 }
+
+.react-calendar__month-view__days {
+  column-gap: 1.8rem;
+}
+
+.react-calendar__tile {
+  abbr {
+    width: 100%;
+  }
+}

src/styles/_variables.scss

@@ -4,3 +4,5 @@ $white: #ffffff;
 $gray: #f1f1f1;
 $gray-dark: #a6a6a6;
 $body: #5a5a5a;
+$red: #e53131;
+$blue: #3c7ec0;

src/styles/style.scss

@@ -15,3 +15,4 @@
 @import "./news-section";
 @import "./news-article";
 @import "./category";
+@import "./calendar";