feat: render messengers

src/pages/Messengers/Messengers.css

@@ -30,6 +30,38 @@
     font-weight: bold;
 }
 
+.messengers__filter__messengers {
+    width: 100%;
+    overflow-x: auto;
+    display: flex;
+    gap: 0.5rem;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+.messengers__filter__messenger {
+    min-width: 85px;
+    min-height: 85px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1rem;
+    border-radius: 10px;
+    background: var(--content-bg-color);
+    cursor: pointer;
+}
+
+.messengers__filter__messenger p {
+    font-size: 0.875rem;
+}
+
+.messengers__filter__messenger.selected {
+    background-color: var(--primary-color);
+    color: var(--on-text-color);
+}
+
 .messengers__filter__dates {
     display: flex;
     justify-content: space-between;

src/pages/Messengers/Messengers.tsx

-import React from "react";
+import React, { useState } from "react";
 import "./Messengers.css";
 import SectionHeader from "../../layouts/SectionHeader";
 import { MdInfoOutline } from "react-icons/md";
 import CButton from "../../components/CButton";
+import { MESSENGERS, type IMessenger } from "../../constants/messengers";
 
 const Messengers: React.FC = () => {
+  const [selectedMessenger, setSelectedMessenger] = useState<IMessenger>(
+    MESSENGERS[0]
+  );
+
   return (
     <div className="messengers wrapper">
       <SectionHeader to="/home" />
@@ -20,7 +25,26 @@ const Messengers: React.FC = () => {
         </div>
 
         <div className="messengers__filter">
-          <p className="messengers__filter__title">Select Dates</p>
+          <p className="messengers__filter__title">Select App & Dates</p>
+
+          <div className="messengers__filter__messengers">
+            {MESSENGERS.map((messenger) => {
+              const isSelected = selectedMessenger?.id === messenger.id;
+
+              return (
+                <div
+                  key={messenger.id}
+                  className={`messengers__filter__messenger ${
+                    isSelected ? "selected" : ""
+                  }`}
+                  onClick={() => setSelectedMessenger(messenger)}
+                >
+                  {messenger.icon}
+                  <p>{messenger.name}</p>
+                </div>
+              );
+            })}
+          </div>
 
           <div className="messengers__filter__dates">
             <div className="messengers__filter__date">