Skip to content

Commit 260e6fb

Browse files
rob-at-cortexrob-at-cortex
committed
fix: footer colors
1 parent d0440ba commit 260e6fb

2 files changed

Lines changed: 107 additions & 53 deletions

File tree

‎src/components/HeaderFooter/Footer.stories.tsx‎

Lines changed: 52 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Meta, StoryFn } from '@storybook/react'
33
import { Footer, type SectionProps } from './Footer'
44
import { FaInstagram, FaLinkedin } from 'react-icons/fa6'
55
import logoLight from '../../../.storybook/public/cortex-reply-light.png'
6-
import logoDark from '../../../.storybook/public/cortex-reply-light.png'
6+
import logoDark from '../../../.storybook/public/cortex-reply-dark.png'
77

88
export default {
99
title: 'Footer/Footer',
@@ -95,3 +95,54 @@ Default.args = {
9595
},
9696
},
9797
}
98+
99+
100+
export const NoBlog = Template.bind({})
101+
NoBlog.args = {
102+
className: '',
103+
logoLight:logoLight,
104+
logoDark:logoDark,
105+
footerData: {
106+
about: {
107+
description: 'This is a sample description for the about section.',
108+
socialLinks: [
109+
{
110+
icon: <FaLinkedin />,
111+
href: 'https://www.linkedin.com/company/cortex-reply/',
112+
},
113+
{
114+
icon: <FaInstagram />,
115+
href: 'https://www.instagram.com/cortex.reply/',
116+
},
117+
],
118+
},
119+
columnOne: {
120+
title: 'Column One',
121+
links: [
122+
{ href: '/link1', label: 'Link 1' },
123+
{ href: '/link2', label: 'Link 2' },
124+
],
125+
},
126+
columnTwo: {
127+
title: 'Contact Us',
128+
location: '1234 Street Name, City, Country',
129+
mails: ['contact@example.com', 'support@example.com'],
130+
},
131+
132+
footerBottom: {
133+
copyrightText: 'copyright',
134+
links: [
135+
{
136+
label: 'Privacy Policy',
137+
href: '/privacy-policy',
138+
openNewTab: false,
139+
},
140+
{
141+
label: 'Contact Us',
142+
href: '/contact',
143+
openNewTab: false,
144+
},
145+
],
146+
},
147+
},
148+
}

‎src/components/HeaderFooter/Footer.tsx‎

Lines changed: 55 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -59,10 +59,10 @@ const titleClasses = cn(
5959
'text-gray-900 dark:text-white text-md font-bold leading-[1.25] md:text-lg mb-5 md:mb-[1.875rem]',
6060
)
6161
const addressIconParentClasses = cn(
62-
'w-10 h-10 rounded-5 inline-grid place-items-center dark:bg-accent-700 border border-accent-800 dark:border-transparent text-primary flex-none',
62+
'w-10 h-10 rounded-5 inline-grid place-items-center dark:bg-accent-700 border border-accent-800 dark:border-transparent text-accent flex-none',
6363
)
6464
const addressItemClasses = cn('flex items-center gap-5')
65-
const textColor = cn('transition-colors duration-300 hover:text-primary dark:hover:text-white')
65+
const textColor = cn('transition-colors duration-300 hover:text-accent dark:hover:text-white')
6666

6767
export function Footer({ className, footerData, logoLight, logoDark }: SectionProps) {
6868
const { about, columnOne, columnTwo, columnThree, footerBottom } = footerData
@@ -78,11 +78,11 @@ export function Footer({ className, footerData, logoLight, logoDark }: SectionPr
7878
<div className="grid gap-10 md:grid-cols-2 xl:grid-cols-4">
7979
{/* About */}
8080
<div data-aos="fade-up" data-aos-delay="200">
81-
<BrandLogo logoLight={logoLight} logoDark={logoDark}/>
81+
<BrandLogo logoLight={logoLight} logoDark={logoDark} />
8282
<p className="mb-7 mt-3">{about.description}</p>
8383
{about.socialLinks && about.socialLinks.length > 0 && (
8484
<nav aria-label="social links">
85-
<ul className="inline-flex min-h-[50px] items-center divide-x rounded-5 bg-primary text-white">
85+
<ul className="inline-flex min-h-[50px] items-center divide-x rounded-5 bg-accent text-white">
8686
{about.socialLinks.map((socialLink, index) => (
8787
<li key={index}>
8888
<CustomLink
@@ -149,11 +149,12 @@ export function Footer({ className, footerData, logoLight, logoDark }: SectionPr
149149
</div>
150150
)}
151151
</li>
152-
<li className={addressItemClasses}>
153-
<span className={addressIconParentClasses}>
154-
<FaPhone />
155-
</span>
156-
{columnTwo.phoneNumbers && columnTwo.phoneNumbers.length > 0 && (
152+
{columnTwo.phoneNumbers && columnTwo.phoneNumbers.length > 0 && (
153+
<li className={addressItemClasses}>
154+
<span className={addressIconParentClasses}>
155+
<FaPhone />
156+
</span>
157+
157158
<div className="grid gap-1">
158159
{columnTwo.phoneNumbers.map((phoneNumber, index) => (
159160
<a
@@ -165,57 +166,59 @@ export function Footer({ className, footerData, logoLight, logoDark }: SectionPr
165166
</a>
166167
))}
167168
</div>
168-
)}
169-
</li>
169+
</li>
170+
)}
170171
</ul>
171172
</div>
172173

173174
{/* Column three */}
174-
<div data-aos="fade-up" data-aos-delay="800">
175-
<h3 className={titleClasses}>{columnThree.title}</h3>
176-
{columnThree.blogs && columnThree.blogs.length > 0 && (
177-
<div className="grid gap-6">
178-
{columnThree.blogs.map((blog, index) => (
179-
<article
180-
key={index}
181-
className="group flex items-center gap-4 text-accent-800 dark:text-white"
182-
>
183-
<div className="flex-none overflow-hidden rounded-5">
184-
<Image
185-
{...blog.image}
186-
alt={blog.image.alt}
187-
width={80}
188-
height={80}
189-
className="object-cover transition-transform duration-700 group-hover:scale-105"
190-
/>
191-
</div>
192-
<div>
193-
<p className="flex items-center gap-2.5 dark:text-body">
194-
<span className="text-primary">
195-
<FaCalendarDays />
196-
</span>
197-
<span>{blog.date}</span>
198-
</p>
199-
<h4 className="text-md font-bold leading-normal">
200-
<CustomLink
201-
href={blog.slug}
202-
className="transition-colors duration-300 hover:text-primary"
203-
>
204-
{blog.title}
205-
</CustomLink>
206-
</h4>
207-
</div>
208-
</article>
209-
))}
210-
</div>
211-
)}
212-
</div>
175+
{columnThree && (
176+
<div data-aos="fade-up" data-aos-delay="800">
177+
<h3 className={titleClasses}>{columnThree.title}</h3>
178+
{columnThree.blogs && columnThree.blogs.length > 0 && (
179+
<div className="grid gap-6">
180+
{columnThree.blogs.map((blog, index) => (
181+
<article
182+
key={index}
183+
className="group flex items-center gap-4 text-accent-800 dark:text-white"
184+
>
185+
<div className="flex-none overflow-hidden rounded-5">
186+
<Image
187+
{...blog.image}
188+
alt={blog.image.alt}
189+
width={80}
190+
height={80}
191+
className="object-cover transition-transform duration-700 group-hover:scale-105"
192+
/>
193+
</div>
194+
<div>
195+
<p className="flex items-center gap-2.5 dark:text-body">
196+
<span className="text-accent">
197+
<FaCalendarDays />
198+
</span>
199+
<span>{blog.date}</span>
200+
</p>
201+
<h4 className="text-md font-bold leading-normal">
202+
<CustomLink
203+
href={blog.slug}
204+
className="transition-colors duration-300 hover:text-accent"
205+
>
206+
{blog.title}
207+
</CustomLink>
208+
</h4>
209+
</div>
210+
</article>
211+
))}
212+
</div>
213+
)}
214+
</div>
215+
)}
213216
</div>
214217
</div>
215218
</div>
216219
<div className="flex min-h-[90px] items-center border-t border-accent-800 border-opacity-20 py-5 dark:border-body dark:border-opacity-20">
217-
<div className="container">
218-
<div className="flex flex-wrap items-center justify-between gap-x-8 gap-y-4 md:gap-x-10">
220+
<div className="container">
221+
<div className="flex flex-wrap items-center justify-between gap-x-8 gap-y-4 md:gap-x-10">
219222
<p>{footerBottom.copyrightText}</p>
220223
{footerBottom.links && footerBottom.links.length > 0 && (
221224
<nav aria-label="footer bottom navigation">

0 commit comments

Comments
 (0)