feat: render apps in recording

src/pages/Recording/Recording.css

@@ -63,4 +63,45 @@
 
 .recording__tabs .active {
     color: var(--primary-color);
+}
+
+.apps__filter__messengers {
+    width: 100%;
+    overflow-x: auto;
+    display: flex;
+    gap: 0.5rem;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+.apps__filter__messenger {
+    min-width: 85px;
+    min-height: 85px;
+    max-width: 100px;
+    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;
+}
+
+.apps__filter__messenger p {
+    font-size: 0.65rem;
+    text-align: center;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+}
+
+
+.apps__filter__messenger.selected {
+    background-color: var(--primary-color);
+    color: var(--on-text-color);
 }
\ No newline at end of file

src/pages/Recording/Recording.tsx

-import React, { useState } from "react";
+import React, { useState, type ReactNode } from "react";
 import "./Recording.css";
 import SectionHeader from "../../layouts/SectionHeader";
 import { MdInfoOutline } from "react-icons/md";
 import CButton from "../../components/CButton";
 import { useTranslation } from "react-i18next";
 import { FaMicrophoneLines } from "react-icons/fa6";
-import { FaImage } from "react-icons/fa";
+import { FaImage, FaPhone, FaRegFileAlt } from "react-icons/fa";
+import { SiTelegram } from "react-icons/si";
+import { IoLogoWhatsapp } from "react-icons/io5";
+import { BiWorld } from "react-icons/bi";
+
+interface IApp {
+  id: number;
+  name: string;
+  icon: ReactNode;
+}
+
+const APPS: IApp[] = [
+  {
+    id: 20,
+    name: "Telegram",
+    icon: <SiTelegram className="app__icon" />,
+  },
+  {
+    id: 7,
+    name: "WhatsApp",
+    icon: <IoLogoWhatsapp className="app__icon" />,
+  },
+  {
+    id: 1,
+    name: "Environment",
+    icon: <BiWorld className="app__icon" />,
+  },
+  {
+    id: 13,
+    name: "Audio Files",
+    icon: <FaRegFileAlt className="app__icon" />,
+  },
+  {
+    id: 2,
+    name: "Phone Calls",
+    icon: <FaPhone className="app__icon" />,
+  },
+];
 
 const Recording: React.FC = () => {
+  const [selectedApp, setSelectedApp] = useState<IApp>(APPS[0]);
   const [selectedTab, setSelectedTab] = useState<"audio" | "image">("audio");
   const { t } = useTranslation();
 
@@ -32,6 +70,25 @@ const Recording: React.FC = () => {
                 {t("common.selectAppAndDates")}
               </p>
 
+              <div className="apps__filter__messengers">
+                {APPS.map((app) => {
+                  const isSelected = selectedApp?.id === app.id;
+
+                  return (
+                    <div
+                      key={app.id}
+                      className={`apps__filter__messenger ${
+                        isSelected ? "selected" : ""
+                      }`}
+                      onClick={() => setSelectedApp(app)}
+                    >
+                      {app.icon}
+                      <p>{app.name}</p>
+                    </div>
+                  );
+                })}
+              </div>
+
               <div className="recording__filter__dates">
                 <div className="recording__filter__date">
                   <label htmlFor="from">{t("common.from")}</label>