fix: menu, move beauty phone icon to icons

This commit is contained in:
2025-07-09 08:53:58 +03:00
parent 3e2426424d
commit 57db15e01a
4 changed files with 51 additions and 35 deletions

View File

@@ -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>

View File

@@ -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 };

View File

@@ -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: 'Автотехническая',

View File

@@ -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 };