feat: add cinfo

src/components/CDeviceSelect/CDeviceSelect.css

@@ -61,6 +61,14 @@
     color: var(--on-text-color);
 }
 
+.cdeviceselect-info {
+    background: var(--light-gray-color);
+}
+
+.cdeviceselect-info:hover {
+    background: var(--light-gray-color);
+}
+
 .cdeviceselect-arrow {
     margin-left: auto;
     font-size: 0.8rem;

src/components/CDeviceSelect/CDeviceSelect.tsx

@@ -2,6 +2,8 @@ import React, { useEffect, useRef, useState } from "react";
 import "./CDeviceSelect.css";
 import type { CDeviceSelectProps } from "./CDeviceSelect.types";
 import { FaChevronDown, FaChevronUp } from "react-icons/fa";
+import { useTranslation } from "react-i18next";
+import CInfo from "../CInfo";
 
 const CDeviceSelect: React.FC<CDeviceSelectProps> = ({
   devices,
@@ -13,7 +15,9 @@ const CDeviceSelect: React.FC<CDeviceSelectProps> = ({
   placeholder = "Select Device",
 }) => {
   const [open, setOpen] = useState(false);
+  const [isOpenInfoModal, setIsOpenInfoModal] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
+  const { t } = useTranslation();
 
   useEffect(() => {
     const handleClickOutside = (e: MouseEvent) => {
@@ -25,6 +29,10 @@ const CDeviceSelect: React.FC<CDeviceSelectProps> = ({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
 
+  const toggleInfoModal = () => {
+    setIsOpenInfoModal((prev) => !prev);
+  };
+
   return (
     <>
       <div
@@ -59,9 +67,18 @@ const CDeviceSelect: React.FC<CDeviceSelectProps> = ({
                 <span>{device.name}</span>
               </div>
             ))}
+
+            <div
+              className="cdeviceselect-option cdeviceselect-info"
+              onClick={toggleInfoModal}
+            >
+              <span>{t("help.howToStart")}</span>
+            </div>
           </div>
         )}
       </div>
+
+      <CInfo isOpen={isOpenInfoModal} onToggle={toggleInfoModal} />
     </>
   );
 };

src/components/CInfo/CInfo.tsx

+import React from "react";
+import CModal from "../CModal";
+import { useTranslation } from "react-i18next";
+import CButton from "../CButton";
+
+interface CInfoProps {
+  isOpen: boolean;
+  onToggle: () => void;
+}
+
+const CInfo: React.FC<CInfoProps> = ({ isOpen, onToggle }) => {
+  const { t } = useTranslation();
+
+  const share = () => {
+    const message = "https://t.me/CyberNannyAppBot";
+
+    if (window.Telegram?.WebApp?.openTelegramLink) {
+      window.Telegram.WebApp.openTelegramLink(
+        `https://t.me/share/url?url=${encodeURIComponent(message)}`
+      );
+    }
+  };
+
+  return (
+    <CModal
+      isOpen={isOpen}
+      onToggle={onToggle}
+      content={
+        <div className="modal__box">
+          <h3 className="modal__box__title">{t("help.howToStart")}</h3>
+          <div>
+            <h4>{t("help.parentPhone")}</h4>
+            <p>{t("help.parentPhoneDesc1")}</p>
+            <p>{t("help.parentPhoneDesc2")}</p>
+            <p>{t("help.parentPhoneDesc3")}</p>
+          </div>
+
+          <div>
+            <h4>{t("help.childPhone")}</h4>
+            <p>{t("help.childPhoneDesc1")}</p>
+            <p>{t("help.childPhoneDesc2")}</p>
+            <p>{t("help.childPhoneDesc3")}</p>
+          </div>
+
+          <br />
+
+          <p>{t("help.howToStartDesc")}</p>
+
+          <a
+            href="https://apps.apple.com/uz/app/%D0%BA%D0%B8%D0%B1%D0%B5%D1%80%D0%BD%D1%8F%D0%BD%D1%8F/id6740760058"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {t("common.downloadForIos")}
+          </a>
+
+          <a
+            href="https://play.google.com/store/apps/details?id=com.thecybernanny.adroapp"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {t("common.downloadForAndroid")}
+          </a>
+
+          <div className="modal__box__actions">
+            <CButton
+              title={t("button.share")}
+              variant="primary"
+              onClick={share}
+            />
+
+            <CButton
+              title={t("button.ok")}
+              onClick={onToggle}
+              variant="primary"
+            />
+          </div>
+        </div>
+      }
+    />
+  );
+};
+
+export default CInfo;

src/components/CInfo/index.ts

+export { default } from "./CInfo";

src/layouts/Header/Header.tsx

@@ -27,7 +27,7 @@ import CDeviceSelect from "../../components/CDeviceSelect";
 import { logout } from "../../stores/slices/authSlice";
 import TheCybernanny from "../../assets/images/TheCybernanny.png";
 import CButton from "../../components/CButton";
-import CModal from "../../components/CModal";
+import CInfo from "../../components/CInfo";
 
 const Header: React.FC = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
@@ -60,16 +60,6 @@ const Header: React.FC = () => {
     setIsOpenInfoModal((prev) => !prev);
   };
 
-  const share = () => {
-    const message = "https://t.me/CyberNannyAppBot";
-
-    if (window.Telegram?.WebApp?.openTelegramLink) {
-      window.Telegram.WebApp.openTelegramLink(
-        `https://t.me/share/url?url=${encodeURIComponent(message)}`
-      );
-    }
-  };
-
   useEffect(() => {
     if (isSidebarOpen) {
       document.addEventListener("mousedown", handleOutsideClick);
@@ -207,62 +197,7 @@ const Header: React.FC = () => {
         </div>
       )}
 
-      <CModal
-        isOpen={isOpenInfoModal}
-        onToggle={toggleInfoModal}
-        content={
-          <div className="modal__box">
-            <h3 className="modal__box__title">{t("help.howToStart")}</h3>
-            <div>
-              <h4>{t("help.parentPhone")}</h4>
-              <p>{t("help.parentPhoneDesc1")}</p>
-              <p>{t("help.parentPhoneDesc2")}</p>
-              <p>{t("help.parentPhoneDesc3")}</p>
-            </div>
-
-            <div>
-              <h4>{t("help.childPhone")}</h4>
-              <p>{t("help.childPhoneDesc1")}</p>
-              <p>{t("help.childPhoneDesc2")}</p>
-              <p>{t("help.childPhoneDesc3")}</p>
-            </div>
-
-            <br />
-
-            <p>{t("help.howToStartDesc")}</p>
-
-            <a
-              href="https://apps.apple.com/uz/app/%D0%BA%D0%B8%D0%B1%D0%B5%D1%80%D0%BD%D1%8F%D0%BD%D1%8F/id6740760058"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {t("common.downloadForIos")}
-            </a>
-
-            <a
-              href="https://play.google.com/store/apps/details?id=com.thecybernanny.adroapp"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {t("common.downloadForAndroid")}
-            </a>
-
-            <div className="modal__box__actions">
-              <CButton
-                title={t("button.share")}
-                variant="primary"
-                onClick={share}
-              />
-
-              <CButton
-                title={t("button.ok")}
-                onClick={toggleInfoModal}
-                variant="primary"
-              />
-            </div>
-          </div>
-        }
-      />
+      <CInfo isOpen={isOpenInfoModal} onToggle={toggleInfoModal} />
     </>
   );
 };

src/layouts/SectionHeader/SectionHeader.tsx

-import React from "react";
+import React, { useState } from "react";
 import "./SectionHeader.css";
 import { Link, useNavigate } from "react-router-dom";
 import {
@@ -10,12 +10,15 @@ import CDeviceSelect from "../../components/CDeviceSelect";
 import { setSelectedDevice } from "../../stores/slices/deviceSlice";
 import { BiArrowBack } from "react-icons/bi";
 import { useTranslation } from "react-i18next";
+import CButton from "../../components/CButton";
+import CInfo from "../../components/CInfo";
 
 interface SectionHeaderProps {
   to?: string;
 }
 
 const SectionHeader: React.FC<SectionHeaderProps> = ({ to }) => {
+  const [isOpenInfoModal, setIsOpenInfoModal] = useState(false);
   const { devices, selectedDevice } = useAppSelector(
     (state: RootState) => state.device
   );
@@ -30,6 +33,10 @@ const SectionHeader: React.FC<SectionHeaderProps> = ({ to }) => {
     }
   };
 
+  const toggleInfoModal = () => {
+    setIsOpenInfoModal((prev) => !prev);
+  };
+
   return (
     <div className="sectionheader">
       <Link
@@ -40,15 +47,26 @@ const SectionHeader: React.FC<SectionHeaderProps> = ({ to }) => {
         <BiArrowBack className="sectionheader__link__icon" />
       </Link>
 
-      <CDeviceSelect
-        devices={devices}
-        selectedDevice={selectedDevice}
-        onDeviceChange={(name) => dispatch(setSelectedDevice(name))}
-        disabled={!devices.length}
-        style={{ width: "220px" }}
-        className="header__device-select"
-        placeholder={t("common.selectDevice")}
-      />
+      {devices.length > 0 ? (
+        <CDeviceSelect
+          devices={devices}
+          selectedDevice={selectedDevice}
+          onDeviceChange={(name) => dispatch(setSelectedDevice(name))}
+          disabled={!devices.length}
+          style={{ width: "220px" }}
+          className="header__device-select"
+          placeholder={t("common.selectDevice")}
+        />
+      ) : (
+        <CButton
+          title={t("help.howToStart")}
+          onClick={toggleInfoModal}
+          variant="primary"
+          style={{ width: "114.66px" }}
+        />
+      )}
+
+      <CInfo isOpen={isOpenInfoModal} onToggle={toggleInfoModal} />
     </div>
   );
 };