mikhail_lanskikh/graff.training
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

lang store refatoring

Browse Source
This commit is contained in:
Lanskikh
2024-07-19 14:52:49 +05:00
parent 4d5703b71f
commit 30d849bf37
5 changed files with 67 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Layouts/Header.tsx
+10 -10
View File
@@ -18,7 +18,7 @@ import { useWindowWidth } from '../../hooks/useWindowWidth';
export function Header() {
const [menuOpen, setMenuOpen] = useState(false);
const { value: lang } = useLanguageStore();
const { lang } = useLanguageStore();
const setModal = useModalStore(state => state.setModal);
const menuRef = useRef<HTMLDivElement>(null);
@@ -86,8 +86,8 @@ export function Header() {
>
Оставить заявку
</Button>
<ChooseLang lang="RU" />
<ChooseLang lang="EN" />
<ChooseLang currentLang="RU" />
<ChooseLang currentLang="EN" />
</div>
</motion.div>
</header>
@@ -109,19 +109,19 @@ function BurgerAnchor({
);
}
function ChooseLang({ lang }: { lang: 'RU' | 'EN' }) {
const { updateLang, value } = useLanguageStore();
function ChooseLang({ currentLang }: { currentLang: 'RU' | 'EN' }) {
const { setLang, lang } = useLanguageStore();
return (
<button
onClick={() => updateLang(lang)}
onClick={() => setLang(currentLang)}
className={
'min-h-[72px] w-full h-full btn-text font-semibold bg-[#14161F] hover:bg-[#3D425C] border active:bg-[#14161F] ' +
(value === lang
(lang === currentLang
? '[border-image:linear-gradient(to_right,#798FFF,#D375FF)_3]'
: 'border-[#3D425C]')
}
>
{lang}
{currentLang}
</button>
);
}
@@ -150,8 +150,8 @@ function LangToggler({ lang }: { lang: Lang }) {
animate={{ opacity: +open }}
transition={{ duration: 0.2 }}
>
<ChooseLang lang={'RU'} />
<ChooseLang lang={'EN'} />
<ChooseLang currentLang={'RU'} />
<ChooseLang currentLang={'EN'} />
</motion.div>
</div>
);
src/components/icons/LogoIcon.tsx
+20 -20
View File
@@ -9,8 +9,8 @@ export default function LogoIcon({ className = '' }: { className?: string }) {
className={className}
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
fillRule="evenodd"
clipRule="evenodd"
d="M19.9484 39.9998C30.7693 39.9998 39.5413 31.0455 39.5413 19.9999C39.5413 18.6471 39.4098 17.3257 39.159 16.0483H27.3221V23.9784H31.1416C29.5308 28.6896 25.1395 32.0697 19.9747 32.0697C13.4444 32.0697 8.15051 26.6659 8.15051 19.9999C8.15051 13.3339 13.4444 7.93006 19.9747 7.93006V0H19.9484C9.12752 0 0.355469 8.95427 0.355469 19.9999C0.355469 31.0455 9.12752 39.9998 19.9484 39.9998Z"
fill="#798FFF"
/>
@@ -22,67 +22,67 @@ export default function LogoIcon({ className = '' }: { className?: string }) {
opacity="0.3"
d="M17.6704 8.17514C18.4081 8.0323 19.1698 7.95752 19.9489 7.95752V0H19.9222C18.3448 0 16.8103 0.18501 15.3388 0.534682L17.6704 8.17514Z"
fill="black"
fill-opacity="0.6"
fillOpacity="0.6"
/>
<path
opacity="0.3"
d="M7.33869 4.52224L6.11771 22.4818L7.86294 20.7968C7.85258 20.5896 7.84734 20.3811 7.84734 20.1714C7.84734 13.5163 13.1236 8.1127 19.6599 8.03907L11.8217 1.75195C10.2025 2.47338 8.69665 3.40853 7.33869 4.52224Z"
fill="black"
fill-opacity="0.6"
fillOpacity="0.6"
/>
<path
opacity="0.3"
d="M0.356232 20.2268L9.28465 25.1093C8.57786 23.5715 8.18327 21.8572 8.18327 20.0496C8.18327 18.2395 8.57894 16.5229 9.28755 14.9836L6.55266 5.54736C2.73769 9.17808 0.355469 14.3324 0.355469 20.0496C0.355469 20.1087 0.355724 20.1678 0.356232 20.2268Z"
fill="black"
fill-opacity="0.6"
fillOpacity="0.6"
/>
<path
opacity="0.3"
d="M0.355469 19.4252L12.2012 37.4243L25.1348 37.6641L20.0893 32.0289C20.0362 32.0296 19.983 32.03 19.9298 32.03C13.411 32.03 8.12654 26.6749 8.12654 20.0692C8.12654 19.8006 8.13527 19.5342 8.15247 19.27L0.36095 19.27C0.358927 19.3217 0.3571 19.3734 0.355469 19.4252Z"
fill="black"
fill-opacity="0.6"
fillOpacity="0.6"
/>
<path
opacity="0.3"
d="M8.95496 36.4961L16.4916 31.4741C11.6157 29.9459 8.0822 25.4359 8.0822 20.11C8.0822 19.4257 8.14053 18.7548 8.25256 18.1021L3.23755 30.6881C4.7183 32.9917 6.66846 34.9716 8.95496 36.4961Z"
fill="black"
fill-opacity="0.6"
fillOpacity="0.6"
/>
<path
opacity="0.3"
d="M26.2874 38.9513C24.2767 39.6312 22.1224 39.9998 19.8818 39.9998C15.7434 39.9998 11.8992 38.7422 8.71138 36.5887L16.2571 31.5327C17.4089 31.8981 18.6357 32.0953 19.9086 32.0953C19.9556 32.0953 20.0025 32.0951 20.0493 32.0945L26.2874 38.9513Z"
fill="black"
fill-opacity="0.6"
fillOpacity="0.6"
/>
<path
opacity="0.3"
d="M24.2707 39.5121C22.8598 39.8313 21.3918 39.9998 19.8846 39.9998C19.2316 39.9998 18.5859 39.9682 17.9491 39.9064L16.203 31.5327C16.4388 31.6096 16.6777 31.6794 16.9196 31.7418L24.2707 39.5121Z"
fill="black"
fill-opacity="0.4"
fillOpacity="0.4"
/>
<path
opacity="0.3"
d="M27.4401 19.2698L39.2535 16.4402C39.2318 16.3124 39.2089 16.1851 39.185 16.0581H27.4401V19.2698Z"
fill="black"
fill-opacity="0.6"
fillOpacity="0.6"
/>
<path
opacity="0.3"
d="M29.8962 23.9413L39.2537 16.0713C39.2529 16.0669 39.2521 16.0625 39.2512 16.0581L27.7285 23.9413H29.8962Z"
fill="black"
fill-opacity="0.4"
fillOpacity="0.4"
/>
<path
opacity="0.3"
d="M35.3878 16.0581L26.8633 38.5397C30.2212 37.2395 33.1356 35.0277 35.3125 32.2025L36.6597 16.0581H35.3878Z"
fill="black"
fill-opacity="0.6"
fillOpacity="0.6"
/>
<path
opacity="0.3"
d="M39.1661 16.0581L26.8633 38.5397C34.2736 35.6952 39.5411 28.4423 39.5411 19.9441C39.5411 18.6142 39.4121 17.3148 39.1661 16.0581Z"
fill="black"
fill-opacity="0.4"
fillOpacity="0.4"
/>
<path d="M31.4825 0H39.2535V7.88317H31.4825V0Z" fill="#798FFF" />
<path
@@ -97,19 +97,19 @@ export default function LogoIcon({ className = '' }: { className?: string }) {
opacity="0.3"
d="M39.2529 6.79373V7.89351L34.9719 11.9708H34.0666V6.71533L39.2529 6.79373Z"
fill="black"
fill-opacity="0.6"
fillOpacity="0.6"
/>
<path
opacity="0.3"
d="M27.4401 11.9705V4.2605L32.8654 3.79541L34.6434 4.27171L27.4401 11.9705Z"
fill="black"
fill-opacity="0.6"
fillOpacity="0.6"
/>
<path
opacity="0.3"
d="M30.8962 0.875977L27.4401 4.48346V11.9708H32.0502L30.8962 0.875977Z"
fill="black"
fill-opacity="0.6"
fillOpacity="0.6"
/>
<path
opacity="0.3"
@@ -120,13 +120,13 @@ export default function LogoIcon({ className = '' }: { className?: string }) {
opacity="0.3"
d="M31.7619 0H31.4759L30.3212 1.24695L31.6836 2.04378L31.7619 0Z"
fill="black"
fill-opacity="0.6"
fillOpacity="0.6"
/>
<path
opacity="0.3"
d="M37.8128 9.39695L35.1172 11.9708H34.6433L35.0667 6.82514L37.1635 6.42334L37.8128 9.39695Z"
fill="black"
fill-opacity="0.6"
fillOpacity="0.6"
/>
<path
d="M31.4738 7.88317H39.2534V0H31.4738V7.88317Z"
@@ -141,8 +141,8 @@ export default function LogoIcon({ className = '' }: { className?: string }) {
y2="7.88317"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#D375FF" />
<stop offset="1" stop-color="#798FFF" />
<stop stopColor="#D375FF" />
<stop offset="1" stopColor="#798FFF" />
</linearGradient>
</defs>
</svg>
src/components/icons/LogoTextIcon.tsx
-109
View File
File diff suppressed because one or more lines are too long
src/components/icons/LogoWithTextIcon.tsx
+32 -32
View File
@@ -13,8 +13,8 @@ export default function LogoWithTextIcon({
className={className}
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
fillRule="evenodd"
clipRule="evenodd"
d="M19.9484 39.9998C30.7693 39.9998 39.5413 31.0455 39.5413 19.9999C39.5413 18.6471 39.4098 17.3257 39.159 16.0483H27.3221V23.9784H31.1416C29.5308 28.6896 25.1395 32.0697 19.9747 32.0697C13.4444 32.0697 8.15051 26.6659 8.15051 19.9999C8.15051 13.3339 13.4444 7.93006 19.9747 7.93006V0H19.9484C9.12752 0 0.355469 8.95427 0.355469 19.9999C0.355469 31.0455 9.12752 39.9998 19.9484 39.9998Z"
fill="#798FFF"
/>
@@ -26,67 +26,67 @@ export default function LogoWithTextIcon({
opacity="0.3"
d="M17.6704 8.17514C18.4081 8.0323 19.1698 7.95752 19.9489 7.95752V0H19.9222C18.3448 0 16.8103 0.18501 15.3388 0.534682L17.6704 8.17514Z"
fill="black"
fill-opacity="0.6"
fillOpacity="0.6"
/>
<path
opacity="0.3"
d="M7.33869 4.52224L6.11771 22.4818L7.86294 20.7968C7.85258 20.5896 7.84734 20.3811 7.84734 20.1714C7.84734 13.5163 13.1236 8.1127 19.6599 8.03907L11.8217 1.75195C10.2025 2.47338 8.69665 3.40853 7.33869 4.52224Z"
fill="black"
fill-opacity="0.6"
fillOpacity="0.6"
/>
<path
opacity="0.3"
d="M0.356232 20.2268L9.28465 25.1093C8.57786 23.5715 8.18327 21.8572 8.18327 20.0496C8.18327 18.2395 8.57894 16.5229 9.28755 14.9836L6.55266 5.54736C2.73769 9.17808 0.355469 14.3324 0.355469 20.0496C0.355469 20.1087 0.355724 20.1678 0.356232 20.2268Z"
fill="black"
fill-opacity="0.6"
fillOpacity="0.6"
/>
<path
opacity="0.3"
d="M0.355469 19.4252L12.2012 37.4243L25.1348 37.6641L20.0893 32.0289C20.0362 32.0296 19.983 32.03 19.9298 32.03C13.411 32.03 8.12654 26.6749 8.12654 20.0692C8.12654 19.8006 8.13527 19.5342 8.15247 19.27L0.36095 19.27C0.358927 19.3217 0.3571 19.3734 0.355469 19.4252Z"
fill="black"
fill-opacity="0.6"
fillOpacity="0.6"
/>
<path
opacity="0.3"
d="M8.95496 36.4961L16.4916 31.4741C11.6157 29.9459 8.0822 25.4359 8.0822 20.11C8.0822 19.4257 8.14053 18.7548 8.25256 18.1021L3.23755 30.6881C4.7183 32.9917 6.66846 34.9716 8.95496 36.4961Z"
fill="black"
fill-opacity="0.6"
fillOpacity="0.6"
/>
<path
opacity="0.3"
d="M26.2874 38.9513C24.2767 39.6312 22.1224 39.9998 19.8818 39.9998C15.7434 39.9998 11.8992 38.7422 8.71138 36.5887L16.2571 31.5327C17.4089 31.8981 18.6357 32.0953 19.9086 32.0953C19.9556 32.0953 20.0025 32.0951 20.0493 32.0945L26.2874 38.9513Z"
fill="black"
fill-opacity="0.6"
fillOpacity="0.6"
/>
<path
opacity="0.3"
d="M24.2707 39.5121C22.8598 39.8313 21.3918 39.9998 19.8846 39.9998C19.2316 39.9998 18.5859 39.9682 17.9491 39.9064L16.203 31.5327C16.4388 31.6096 16.6777 31.6794 16.9196 31.7418L24.2707 39.5121Z"
fill="black"
fill-opacity="0.4"
fillOpacity="0.4"
/>
<path
opacity="0.3"
d="M27.4401 19.2698L39.2535 16.4402C39.2318 16.3124 39.2089 16.1851 39.185 16.0581H27.4401V19.2698Z"
fill="black"
fill-opacity="0.6"
fillOpacity="0.6"
/>
<path
opacity="0.3"
d="M29.8962 23.9413L39.2537 16.0713C39.2529 16.0669 39.2521 16.0625 39.2512 16.0581L27.7285 23.9413H29.8962Z"
fill="black"
fill-opacity="0.4"
fillOpacity="0.4"
/>
<path
opacity="0.3"
d="M35.3878 16.0581L26.8633 38.5397C30.2212 37.2395 33.1356 35.0277 35.3125 32.2025L36.6597 16.0581H35.3878Z"
fill="black"
fill-opacity="0.6"
fillOpacity="0.6"
/>
<path
opacity="0.3"
d="M39.1661 16.0581L26.8633 38.5397C34.2736 35.6952 39.5411 28.4423 39.5411 19.9441C39.5411 18.6142 39.4121 17.3148 39.1661 16.0581Z"
fill="black"
fill-opacity="0.4"
fillOpacity="0.4"
/>
<path d="M31.4825 0H39.2535V7.88317H31.4825V0Z" fill="#798FFF" />
<path
@@ -101,19 +101,19 @@ export default function LogoWithTextIcon({
opacity="0.3"
d="M39.2529 6.79373V7.89351L34.9719 11.9708H34.0666V6.71533L39.2529 6.79373Z"
fill="black"
fill-opacity="0.6"
fillOpacity="0.6"
/>
<path
opacity="0.3"
d="M27.4401 11.9705V4.2605L32.8654 3.79541L34.6434 4.27171L27.4401 11.9705Z"
fill="black"
fill-opacity="0.6"
fillOpacity="0.6"
/>
<path
opacity="0.3"
d="M30.8962 0.875977L27.4401 4.48346V11.9708H32.0502L30.8962 0.875977Z"
fill="black"
fill-opacity="0.6"
fillOpacity="0.6"
/>
<path
opacity="0.3"
@@ -124,13 +124,13 @@ export default function LogoWithTextIcon({
opacity="0.3"
d="M31.7619 0H31.4759L30.3212 1.24695L31.6836 2.04378L31.7619 0Z"
fill="black"
fill-opacity="0.6"
fillOpacity="0.6"
/>
<path
opacity="0.3"
d="M37.8128 9.39695L35.1172 11.9708H34.6433L35.0667 6.82514L37.1635 6.42334L37.8128 9.39695Z"
fill="black"
fill-opacity="0.6"
fillOpacity="0.6"
/>
<path
d="M31.4738 7.88317H39.2534V0H31.4738V7.88317Z"
@@ -169,8 +169,8 @@ export default function LogoWithTextIcon({
y2="7.88317"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#D375FF" />
<stop offset="1" stop-color="#798FFF" />
<stop stopColor="#D375FF" />
<stop offset="1" stopColor="#798FFF" />
</linearGradient>
<linearGradient
id="paint1_linear_2477_48684"
@@ -180,8 +180,8 @@ export default function LogoWithTextIcon({
y2="33"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#D375FF" />
<stop offset="1" stop-color="#798FFF" />
<stop stopColor="#D375FF" />
<stop offset="1" stopColor="#798FFF" />
</linearGradient>
<linearGradient
id="paint2_linear_2477_48684"
@@ -191,8 +191,8 @@ export default function LogoWithTextIcon({
y2="22"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#D375FF" />
<stop offset="1" stop-color="#798FFF" />
<stop stopColor="#D375FF" />
<stop offset="1" stopColor="#798FFF" />
</linearGradient>
<linearGradient
id="paint3_linear_2477_48684"
@@ -202,8 +202,8 @@ export default function LogoWithTextIcon({
y2="22"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#D375FF" />
<stop offset="1" stop-color="#798FFF" />
<stop stopColor="#D375FF" />
<stop offset="1" stopColor="#798FFF" />
</linearGradient>
<linearGradient
id="paint4_linear_2477_48684"
@@ -213,8 +213,8 @@ export default function LogoWithTextIcon({
y2="22"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#D375FF" />
<stop offset="1" stop-color="#798FFF" />
<stop stopColor="#D375FF" />
<stop offset="1" stopColor="#798FFF" />
</linearGradient>
<linearGradient
id="paint5_linear_2477_48684"
@@ -224,8 +224,8 @@ export default function LogoWithTextIcon({
y2="22"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#D375FF" />
<stop offset="1" stop-color="#798FFF" />
<stop stopColor="#D375FF" />
<stop offset="1" stopColor="#798FFF" />
</linearGradient>
<linearGradient
id="paint6_linear_2477_48684"
@@ -235,8 +235,8 @@ export default function LogoWithTextIcon({
y2="22"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#D375FF" />
<stop offset="1" stop-color="#798FFF" />
<stop stopColor="#D375FF" />
<stop offset="1" stopColor="#798FFF" />
</linearGradient>
</defs>
</svg>
src/store/languageStore.ts
+5 -10
View File
@@ -4,24 +4,19 @@ import { devtools, persist } from 'zustand/middleware';
export type Lang = 'RU' | 'EN';
export const useLanguageStore = create<{
value: Lang;
updateLang: (lang: Lang) => void;
lang: Lang;
setLang: (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 });
lang: 'RU',
setLang: (lang: Lang) => {
set({ lang: lang });
},
}),
{
name: 'lang',
partialize: state => ({ value: state.value }),
},
),
),