fix: menu, move beauty phone icon to icons
This commit is contained in:
@@ -17,7 +17,11 @@ function BaseMenu() {
|
|||||||
return (
|
return (
|
||||||
<li key={index} className={s.Parent}>
|
<li key={index} className={s.Parent}>
|
||||||
<div className={s.Row}>
|
<div className={s.Row}>
|
||||||
{item.name}
|
{item.link ? (
|
||||||
|
<Link href={item.link}>{item.name}</Link>
|
||||||
|
) : (
|
||||||
|
item.name
|
||||||
|
)}
|
||||||
<Icons.MenuArrow className={s.Expand} />
|
<Icons.MenuArrow className={s.Expand} />
|
||||||
</div>
|
</div>
|
||||||
<ul className={s.Child}>{nodeList(item.children)}</ul>
|
<ul className={s.Child}>{nodeList(item.children)}</ul>
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import s from './styles.module.scss';
|
|||||||
import type { ReactNode, SVGProps } from 'react';
|
import type { ReactNode, SVGProps } from 'react';
|
||||||
import { useModal } from '@core/providers/modal-provider';
|
import { useModal } from '@core/providers/modal-provider';
|
||||||
import { ConsultationModal } from '@/feature/article';
|
import { ConsultationModal } from '@/feature/article';
|
||||||
|
import { Icons } from '@/shared/ui/icon';
|
||||||
|
|
||||||
type TBeautyButtonProps = {
|
type TBeautyButtonProps = {
|
||||||
children?: ReactNode;
|
children?: ReactNode;
|
||||||
@@ -17,7 +18,7 @@ function BeautyButton({ children, onClick }: TBeautyButtonProps) {
|
|||||||
return (
|
return (
|
||||||
<div className={s.Container}>
|
<div className={s.Container}>
|
||||||
<button className={s.Button} onClick={openModal}>
|
<button className={s.Button} onClick={openModal}>
|
||||||
<PhoneIcon color={'white'} />
|
<Icons.BtnPhone color={'white'} />
|
||||||
<span className={s.Phone}>{children}</span>
|
<span className={s.Phone}>{children}</span>
|
||||||
</button>
|
</button>
|
||||||
<p className={s.Action} onClick={openModal}>
|
<p className={s.Action} onClick={openModal}>
|
||||||
@@ -27,20 +28,4 @@ function BeautyButton({ children, onClick }: TBeautyButtonProps) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
//MagePhoneFill
|
|
||||||
const PhoneIcon = (props: SVGProps<SVGSVGElement>) => (
|
|
||||||
<svg
|
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
|
||||||
width={24}
|
|
||||||
height={24}
|
|
||||||
viewBox='0 0 24 24'
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
fill='currentColor'
|
|
||||||
d='M21.963 18.855a2.74 2.74 0 0 1-.898 1.47a5.36 5.36 0 0 1-3.848 1.602h-.358a11.4 11.4 0 0 1-4.287-1.082c-.326-.153-.643-.296-1.02-.47A19.8 19.8 0 0 1 7.253 17.1a18.6 18.6 0 0 1-4.012-5.451A11.9 11.9 0 0 1 2.15 8.106a6.5 6.5 0 0 1 .418-3.808a7 7 0 0 1 1.174-1.48a2.3 2.3 0 0 1 1.634-.745a2.54 2.54 0 0 1 1.725.95c.47.52 1.02 1.02 1.52 1.55l.644.634c.38.333.615.802.653 1.306c.001.464-.17.911-.48 1.256a9 9 0 0 1-.622.694l-.215.225a1.15 1.15 0 0 0-.286.418c-.052.154-.07.318-.05.48c.164.444.421.848.755 1.184c.52.704 1.02 1.317 1.582 2.042a13.3 13.3 0 0 0 3.4 2.807c.123.1.27.167.428.194c.14.021.281 0 .408-.062a3.5 3.5 0 0 0 1.021-.826c.36-.444.882-.726 1.45-.787a2.04 2.04 0 0 1 1.46.623q.35.302.663.643l.306.327l.317.306c.193.194.377.368.56.572q.5.43.93.929c.293.374.441.842.418 1.317'
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
|
|
||||||
export { BeautyButton };
|
export { BeautyButton };
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import { ROUTES } from './route';
|
|||||||
export const baseMenu: TMenu = [
|
export const baseMenu: TMenu = [
|
||||||
{
|
{
|
||||||
name: 'Экспертиза',
|
name: 'Экспертиза',
|
||||||
|
link: ROUTES.EXPERTIZA,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
name: 'Автотехническая',
|
name: 'Автотехническая',
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ import type { SVGProps } from 'react';
|
|||||||
type SVGIcon = SVGProps<SVGSVGElement>;
|
type SVGIcon = SVGProps<SVGSVGElement>;
|
||||||
|
|
||||||
//RiMapPinLine
|
//RiMapPinLine
|
||||||
function Map(props: SVGIcon) {
|
const Map = (props: SVGIcon) => {
|
||||||
return (
|
return (
|
||||||
<svg
|
<svg
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
@@ -21,10 +21,10 @@ function Map(props: SVGIcon) {
|
|||||||
></path>
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
//MynauiEnvelope
|
//MynauiEnvelope
|
||||||
function Envelope(props: SVGIcon) {
|
const Envelope = (props: SVGIcon) => {
|
||||||
return (
|
return (
|
||||||
<svg
|
<svg
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
@@ -43,10 +43,10 @@ function Envelope(props: SVGIcon) {
|
|||||||
></path>
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
//IcBaselineWhatsapp
|
//IcBaselineWhatsapp
|
||||||
function Whatsapp(props: SVGIcon) {
|
const Whatsapp = (props: SVGIcon) => {
|
||||||
return (
|
return (
|
||||||
<svg
|
<svg
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
@@ -61,10 +61,10 @@ function Whatsapp(props: SVGIcon) {
|
|||||||
></path>
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
//IcBaselineTelegram
|
//IcBaselineTelegram
|
||||||
function Telegram(props: SVGIcon) {
|
const Telegram = (props: SVGIcon) => {
|
||||||
return (
|
return (
|
||||||
<svg
|
<svg
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
@@ -79,10 +79,10 @@ function Telegram(props: SVGIcon) {
|
|||||||
></path>
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
// CiPhone
|
// CiPhone
|
||||||
function Phone(props: SVGIcon) {
|
const Phone = (props: SVGIcon) => {
|
||||||
return (
|
return (
|
||||||
<svg
|
<svg
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
@@ -101,10 +101,10 @@ function Phone(props: SVGIcon) {
|
|||||||
></path>
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
//HugeiconsVk
|
//HugeiconsVk
|
||||||
function Vk(props: SVGIcon) {
|
const Vk = (props: SVGIcon) => {
|
||||||
return (
|
return (
|
||||||
<svg
|
<svg
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
@@ -124,10 +124,10 @@ function Vk(props: SVGIcon) {
|
|||||||
></path>
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
//MdiYoutube
|
//MdiYoutube
|
||||||
function Youtube(props: SVGIcon) {
|
const Youtube = (props: SVGIcon) => {
|
||||||
return (
|
return (
|
||||||
<svg
|
<svg
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
@@ -142,10 +142,10 @@ function Youtube(props: SVGIcon) {
|
|||||||
></path>
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
//WeuiArrowFilled
|
//WeuiArrowFilled
|
||||||
export function MenuArrow(props: SVGIcon) {
|
const MenuArrow = (props: SVGIcon) => {
|
||||||
return (
|
return (
|
||||||
<svg
|
<svg
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
@@ -161,11 +161,37 @@ export function MenuArrow(props: SVGIcon) {
|
|||||||
></path>
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
|
//MagePhoneFill
|
||||||
|
const BtnPhone = (props: SVGIcon) => (
|
||||||
|
<svg
|
||||||
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
|
width={24}
|
||||||
|
height={24}
|
||||||
|
viewBox='0 0 24 24'
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill='currentColor'
|
||||||
|
d='M21.963 18.855a2.74 2.74 0 0 1-.898 1.47a5.36 5.36 0 0 1-3.848 1.602h-.358a11.4 11.4 0 0 1-4.287-1.082c-.326-.153-.643-.296-1.02-.47A19.8 19.8 0 0 1 7.253 17.1a18.6 18.6 0 0 1-4.012-5.451A11.9 11.9 0 0 1 2.15 8.106a6.5 6.5 0 0 1 .418-3.808a7 7 0 0 1 1.174-1.48a2.3 2.3 0 0 1 1.634-.745a2.54 2.54 0 0 1 1.725.95c.47.52 1.02 1.02 1.52 1.55l.644.634c.38.333.615.802.653 1.306c.001.464-.17.911-.48 1.256a9 9 0 0 1-.622.694l-.215.225a1.15 1.15 0 0 0-.286.418c-.052.154-.07.318-.05.48c.164.444.421.848.755 1.184c.52.704 1.02 1.317 1.582 2.042a13.3 13.3 0 0 0 3.4 2.807c.123.1.27.167.428.194c.14.021.281 0 .408-.062a3.5 3.5 0 0 0 1.021-.826c.36-.444.882-.726 1.45-.787a2.04 2.04 0 0 1 1.46.623q.35.302.663.643l.306.327l.317.306c.193.194.377.368.56.572q.5.43.93.929c.293.374.441.842.418 1.317'
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
const Icons = Object.assign(
|
const Icons = Object.assign(
|
||||||
{},
|
{},
|
||||||
{ Map, Envelope, Whatsapp, Telegram, Phone, Vk, Youtube, MenuArrow },
|
{
|
||||||
|
Map,
|
||||||
|
Envelope,
|
||||||
|
Whatsapp,
|
||||||
|
Telegram,
|
||||||
|
Phone,
|
||||||
|
Vk,
|
||||||
|
Youtube,
|
||||||
|
MenuArrow,
|
||||||
|
BtnPhone,
|
||||||
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
export { Icons };
|
export { Icons };
|
||||||
|
|||||||
Reference in New Issue
Block a user