From c5a01b977982d71df1a166d3c0cad2d68d6d54b1 Mon Sep 17 00:00:00 2001 From: Lanskikh Date: Mon, 1 Jul 2024 20:04:12 +0500 Subject: [PATCH] marquee todo... --- package.json | 3 +- src/assets/cross.svg | 3 + src/assets/cube.svg | 8 +- src/components/Layout/Header.tsx | 2 +- src/components/Layout/Navbar.tsx | 140 +++++++++++++++++++++++++------ src/components/Main/Marquee.tsx | 2 +- src/components/Main/Products.tsx | 37 ++++++-- src/store/language.ts | 28 +++++++ src/ui/MiniTitle.tsx | 2 +- src/ui/NavLink.tsx | 2 +- yarn.lock | 12 +++ 11 files changed, 198 insertions(+), 41 deletions(-) create mode 100644 src/assets/cross.svg create mode 100644 src/store/language.ts diff --git a/package.json b/package.json index 91610a7..be63aa8 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,8 @@ "dependencies": { "react": "^18.3.1", "react-dom": "^18.3.1", - "react-router-dom": "^6.23.1" + "react-router-dom": "^6.23.1", + "zustand": "^4.5.4" }, "devDependencies": { "@types/react": "^18.3.3", diff --git a/src/assets/cross.svg b/src/assets/cross.svg new file mode 100644 index 0000000..89f4668 --- /dev/null +++ b/src/assets/cross.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/cube.svg b/src/assets/cube.svg index 60a62b4..f179c6c 100644 --- a/src/assets/cube.svg +++ b/src/assets/cube.svg @@ -1,5 +1,5 @@ - - - - + + + + diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx index 8079b5f..9e11608 100644 --- a/src/components/Layout/Header.tsx +++ b/src/components/Layout/Header.tsx @@ -31,7 +31,7 @@ export function Header() { для обучения сотрудников -

+

Помогаем сократить затраты на обучение, повысить безопасность и производительность

diff --git a/src/components/Layout/Navbar.tsx b/src/components/Layout/Navbar.tsx index 40e9c6c..a0c5ddb 100644 --- a/src/components/Layout/Navbar.tsx +++ b/src/components/Layout/Navbar.tsx @@ -1,32 +1,120 @@ +import { useState } from 'react'; import { NavLink } from '../../ui/NavLink'; +import { Link } from 'react-router-dom'; +import { Lang, useLang } from '../../store/language'; export function Navbar() { + const [menuOpen, setMenuOpen] = useState(false); + const { value: lang } = useLang(); + return ( - + <> + + {menuOpen && ( +
setMenuOpen(false)} + className="absolute w-full min-[1350px]:hidden tablet:max-[1350px]:max-w-[340px] right-0 border-x border-b border-[#3D425C] animate-[smooth-appear_1s_ease_forwards] duration-1000" + > + + + + +
+ + + +
+
+ )} + + ); +} + +function BurgerLink({ text, route }: { text: string; route: string }) { + return ( + + + {text} + + ); +} + +function ChooseLang({ lang }: { lang: 'RU' | 'EN' }) { + const { updateLang, value } = useLang(); + return ( +
+ +
+ ); +} + +function LangToggler({ lang }: { lang: Lang }) { + const [open, setOpen] = useState(false); + return ( +
+ + {open && ( +
setOpen(false)} + > + + +
+ )} +
); } diff --git a/src/components/Main/Marquee.tsx b/src/components/Main/Marquee.tsx index 974c807..bd5bbbf 100644 --- a/src/components/Main/Marquee.tsx +++ b/src/components/Main/Marquee.tsx @@ -1,6 +1,6 @@ export function Marquee() { return ( -
+
diff --git a/src/components/Main/Products.tsx b/src/components/Main/Products.tsx index 5bc41c0..c818f16 100644 --- a/src/components/Main/Products.tsx +++ b/src/components/Main/Products.tsx @@ -1,6 +1,9 @@ +import { useState } from 'react'; import { MiniTitle } from '../../ui/MiniTitle'; export function Products() { + const [curTab, setCurTab] = useState(0); + return (

@@ -21,18 +24,40 @@ export function Products() {

- - - + setCurTab(0)} + text="Промышленные тренажеры" + /> + setCurTab(1)} + text="Симуляторы управления техникой" + /> + setCurTab(2)} + text="Тренажеры для учебных заведений" + />
); } -function TabButton({ text }: { text: string }) { +function TabButton({ + text, + className, + onClick, +}: { text: string } & React.HTMLProps) { return ( - ); @@ -74,7 +99,7 @@ function TeachingItems() {
-
+

Промышленные тренажеры виртуальной реальности

diff --git a/src/store/language.ts b/src/store/language.ts new file mode 100644 index 0000000..9db6f6e --- /dev/null +++ b/src/store/language.ts @@ -0,0 +1,28 @@ +import { create } from 'zustand'; +import { devtools, persist } from 'zustand/middleware'; + +export type Lang = 'RU' | 'EN'; + +export const useLang = create<{ + value: Lang; + updateLang: (lang: Lang) => void; +}>()( + devtools( + persist( + set => ({ + value: JSON.parse(localStorage.getItem('lang') ?? '{}').state ?? 'RU', + updateLang: (lang: Lang) => { + localStorage.setItem( + 'lang', + JSON.stringify({ state: { value: lang } }), + ); + set({ value: lang }); + }, + }), + { + name: 'lang', + partialize: state => ({ value: state.value }), + }, + ), + ), +); diff --git a/src/ui/MiniTitle.tsx b/src/ui/MiniTitle.tsx index 220d302..25217b8 100644 --- a/src/ui/MiniTitle.tsx +++ b/src/ui/MiniTitle.tsx @@ -2,7 +2,7 @@ export function MiniTitle({ text }: { text: string }) { return (

diff --git a/src/ui/NavLink.tsx b/src/ui/NavLink.tsx index 928c827..b13307c 100644 --- a/src/ui/NavLink.tsx +++ b/src/ui/NavLink.tsx @@ -4,7 +4,7 @@ export function NavLink({ text, route }: { text: string; route: string }) { return ( diff --git a/yarn.lock b/yarn.lock index d56c239..3433074 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2093,6 +2093,11 @@ uri-js@^4.2.2: dependencies: punycode "^2.1.0" +use-sync-external-store@1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a" + integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA== + util-deprecate@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" @@ -2158,3 +2163,10 @@ yocto-queue@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== + +zustand@^4.5.4: + version "4.5.4" + resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.5.4.tgz#63abdd81edfb190bc61e0bbae045cc4d52158a05" + integrity sha512-/BPMyLKJPtFEvVL0E9E9BTUM63MNyhPGlvxk1XjrfWTUlV+BR8jufjsovHzrtR6YNcBEcL7cMHovL1n9xHawEg== + dependencies: + use-sync-external-store "1.2.0"