67 lines
2.3 KiB
TypeScript
67 lines
2.3 KiB
TypeScript
import { Link, NavLink } from 'react-router-dom';
|
||
import { LogoWithTextIcon } from '../icons/LogoWithTextIcon';
|
||
|
||
export function Footer() {
|
||
return (
|
||
<footer className="sm:grid xl:grid-cols-[2fr_1fr_1fr] sm:grid-cols-2 sm:max-xl:grid-rows-2">
|
||
<div className="flex sm:items-center max-sm:flex-col lg:px-10 sm:px-6 px-4 sm:py-[30px] py-4 border-t border-[#3D425C] gap-6 sm:max-xl:row-start-1 sm:max-xl:col-span-2">
|
||
<Link to={'/'} className="outline-none">
|
||
<LogoWithTextIcon className="h-[50px] w-[104px]" />
|
||
</Link>
|
||
<div className="flex flex-col gap-y-1">
|
||
<NavLink
|
||
to="/policy"
|
||
className="sm:font-medium m-text flex gap-4 outline-none"
|
||
target="_blank"
|
||
>
|
||
Политика конфиденциальности <span>graff.tech</span>
|
||
</NavLink>
|
||
<p className="sm:font-medium m-text opacity-40">
|
||
© 2025 GRAFF interactive. Все права защищены
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="lg:px-10 sm:px-6 px-4 py-[30px] flex items-center border-t xl:border-l sm:border-r border-[#3D425C] flex-1 justify-between sm:max-xl:row-start-2 sm:max-xl:col-start-1">
|
||
<div>
|
||
<Contact type="email" text="info@graff.tech" />
|
||
<Contact type="phone" text="8 800 770 00 67" />
|
||
</div>
|
||
<div className="font-medium p-[14px] border border-[#3D425C] rounded-full m-text">
|
||
RU
|
||
</div>
|
||
</div>
|
||
<div className="lg:px-10 sm:px-6 px-4 py-[30px] flex items-center border-t border-[#3D425C] flex-1 justify-between sm:max-xl:row-start-2 sm:max-xl:col-start-2">
|
||
<div>
|
||
<Contact type="email" text="sam@graff.tech" />
|
||
<Contact type="phone" text="+971 58 506 0097" />
|
||
</div>
|
||
<div className="font-medium py-[14px] px-[10px] border border-[#3D425C] rounded-full m-text">
|
||
UAE
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
);
|
||
}
|
||
|
||
function Contact({
|
||
text,
|
||
className = '',
|
||
type,
|
||
}: {
|
||
className?: string;
|
||
text: string;
|
||
type: 'email' | 'phone';
|
||
}) {
|
||
const formatedTel = text.replace(/\s/g, '');
|
||
return (
|
||
<div>
|
||
<Link
|
||
to={type === 'email' ? `mailto:${text}` : `tel:${formatedTel}`}
|
||
className={'l-text outline-none ' + className}
|
||
>
|
||
{text}
|
||
</Link>
|
||
</div>
|
||
);
|
||
}
|