Skip to content

Commit 065b757

Browse files
ProgrammerNomadProgrammerNomad
committed
Refactor SiteFooter component for improved structure and accessibility
- Introduced new FooterLinkItem type for better link management. - Created FooterLinkList and FooterColumn components to streamline footer layout. - Organized footer links into Product, Resources, and Community sections for clarity. - Enhanced styling for better responsiveness and user experience.
1 parent 9affc69 commit 065b757

1 file changed

Lines changed: 79 additions & 43 deletions

File tree

‎components/site-footer.tsx‎

Lines changed: 79 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,66 @@ import { siteFooterNav } from "@/lib/navigation";
33
import { siteConfig } from "@/content/homepage";
44
import { SiteLogo } from "@/components/site-logo";
55

6+
type FooterLinkItem = {
7+
label: string;
8+
href: string;
9+
external?: boolean;
10+
};
11+
12+
const productLinks: FooterLinkItem[] = [
13+
{ label: "Download", href: "/download" },
14+
{ label: "Releases", href: "/releases" },
15+
{ label: "What's new", href: "/whats-new" },
16+
];
17+
18+
const documentationLinks = siteFooterNav.documentation.filter(
19+
(item) => item.label !== "Download" && item.label !== "Releases",
20+
);
21+
22+
const communityLinks: FooterLinkItem[] = [
23+
{ label: "Community guidelines", href: "/community" },
24+
{ label: "Report an issue", href: `${siteConfig.githubUrl}/issues`, external: true },
25+
{ label: "Discussions", href: `${siteConfig.githubUrl}/discussions`, external: true },
26+
{
27+
label: "Contribute",
28+
href: `${siteConfig.githubUrl}/blob/main/CONTRIBUTING.md`,
29+
external: true,
30+
},
31+
];
32+
33+
function FooterLinkList({ items }: { items: readonly FooterLinkItem[] }) {
34+
return (
35+
<ul className="space-y-2.5 text-sm text-muted-foreground">
36+
{items.map((item) => (
37+
<li key={item.href}>
38+
{item.external ? (
39+
<a href={item.href} target="_blank" rel="noopener noreferrer" className="transition-colors hover:text-foreground">
40+
{item.label}
41+
</a>
42+
) : (
43+
<Link href={item.href} className="transition-colors hover:text-foreground">
44+
{item.label}
45+
</Link>
46+
)}
47+
</li>
48+
))}
49+
</ul>
50+
);
51+
}
52+
53+
function FooterColumn({ title, items }: { title: string; items: readonly FooterLinkItem[] }) {
54+
return (
55+
<section>
56+
<h2 className="mb-4 text-sm font-semibold text-foreground">{title}</h2>
57+
<FooterLinkList items={items} />
58+
</section>
59+
);
60+
}
61+
662
export function SiteFooter() {
763
return (
864
<footer className="mt-auto border-t border-border/60 bg-muted/30">
9-
<div className="mx-auto grid max-w-6xl gap-10 px-4 py-12 sm:px-6 md:grid-cols-[1.4fr_1fr_1fr_1fr]">
65+
<div className="mx-auto grid max-w-6xl gap-10 px-4 py-12 sm:px-6 lg:grid-cols-[minmax(220px,1.1fr)_minmax(0,2.9fr)] lg:gap-14">
1066
<div className="max-w-xs">
1167
<Link href="/" aria-label={siteConfig.name}>
1268
<SiteLogo />
@@ -15,52 +71,32 @@ export function SiteFooter() {
1571
A local Apache, PHP, and MySQL environment for Windows developers.
1672
</p>
1773
</div>
18-
<div>
19-
<p className="mb-3 text-sm font-semibold">Product</p>
20-
<ul className="space-y-2 text-sm text-muted-foreground">
21-
<li><Link href="/download" className="hover:text-foreground">Download</Link></li>
22-
<li><Link href="/releases" className="hover:text-foreground">Releases</Link></li>
23-
<li><Link href="/whats-new" className="hover:text-foreground">What&apos;s new</Link></li>
24-
</ul>
25-
</div>
26-
<div>
27-
<p className="mb-3 text-sm font-semibold">Documentation</p>
28-
<ul className="space-y-1.5 text-sm text-muted-foreground">
29-
{siteFooterNav.documentation.map((item) => (
30-
<li key={item.href}>
31-
<Link href={item.href} className="hover:text-foreground">
32-
{item.label}
33-
</Link>
34-
</li>
35-
))}
36-
</ul>
37-
</div>
38-
<div>
39-
<p className="mb-3 text-sm font-semibold">Community</p>
40-
<ul className="space-y-2 text-sm text-muted-foreground">
41-
<li><Link href="/community" className="hover:text-foreground">Community guidelines</Link></li>
42-
<li><a href={`${siteConfig.githubUrl}/issues`} target="_blank" rel="noopener noreferrer" className="hover:text-foreground">Report an issue</a></li>
43-
<li><a href={`${siteConfig.githubUrl}/discussions`} target="_blank" rel="noopener noreferrer" className="hover:text-foreground">Discussions</a></li>
44-
<li><a href={`${siteConfig.githubUrl}/blob/main/CONTRIBUTING.md`} target="_blank" rel="noopener noreferrer" className="hover:text-foreground">Contribute</a></li>
45-
</ul>
46-
</div>
47-
<div>
48-
<p className="mb-3 text-sm font-semibold">Legal</p>
49-
<ul className="space-y-2 text-sm text-muted-foreground">
50-
{siteFooterNav.legal.map((item) => (
51-
<li key={item.href}>
52-
<Link href={item.href} className="hover:text-foreground">
53-
{item.label}
54-
</Link>
55-
</li>
56-
))}
57-
</ul>
58-
</div>
74+
75+
<nav aria-label="Footer navigation" className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
76+
<FooterColumn title="Product" items={productLinks} />
77+
<section>
78+
<h2 className="mb-4 text-sm font-semibold text-foreground">Resources</h2>
79+
<div className="space-y-7">
80+
<div>
81+
<h3 className="mb-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground">Documentation</h3>
82+
<FooterLinkList items={documentationLinks} />
83+
</div>
84+
<div>
85+
<h3 className="mb-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground">Legal</h3>
86+
<FooterLinkList items={siteFooterNav.legal} />
87+
</div>
88+
</div>
89+
</section>
90+
<FooterColumn title="Community" items={communityLinks} />
91+
</nav>
5992
</div>
93+
6094
<div className="border-t border-border/60 px-4 py-5 text-sm text-muted-foreground sm:px-6">
6195
<div className="mx-auto flex max-w-6xl flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
6296
<p>© {new Date().getFullYear()} DevStackBox</p>
63-
<a href={siteConfig.githubUrl} target="_blank" rel="noopener noreferrer" className="hover:text-foreground">Open-source project on GitHub</a>
97+
<a href={siteConfig.githubUrl} target="_blank" rel="noopener noreferrer" className="transition-colors hover:text-foreground">
98+
Open-source project on GitHub
99+
</a>
64100
</div>
65101
</div>
66102
</footer>

0 commit comments

Comments
 (0)