diff --git a/searching-front/app/core/components/Footer/BrowserLogo.tsx b/searching-front/app/core/components/Footer/BrowserLogo.tsx new file mode 100644 index 0000000..0f6cb58 --- /dev/null +++ b/searching-front/app/core/components/Footer/BrowserLogo.tsx @@ -0,0 +1,3 @@ +export default function ({className}) { + return +} \ No newline at end of file diff --git a/searching-front/app/core/components/Footer/ChromeLogo.tsx b/searching-front/app/core/components/Footer/ChromeLogo.tsx new file mode 100644 index 0000000..4d50190 --- /dev/null +++ b/searching-front/app/core/components/Footer/ChromeLogo.tsx @@ -0,0 +1,21 @@ +export default function ({className}) { + return + + + + + + + + + + + + + + + + + + +} \ No newline at end of file diff --git a/searching-front/app/core/components/Footer/FirefoxLogo.tsx b/searching-front/app/core/components/Footer/FirefoxLogo.tsx new file mode 100644 index 0000000..c409c34 --- /dev/null +++ b/searching-front/app/core/components/Footer/FirefoxLogo.tsx @@ -0,0 +1,3 @@ +export default function ({className}) { + return +} \ No newline at end of file diff --git a/searching-front/app/core/components/Footer/Footer.tsx b/searching-front/app/core/components/Footer/Footer.tsx index 555320c..3378d3c 100644 --- a/searching-front/app/core/components/Footer/Footer.tsx +++ b/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 = ; + href = "https://addons.mozilla.org/ru/firefox/addon/tonski/"; + } else if (isChrome) { + browserIcon = ; + href = "https://chrome.google.com/webstore/detail/tonski/aemgbcgjfjeonbcipemkkocogjmkafeg"; + } else { + browserIcon = ; // Если браузер не определен + } + + return ( + + {browserIcon} {t(keyLink)} + + ) +} + const Footer = () => { const { t } = useTranslation() return (
- - + +
) diff --git a/searching-front/app/core/components/Footer/styles.module.css b/searching-front/app/core/components/Footer/styles.module.css index 5c0d18e..dc75be3 100644 --- a/searching-front/app/core/components/Footer/styles.module.css +++ b/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; +} diff --git a/searching-front/package-lock.json b/searching-front/package-lock.json index a9b8482..755bba1 100644 --- a/searching-front/package-lock.json +++ b/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", diff --git a/searching-front/package.json b/searching-front/package.json index b70db67..5c11eea 100644 --- a/searching-front/package.json +++ b/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",