diff --git a/src/shared/ui/logo/Logo.tsx b/src/shared/ui/logo/Logo.tsx index 11900fa6..2cb396af 100644 --- a/src/shared/ui/logo/Logo.tsx +++ b/src/shared/ui/logo/Logo.tsx @@ -4,12 +4,8 @@ import { Routes } from '@/shared/config/routerConfig/routes' import Link from '@/shared/ui/Link/Link' import styles from './logo.module.scss' +import { TLogoProps } from './model/types/types' -type TLogoProps = { - image: string - width: string - height: string -} /** * @param {string} image - путь к логотипу на сервере * @param {string} width - ширина логотипа @@ -18,11 +14,9 @@ type TLogoProps = { const Logo: FC = ({ image, width, height }) => { return ( -
- - Logo - -
+ + Logo + ) } diff --git a/src/shared/ui/logo/logo.module.scss b/src/shared/ui/logo/logo.module.scss index a0c9c826..5b014c2f 100644 --- a/src/shared/ui/logo/logo.module.scss +++ b/src/shared/ui/logo/logo.module.scss @@ -1,11 +1,4 @@ -.logo { - width: 138px; - height: 46px; -} - .link { display: flex; - width: 138px; - height: 46px; margin-right: 92px; } diff --git a/src/shared/ui/logo/model/skeleton/LogoSkeleton.module.scss b/src/shared/ui/logo/model/skeleton/LogoSkeleton.module.scss new file mode 100644 index 00000000..6bd6b680 --- /dev/null +++ b/src/shared/ui/logo/model/skeleton/LogoSkeleton.module.scss @@ -0,0 +1,4 @@ +.skeleton { + display: flex; + margin-right: 92px; +} diff --git a/src/shared/ui/logo/model/skeleton/LogoSkeleton.tsx b/src/shared/ui/logo/model/skeleton/LogoSkeleton.tsx new file mode 100644 index 00000000..1e776bb0 --- /dev/null +++ b/src/shared/ui/logo/model/skeleton/LogoSkeleton.tsx @@ -0,0 +1,23 @@ +import { FC } from 'react' +import Skeleton from 'react-loading-skeleton' +import 'react-loading-skeleton/dist/skeleton.css' + +import { TLogoProps } from '../types/types' + +import styles from './LogoSkeleton.module.scss' + +/** + * Компонент LogoSkeleton - заставка, пока не загрузится картинка логотипа + * @param {string} width - ширина скелетона + * @param {string} height - высота скелетона + */ + +const LogoSkeleton: FC = ({ width, height }) => { + return ( +
+ +
+ ) +} + +export default LogoSkeleton diff --git a/src/shared/ui/logo/model/types/types.ts b/src/shared/ui/logo/model/types/types.ts new file mode 100644 index 00000000..f4e43d57 --- /dev/null +++ b/src/shared/ui/logo/model/types/types.ts @@ -0,0 +1,6 @@ +export type TLogoProps = { + image?: string + width: string + height: string + logo?: string +} diff --git a/src/widgets/Footer/Footer.tsx b/src/widgets/Footer/Footer.tsx index 43e1d3a8..cc08be75 100644 --- a/src/widgets/Footer/Footer.tsx +++ b/src/widgets/Footer/Footer.tsx @@ -1,4 +1,6 @@ import { useState, useEffect } from 'react' +import Skeleton from 'react-loading-skeleton' +import 'react-loading-skeleton/dist/skeleton.css' import { useDispatch, useSelector } from 'react-redux' import { AppDispatch } from '@/app/providers/StoreProvider/config/store' @@ -8,6 +10,7 @@ import SubscribeForm from '@/features/SubscribeForm/SubscribeForm' import { Button } from '@/shared/ui/Button/Button' import Link from '@/shared/ui/Link/Link' import Logo from '@/shared/ui/logo/Logo' +import LogoSkeleton from '@/shared/ui/logo/model/skeleton/LogoSkeleton' import Modal from '@/shared/ui/Modal/Modal' import Paragraph from '@/shared/ui/Paragraph/Paragraph' @@ -20,6 +23,7 @@ function Footer() { const coreBaseData = useSelector(getCoreBaseFooterSelector) const [isModalOpen, setIsModalOpen] = useState(false) const [isModalClosing, setIsModalClosing] = useState(false) + const logo = coreBaseData.footer.main_logo.image const changeModalState = () => { setIsModalOpen(!isModalOpen) @@ -45,8 +49,14 @@ function Footer() {
- - {coreBaseData.footer.company_info} + {!logo ? ( + + ) : ( + + )} + + {coreBaseData.footer.company_info || } +
diff --git a/src/widgets/Header/Header.tsx b/src/widgets/Header/Header.tsx index 93e316af..d6dc9dc4 100644 --- a/src/widgets/Header/Header.tsx +++ b/src/widgets/Header/Header.tsx @@ -17,6 +17,7 @@ import CatalogLink from '@/shared/ui/CatalogLink/CatalogLink' import ContextMenuElement from '@/shared/ui/ContextMenuElement/ContextMenuElement' import Link from '@/shared/ui/Link/Link' import Logo from '@/shared/ui/logo/Logo' +import LogoSkeleton from '@/shared/ui/logo/model/skeleton/LogoSkeleton' import Modal from '@/shared/ui/Modal/Modal' import Paragraph from '@/shared/ui/Paragraph/Paragraph' import CatalogNodeItem from '@/widgets/CatalogNodeItem/CatalogNodeItem' @@ -37,6 +38,7 @@ function Header() { const [isModalOpen, setIsModalOpen] = useState(false) const [isModalClosing, setIsModalClosing] = useState(false) const phoneNumber = coreBaseData.header.support.phone_number + const logo = coreBaseData.header.main_logo.image const changeModalState = () => { setIsModalOpen(!isModalOpen) @@ -147,7 +149,11 @@ function Header() {
- + {!logo ? ( + + ) : ( + + )}