erik/octto-engenharia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add dynamic contact info and social media settings

Browse Source
This commit is contained in:
Erik
2025-11-29 15:52:21 -03:00
parent c06221331e
commit a14e7749b7
4 changed files with 301 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
frontend/src/components/Footer.tsx
View File

@@ -1,15 +1,56 @@
"use client";
import { useEffect, useState } from 'react';
import Link from 'next/link';
import { useLocale } from '@/contexts/LocaleContext';
import { PartnerBadge } from './PartnerBadge';
type ContactSettings = {
address?: string | null;
phone?: string | null;
email?: string | null;
instagram?: string | null;
linkedin?: string | null;
facebook?: string | null;
whatsapp?: string | null;
};
export default function Footer() {
const { locale, t } = useLocale();
const [contact, setContact] = useState<ContactSettings>({});
// Prefixo para links
const prefix = locale === 'pt' ? '' : `/${locale}`;
useEffect(() => {
const fetchSettings = async () => {
try {
const response = await fetch('/api/settings');
if (response.ok) {
const data = await response.json();
setContact({
address: data.address,
phone: data.phone,
email: data.email,
instagram: data.instagram,
linkedin: data.linkedin,
facebook: data.facebook,
whatsapp: data.whatsapp
});
}
} catch (error) {
console.error('Erro ao carregar configurações:', error);
}
};
fetchSettings();
// Atualizar quando settings mudar
const handleRefresh = () => fetchSettings();
window.addEventListener('settings:refresh', handleRefresh);
return () => window.removeEventListener('settings:refresh', handleRefresh);
}, []);
return (
<footer className="bg-secondary text-white pt-16 pb-8">
<div className="container mx-auto px-4">
@@ -32,15 +73,26 @@ export default function Footer() {
</div>
<div className="flex gap-4">
<a href="#" className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
<i className="ri-instagram-line"></i>
</a>
<a href="#" className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
<i className="ri-linkedin-fill"></i>
</a>
<a href="#" className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
<i className="ri-facebook-fill"></i>
</a>
{contact.instagram && (
<a href={contact.instagram} target="_blank" rel="noopener noreferrer" className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
<i className="ri-instagram-line"></i>
</a>
)}
{contact.linkedin && (
<a href={contact.linkedin} target="_blank" rel="noopener noreferrer" className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
<i className="ri-linkedin-fill"></i>
</a>
)}
{contact.facebook && (
<a href={contact.facebook} target="_blank" rel="noopener noreferrer" className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
<i className="ri-facebook-fill"></i>
</a>
)}
{contact.whatsapp && (
<a href={`https://wa.me/${contact.whatsapp.replace(/\D/g, '')}`} target="_blank" rel="noopener noreferrer" className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
<i className="ri-whatsapp-line"></i>
</a>
)}
</div>
</div>
@@ -71,18 +123,33 @@ export default function Footer() {
<div>
<h3 className="text-lg font-bold font-headline mb-6">{t('nav.contact')}</h3>
<ul className="space-y-4">
<li className="flex items-start gap-3 text-gray-400">
<i className="ri-map-pin-line mt-1 text-primary"></i>
<span>Endereço da Empresa, 123<br />Cidade - ES</span>
</li>
<li className="flex items-center gap-3 text-gray-400">
<i className="ri-phone-line text-primary"></i>
<span>(27) 99999-9999</span>
</li>
<li className="flex items-center gap-3 text-gray-400">
<i className="ri-mail-line text-primary"></i>
<span>contato@octto.com.br</span>
</li>
{contact.address && (
<li className="flex items-start gap-3 text-gray-400">
<i className="ri-map-pin-line mt-1 text-primary"></i>
<span>{contact.address}</span>
</li>
)}
{contact.phone && (
<li className="flex items-center gap-3 text-gray-400">
<i className="ri-phone-line text-primary"></i>
<a href={`tel:${contact.phone.replace(/\D/g, '')}`} className="hover:text-primary transition-colors">
{contact.phone}
</a>
</li>
)}
{contact.email && (
<li className="flex items-center gap-3 text-gray-400">
<i className="ri-mail-line text-primary"></i>
<a href={`mailto:${contact.email}`} className="hover:text-primary transition-colors">
{contact.email}
</a>
</li>
)}
{!contact.address && !contact.phone && !contact.email && (
<li className="text-gray-500 text-sm italic">
Informações de contato não configuradas
</li>
)}
</ul>
</div>
</div>