Browser Extension logic

searching-front/app/core/components/Footer/BrowserLogo.tsx

@@ -0,0 +1,3 @@
+export default function ({className}) {
+    return <svg className={className} width="800px" height="800px" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><rect fill="#ffffff" height="60" rx="10" width="60"/><circle cx="30" cy="30" fill="#c1f7fd" r="22"/><ellipse cx="30" cy="30" fill="#c1f7fd" rx="8" ry="22"/><path d="M30,53.5c-6.171,0-9.5-12.108-9.5-23.5S23.829,6.5,30,6.5,39.5,18.608,39.5,30,36.171,53.5,30,53.5Zm0-44c-2.714,0-6.5,7.8-6.5,20.5S27.286,50.5,30,50.5s6.5-7.8,6.5-20.5S32.714,9.5,30,9.5Z" fill="#7bcdd1"/><path d="M50,23.5H10a1.5,1.5,0,0,1,0-3H50a1.5,1.5,0,0,1,0,3Z" fill="#7bcdd1"/><path d="M50,39.5H10a1.5,1.5,0,0,1,0-3H50a1.5,1.5,0,0,1,0,3Z" fill="#7bcdd1"/><path d="M30,53.5A23.5,23.5,0,1,1,53.5,30,23.527,23.527,0,0,1,30,53.5Zm0-44A20.5,20.5,0,1,0,50.5,30,20.523,20.523,0,0,0,30,9.5Z" fill="#8d9cf4"/><path d="M8,31.5A1.5,1.5,0,0,1,6.5,30,23.527,23.527,0,0,1,30,6.5a1.5,1.5,0,0,1,0,3A20.523,20.523,0,0,0,9.5,30,1.5,1.5,0,0,1,8,31.5Z" fill="#bec6f4"/></svg>
+}

searching-front/app/core/components/Footer/ChromeLogo.tsx

@@ -0,0 +1,21 @@
+export default function ({className}) {
+    return <svg className={className} xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xmlSpace="preserve">
+        <path fill="#FFFFFF" d="M255.73,383.71c70.3,0,127.3-56.99,127.3-127.3s-56.99-127.3-127.3-127.3s-127.3,56.99-127.3,127.3S185.42,383.71,255.73,383.71z"/>
+        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="283.2852" y1="18.9008" x2="62.8264" y2="400.7473" gradientTransform="matrix(1 0 0 -1 0 514)">
+        <stop  offset="0" style={{ stopColor: "#1E8E3E"}}/>
+        <stop  offset="1" style={{ stopColor: "#34A853"}}/>
+        </linearGradient>
+        <path fill="url(#SVGID_1_)" d="M145.48,320.08L35.26,129.17c-22.35,38.7-34.12,82.6-34.12,127.29s11.76,88.59,34.11,127.29c22.35,38.7,54.49,70.83,93.2,93.17c38.71,22.34,82.61,34.09,127.3,34.08l110.22-190.92v-0.03c-11.16,19.36-27.23,35.44-46.58,46.62c-19.35,11.18-41.3,17.07-63.65,17.07s-44.3-5.88-63.66-17.05C172.72,355.52,156.65,339.44,145.48,320.08z"/>
+        <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="218.5901" y1="2.3333" x2="439.0491" y2="384.1796" gradientTransform="matrix(1 0 0 -1 0 514)">
+        <stop  offset="0" style={{ stopColor: "#FCC934"}}/>
+        <stop  offset="1" style={{ stopColor: "#FBBC04"}}/>
+        </linearGradient>
+        <path fill="url(#SVGID_2_)" d="M365.96,320.08L255.74,510.99c44.69,0.01,88.59-11.75,127.29-34.1c38.7-22.34,70.84-54.48,93.18-93.18c22.34-38.7,34.1-82.61,34.09-127.3c-0.01-44.69-11.78-88.59-34.14-127.28H255.72l-0.03,0.02c22.35-0.01,44.31,5.86,63.66,17.03c19.36,11.17,35.43,27.24,46.61,46.59c11.18,19.35,17.06,41.31,17.06,63.66C383.03,278.77,377.14,300.72,365.96,320.08L365.96,320.08z"/>
+        <path fill="#1A73E8" d="M255.73,357.21c55.66,0,100.78-45.12,100.78-100.78s-45.12-100.78-100.78-100.78s-100.78,45.12-100.78,100.78S200.07,357.21,255.73,357.21z"/>
+        <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="35.2587" y1="353.0303" x2="476.177" y2="353.0303" gradientTransform="matrix(1 0 0 -1 0 514)">
+        <stop  offset="0" style={{ stopColor: "#D93025"}}/>
+        <stop  offset="1" style={{ stopColor: "#EA4335"}}/>
+        </linearGradient>
+        <path fill="url(#SVGID_3_)" d="M255.73,129.14h220.45C453.84,90.43,421.7,58.29,383,35.95C344.3,13.6,300.4,1.84,255.71,1.84c-44.69,0-88.59,11.77-127.29,34.12c-38.7,22.35-70.83,54.5-93.16,93.2l110.22,190.92l0.03,0.02c-11.18-19.35-17.08-41.3-17.08-63.65s5.87-44.31,17.04-63.66c11.17-19.36,27.24-35.43,46.6-46.6C211.42,135.01,233.38,129.13,255.73,129.14z"/>
+    </svg>
+}

searching-front/app/core/components/Footer/Footer.tsx

@@ -7,6 +7,10 @@ import SearchForm from "../SearchForm"
 import ThemeSwitcher from "../ThemeSwitcher/ThemeSwitcher"
 import s from "./styles.module.css"
 import TGLogo from "./TGLogo"
+import { isFirefox, isChrome } from "react-device-detect"
+import FirefoxLogo from "./FirefoxLogo"
+import ChromeLogo from "./ChromeLogo"
+import BrowserLogo from "./BrowserLogo"
 
 
 interface FooterLinkProps {
@@ -28,15 +32,45 @@ const FooterLink = ({href,keyLink,isTg}:FooterLinkProps) => {
   )
 }
 
+const FooterBrowser = ({href,keyLink,isTg}:FooterLinkProps) => {
+  const { t } = useTranslation()
+  const onClick =() => {
+    count(keyLink)
+  }
+
+  let browserIcon;
+  // Логика для выбора иконки в зависимости от браузера
+  if (isFirefox) {
+    browserIcon = <FirefoxLogo className={s.browserIcon}/>;
+    href = "https://addons.mozilla.org/ru/firefox/addon/tonski/";
+  } else if (isChrome) {
+    browserIcon = <ChromeLogo className={s.browserIcon}/>;
+    href = "https://chrome.google.com/webstore/detail/tonski/aemgbcgjfjeonbcipemkkocogjmkafeg";
+  } else {
+    browserIcon = <BrowserLogo className={s.browserIcon}/>; // Если браузер не определен
+  }
+
+  return (
+    <a 
+      onClick={onClick}
+      target="_blank"
+      href={href}
+      className={s.footerBrowserRoot}
+    >
+      {browserIcon} {t(keyLink)}
+    </a>
+  )
+}
+
 const Footer = () => {
   const { t } = useTranslation()
 
   return (
     <div className={s.root}>
       <div className={s.contactsWrapper}>
-      <FooterLink href="https://searchington.t.me/" keyLink="footer.linkAnnouncments" />
-      <FooterLink href="https://ton.ski/access/" keyLink="footer.linkExtensions" />
+      <FooterLink href="https://searchington.t.me/" keyLink="footer.linkAnnouncments" isTg = {true}/>
       <FooterLink href="https://ton.ski/about/" keyLink="footer.linkAbout" />
+      <FooterBrowser href="https://ton.ski/access/" keyLink="footer.linkExtensions" />
       </div>
     </div>
   )

searching-front/app/core/components/Footer/styles.module.css

@@ -12,10 +12,16 @@
   margin-right: 5px;
 }
 
+.browserIcon {
+  width: 10px;
+  height: 10px;
+  margin-right: 5px;
+}
+
 .contactsWrapper {
   flex: 1;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   color: var(--text_secondary);
   max-width: 600px;
 }
@@ -32,3 +38,18 @@
   display: table;
   margin-right: 40px;
 }
+
+.footerBrowserRoot {
+  font-size: 15px;
+  font-weight: 700;
+  text-decoration: none;
+  position: absolute;
+  right: 0;
+  background: var(--footer_link_color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: #0B2349;
+  display: table;
+  text-align: right;
+  margin-right: 40px;
+}

searching-front/package-lock.json

@@ -36,6 +36,7 @@
         "npm": "8.18.0",
         "react": "18.2.0",
         "react-chartjs-2": "4.3.1",
+        "react-device-detect": "2.2.3",
         "react-dom": "18.2.0",
         "react-hook-form": "7.34.2",
         "react-i18next": "11.18.6",
@@ -13766,6 +13767,18 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-device-detect": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-device-detect/-/react-device-detect-2.2.3.tgz",
+      "integrity": "sha512-buYY3qrCnQVlIFHrC5UcUoAj7iANs/+srdkwsnNjI7anr3Tt7UY6MqNxtMLlr0tMBied0O49UZVK8XKs3ZIiPw==",
+      "dependencies": {
+        "ua-parser-js": "^1.0.33"
+      },
+      "peerDependencies": {
+        "react": ">= 0.14.0",
+        "react-dom": ">= 0.14.0"
+      }
+    },
     "node_modules/react-dnd": {
       "version": "14.0.5",
       "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-14.0.5.tgz",
@@ -15862,6 +15875,28 @@
         "node": ">=4.2.0"
       }
     },
+    "node_modules/ua-parser-js": {
+      "version": "1.0.37",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.37.tgz",
+      "integrity": "sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ua-parser-js"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/faisalman"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/faisalman"
+        }
+      ],
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/uc.micro": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
@@ -26477,6 +26512,14 @@
       "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.3.1.tgz",
       "integrity": "sha512-5i3mjP6tU7QSn0jvb8I4hudTzHJqS8l00ORJnVwI2sYu0ihpj83Lv2YzfxunfxTZkscKvZu2F2w9LkwNBhj6xA=="
     },
+    "react-device-detect": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-device-detect/-/react-device-detect-2.2.3.tgz",
+      "integrity": "sha512-buYY3qrCnQVlIFHrC5UcUoAj7iANs/+srdkwsnNjI7anr3Tt7UY6MqNxtMLlr0tMBied0O49UZVK8XKs3ZIiPw==",
+      "requires": {
+        "ua-parser-js": "^1.0.33"
+      }
+    },
     "react-dnd": {
       "version": "14.0.5",
       "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-14.0.5.tgz",
@@ -28054,6 +28097,11 @@
       "integrity": "sha512-C0I1UsrrDHo2fYI5oaCGbSejwX4ch+9Y5jTQELvovfmFkK3HHSZJB8MSJcWLmCUBzQBchCrZ9rMRV6GuNrvGtw==",
       "dev": true
     },
+    "ua-parser-js": {
+      "version": "1.0.37",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.37.tgz",
+      "integrity": "sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ=="
+    },
     "uc.micro": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",

searching-front/package.json

@@ -55,6 +55,7 @@
     "npm": "8.18.0",
     "react": "18.2.0",
     "react-chartjs-2": "4.3.1",
+    "react-device-detect": "2.2.3",
     "react-dom": "18.2.0",
     "react-hook-form": "7.34.2",
     "react-i18next": "11.18.6",