feat(footer): add availability status pill to footer bottom bar

This commit is contained in:
MichalC
2026-09-03 09:21:32 +02:00
parent 4b3c588045
commit 265ad08dcd
4 changed files with 52 additions and 2 deletions
+8 -1
View File
@@ -59,7 +59,14 @@ export default async function RootLayout({
<LanguageSlugsProvider> <LanguageSlugsProvider>
<Header navItems={headerNavItems} /> <Header navItems={headerNavItems} />
<main className="min-h-screen pt-24">{children}</main> <main className="min-h-screen pt-24">{children}</main>
<Footer navItems={footerNavItems} companyInfo={companyData} association={footerData.association} copyright={footerData.copyright} creator={footerData.creator} /> <Footer
navItems={footerNavItems}
companyInfo={companyData}
association={footerData.association}
copyright={footerData.copyright}
creator={footerData.creator}
availability={footerData.availabilityStatus}
/>
{/* Floating WhatsApp Button */} {/* Floating WhatsApp Button */}
<a <a
+15
View File
@@ -12,12 +12,14 @@ export function Footer({
association = {}, association = {},
copyright, copyright,
creator, creator,
availability,
}: { }: {
navItems?: any[]; navItems?: any[];
companyInfo?: any; companyInfo?: any;
association?: any; association?: any;
copyright?: any; copyright?: any;
creator?: any; creator?: any;
availability?: any;
}) { }) {
const pathname = usePathname(); const pathname = usePathname();
@@ -48,6 +50,11 @@ export function Footer({
const creatorName = creator?.name; const creatorName = creator?.name;
const creatorUrl = creator?.url; const creatorUrl = creator?.url;
const currentAvailability = availability?.[currentLocaleCode] || availability?.pl || availability || {};
const defaultAvailText = currentLocaleCode === 'de' ? 'Ich nehme derzeit neue Mandanten an' : 'Przyjmuję obecnie nowych klientów';
const availText = currentAvailability?.text || defaultAvailText;
const isAvailable = currentAvailability?.available !== false;
return ( return (
<footer className="bg-card py-16 md:py-24 mt-auto"> <footer className="bg-card py-16 md:py-24 mt-auto">
<div className="container-premium grid grid-cols-1 md:grid-cols-3 gap-16 md:gap-12"> <div className="container-premium grid grid-cols-1 md:grid-cols-3 gap-16 md:gap-12">
@@ -150,7 +157,15 @@ export function Footer({
</div> </div>
<div className="container-premium mt-16 pt-8 border-t border-border flex flex-col md:flex-row justify-between items-center gap-6 text-sm text-foreground/50"> <div className="container-premium mt-16 pt-8 border-t border-border flex flex-col md:flex-row justify-between items-center gap-6 text-sm text-foreground/50">
<div className="flex flex-col sm:flex-row items-center gap-4 sm:gap-6">
{availText && (
<div className="inline-flex items-center gap-2 rounded-full border border-border bg-card px-3 py-1.5 text-xs font-medium text-foreground/80 shadow-xs">
<span className={`w-2 h-2 rounded-full shrink-0 ${isAvailable ? 'bg-green-500' : 'bg-foreground/40'}`} />
<span>{availText}</span>
</div>
)}
<p>{copyrightText}</p> <p>{copyrightText}</p>
</div>
{(creatorName || creatorLabel) && ( {(creatorName || creatorLabel) && (
<p className="flex items-center gap-2 font-medium"> <p className="flex items-center gap-2 font-medium">
{creatorLabel && <span>{creatorLabel}</span>} {creatorLabel && <span>{creatorLabel}</span>}
+18
View File
@@ -18,6 +18,24 @@ export const Footer: GlobalConfig = {
}, },
], ],
}, },
{
name: 'availabilityStatus',
type: 'group',
localized: true,
fields: [
{
name: 'text',
type: 'text',
required: true,
defaultValue: 'Przyjmuję obecnie nowych klientów',
},
{
name: 'available',
type: 'checkbox',
defaultValue: true,
},
],
},
{ {
name: 'association', name: 'association',
type: 'group', type: 'group',
+10
View File
@@ -915,6 +915,10 @@ export interface Footer {
id?: string | null; id?: string | null;
}[] }[]
| null; | null;
availabilityStatus: {
text: string;
available?: boolean | null;
};
association?: { association?: {
title?: string | null; title?: string | null;
logo?: (number | null) | Media; logo?: (number | null) | Media;
@@ -1138,6 +1142,12 @@ export interface FooterSelect<T extends boolean = true> {
page?: T; page?: T;
id?: T; id?: T;
}; };
availabilityStatus?:
| T
| {
text?: T;
available?: T;
};
association?: association?:
| T | T
| { | {