feat(footer): add availability status pill to footer bottom bar
This commit is contained in:
@@ -59,7 +59,14 @@ export default async function RootLayout({
|
||||
<LanguageSlugsProvider>
|
||||
<Header navItems={headerNavItems} />
|
||||
<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 */}
|
||||
<a
|
||||
|
||||
@@ -12,12 +12,14 @@ export function Footer({
|
||||
association = {},
|
||||
copyright,
|
||||
creator,
|
||||
availability,
|
||||
}: {
|
||||
navItems?: any[];
|
||||
companyInfo?: any;
|
||||
association?: any;
|
||||
copyright?: any;
|
||||
creator?: any;
|
||||
availability?: any;
|
||||
}) {
|
||||
const pathname = usePathname();
|
||||
|
||||
@@ -48,6 +50,11 @@ export function Footer({
|
||||
const creatorName = creator?.name;
|
||||
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 (
|
||||
<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">
|
||||
@@ -150,7 +157,15 @@ export function Footer({
|
||||
</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="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>
|
||||
</div>
|
||||
{(creatorName || creatorLabel) && (
|
||||
<p className="flex items-center gap-2 font-medium">
|
||||
{creatorLabel && <span>{creatorLabel}</span>}
|
||||
|
||||
@@ -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',
|
||||
type: 'group',
|
||||
|
||||
@@ -915,6 +915,10 @@ export interface Footer {
|
||||
id?: string | null;
|
||||
}[]
|
||||
| null;
|
||||
availabilityStatus: {
|
||||
text: string;
|
||||
available?: boolean | null;
|
||||
};
|
||||
association?: {
|
||||
title?: string | null;
|
||||
logo?: (number | null) | Media;
|
||||
@@ -1138,6 +1142,12 @@ export interface FooterSelect<T extends boolean = true> {
|
||||
page?: T;
|
||||
id?: T;
|
||||
};
|
||||
availabilityStatus?:
|
||||
| T
|
||||
| {
|
||||
text?: T;
|
||||
available?: T;
|
||||
};
|
||||
association?:
|
||||
| T
|
||||
| {
|
||||
|
||||
Reference in New Issue
Block a user