85 lines
2.7 KiB
JavaScript
85 lines
2.7 KiB
JavaScript
'use client'
|
|
|
|
import React from 'react'
|
|
import Link from 'next/link'
|
|
import Logo from '/public/images/logo.png'
|
|
import Image from 'next/image'
|
|
import { useTranslation } from 'next-i18next'
|
|
import { changeLanguage } from '../../utils/commonFunction.utils'
|
|
import { useRouter } from 'next/router'
|
|
|
|
const HeaderTopbar = () => {
|
|
const { t } = useTranslation('common')
|
|
|
|
const router = useRouter()
|
|
|
|
const handleLanguageChange = () => {
|
|
changeLanguage(router, 'es'); // always switch to Spanish
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className="header-top py-2 "
|
|
style={{
|
|
background: 'linear-gradient(90deg, #C12026 11.32%, #E14448 95.28%)',
|
|
}}
|
|
>
|
|
<div className="container-fluid">
|
|
<div className='d-flex justify-content-center align-items-center gap-5 flex-wrap'>
|
|
<div className="text-center" style={{ color: 'white' }}>
|
|
Haz clic en el botón para cambiar a español.
|
|
</div>
|
|
<button onClick={handleLanguageChange} className='white-button'>Haz clic aquí</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="topbar d-lg-block d-none">
|
|
<div className="container">
|
|
<div className="row align-items-center">
|
|
<div className="col-lg-3 col-12 d-lg-block d-none">
|
|
<Link className="navbar-brand" href="/">
|
|
<Image src={Logo} alt="logo" />
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="col-lg-6 col-12">
|
|
<div className="contact-info-wrap">
|
|
<div className="contact-info">
|
|
<div className="icon">
|
|
<i className="fi flaticon-phone-call"></i>
|
|
</div>
|
|
<div className="info-text">
|
|
<span>{t('callUs')}</span>
|
|
<p>+1 (305) 330-7413</p>
|
|
</div>
|
|
</div>
|
|
<div className="contact-info">
|
|
<div className="icon">
|
|
<i className="fi flaticon-email"></i>
|
|
</div>
|
|
<div className="info-text">
|
|
<span>{t('emailNow')}</span>
|
|
<p>info@janahanlaw.com</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-lg-3 col-12 d-flex justify-content-end align-items-center">
|
|
<div className="contact-info ms-3">
|
|
<Link className="theme-btn" href="tel:+919847739275">
|
|
{t('contactUs')}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default HeaderTopbar
|