feat: add audio and image recording tabs

src/locales/en/en.json

@@ -75,6 +75,15 @@
     "unBlock": "Unblock",
     "remove": "Remove"
   },
+  "recording": {
+    "audioFiles": "Audio files",
+    "audioFilesEmpty": "No audio files found.",
+    "imageFiles": "Image files",
+    "imageFilesEmpty": "No image files found.",
+    "recordNow": "Record now",
+    "audio": "Audio",
+    "image": "Image"
+  },
   "session": {
     "activeTill": "Active till",
     "noSubscription": "No subscription",

src/locales/ru/ru.json

@@ -75,6 +75,15 @@
     "unBlock": "Разблокировать",
     "remove": "Убрать"
   },
+  "recording": {
+    "audioFiles": "Аудиофайлы",
+    "audioFilesEmpty": "Аудиофайлы не найдены.",
+    "imageFiles": "Изображения",
+    "imageFilesEmpty": "Изображения не найдены.",
+    "recordNow": "Записать сейчас",
+    "audio": "Аудио",
+    "image": "Изображение"
+  },
   "session": {
     "activeTill": "Активен до",
     "noSubscription": "Нет подписки",

src/pages/Recording/Recording.css

@@ -3,7 +3,7 @@
 }
 
 .recording__content {
-    min-height: calc(100vh - 80px);
+    min-height: calc(100vh - 120px);
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -39,4 +39,28 @@
 .recording__filter__date label {
     margin-right: 0.5rem;
     font-weight: bold;
+}
+
+.recording__tabs {
+    width: 95vw;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    position: fixed;
+    bottom: 0;
+    padding: 0.5rem 0;
+    background: var(--background-color);
+}
+
+.recording__tab {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    font-size: 0.875rem;
+}
+
+.recording__tabs .active {
+    color: var(--primary-color);
 }
\ No newline at end of file

src/pages/Recording/Recording.tsx

-import React from "react";
+import React, { useState } 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";
 
 const Recording: React.FC = () => {
-  return (
-    <div className="recording wrapper">
-      <SectionHeader to="/home" />
+  const [selectedTab, setSelectedTab] = useState<"audio" | "image">("audio");
+  const { t } = useTranslation();
 
-      <div className="recording__content">
-        <div>
-          <div className="recording__content__header">
-            <h3>Recording</h3>
-            <MdInfoOutline className="recording__content__header__icon" />
-          </div>
+  const renderTabContent = () => {
+    switch (selectedTab) {
+      case "audio":
+        return (
+          <div className="recording__content">
+            <div>
+              <div className="recording__content__header">
+                <h3>{t("recording.audioFiles")}</h3>
+                <MdInfoOutline className="recording__content__header__icon" />
+              </div>
 
-          <p className="recording__content__empty">No data</p>
-        </div>
+              <p className="recording__content__empty">
+                {t("recording.audioFilesEmpty")}
+              </p>
+            </div>
 
-        <div className="recording__filter">
-          <p className="recording__filter__title">Select Dates</p>
+            <div className="recording__filter">
+              <p className="recording__filter__title">
+                {t("common.selectAppAndDates")}
+              </p>
 
-          <div className="recording__filter__dates">
-            <div className="recording__filter__date">
-              <label htmlFor="from">From</label>
-              <input type="date" id="from" />
+              <div className="recording__filter__dates">
+                <div className="recording__filter__date">
+                  <label htmlFor="from">{t("common.from")}</label>
+                  <input type="date" id="from" />
+                </div>
+
+                <div className="recording__filter__date">
+                  <label htmlFor="to">{t("common.to")}</label>
+                  <input type="date" id="to" />
+                </div>
+              </div>
+
+              <CButton title={t("button.search")} />
             </div>
+          </div>
+        );
+      case "image":
+        return (
+          <div className="recording__content">
+            <div>
+              <div className="recording__content__header">
+                <h3>{t("recording.imageFiles")}</h3>
+                <MdInfoOutline className="recording__content__header__icon" />
+              </div>
 
-            <div className="recording__filter__date">
-              <label htmlFor="to">To</label>
-              <input type="date" id="to" />
+              <p className="recording__content__empty">
+                {t("recording.imageFilesEmpty")}
+              </p>
+            </div>
+
+            <div className="recording__filter">
+              <p className="recording__filter__title">
+                {t("common.selectAppAndDates")}
+              </p>
+
+              <div className="recording__filter__dates">
+                <div className="recording__filter__date">
+                  <label htmlFor="from">{t("common.from")}</label>
+                  <input type="date" id="from" />
+                </div>
+
+                <div className="recording__filter__date">
+                  <label htmlFor="to">{t("common.to")}</label>
+                  <input type="date" id="to" />
+                </div>
+              </div>
+
+              <CButton title={t("button.search")} />
             </div>
           </div>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="recording wrapper">
+      <SectionHeader to="/home" />
+
+      {renderTabContent()}
+
+      <div className="recording__tabs">
+        <div
+          onClick={() => setSelectedTab("audio")}
+          className={`recording__tab ${
+            selectedTab === "audio" ? "active" : ""
+          }`}
+        >
+          <FaMicrophoneLines />
+          <p>{t("recording.audio")}</p>
+        </div>
 
-          <CButton title="Search" />
+        <div
+          onClick={() => setSelectedTab("image")}
+          className={`recording__tab ${
+            selectedTab === "image" ? "active" : ""
+          }`}
+        >
+          <FaImage />
+          <p>{t("recording.image")}</p>
         </div>
       </div>
     </div>