Skip to content

Commit 428cf26

Browse files
committed
feat: add Footer section
1 parent 7eeeed9 commit 428cf26

File tree

4 files changed

+74
-2
lines changed

4 files changed

+74
-2
lines changed

app/(www)/layout.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
import { MainNav } from "@/components/main-nav";
21
import { navConfig } from "@/config/nav";
2+
import { siteConfig } from "@/config/site";
3+
import { MainNav } from "@/components/main-nav";
4+
import { Footer } from "@/components/footer";
35

46
interface IndexPageLayoutProps {
57
children: React.ReactNode
@@ -12,6 +14,7 @@ export default async function IndexPageLayout({ children }: IndexPageLayoutProps
1214
<main className="container max-w-6xl px-4 sm:px-8">
1315
{children}
1416
</main>
17+
<Footer {...siteConfig} />
1518
</div>
1619
)
1720
}

components/footer.tsx

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import Link from "next/link";
2+
import { cn } from "@/lib/utils";
3+
import { Icons } from "@/components/icons";
4+
import { Capitalise } from "@/components/capitalise";
5+
import { buttonVariants } from "@/components/ui/button";
6+
import { getAProblemFirstQuote } from "@/data/problem-first-quote";
7+
import type { SiteConfig } from "@/types";
8+
9+
interface FooterProps extends SiteConfig {}
10+
11+
export function Footer({ title, author, links }: FooterProps) {
12+
return(
13+
<footer>
14+
<div className="container max-w-6xl px-4 sm:px-8 space-y-10 pb-10">
15+
<div className="border-t w-full" />
16+
17+
<div className="flex flex-col lg:flex-row lg:justify-between gap-10">
18+
<div className="space-y-4 max-w-lg">
19+
<Link href="/" className="flex items-center space-x-2">
20+
<Icons.logo className="w-9 h-9 dark:invert" />
21+
<span className="flex flex-col justify-end">
22+
<span className="font-bold">
23+
{ title }
24+
</span>
25+
<span className="text-xs opacity-50">
26+
/@{ author }
27+
</span>
28+
</span>
29+
</Link>
30+
<p>{ getAProblemFirstQuote() }</p>
31+
</div>
32+
33+
<div className="space-y-4">
34+
<h3 className="text-lg md:text-2xl font-semibold leading-none tracking-tight">
35+
Connect with me
36+
</h3>
37+
<div className="flex flex-wrap gap-2">
38+
{Object.keys(links).map((key, index) => {
39+
const Icon = Icons[key as keyof typeof Icons];
40+
const link = links[key as keyof typeof links];
41+
return (
42+
<Link key={index} href={link} target="_blank" className={cn(buttonVariants({ variant: "outline" }), "gap-2")}>
43+
<Icon className="w-4 h-4" /> <Capitalise text={key} />
44+
</Link>
45+
)}
46+
)}
47+
</div>
48+
</div>
49+
</div>
50+
51+
<p className="text-sm text-muted-foreground">© { (new Date).getFullYear() } { title }.</p>
52+
</div>
53+
</footer>
54+
)
55+
}

data/problem-first-quote.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import type { Quote } from "@/types";
2+
3+
export const quotes: Quote[] = [
4+
"In the realm of software development, the true brilliance lies not in chasing shiny stacks or tools, but in embracing problem-solving as our guiding light. Innovation flourishes when we channel our energy into crafting solutions that stand the test of challenges.",
5+
"In software devlopment, it's problem-solving that illuminates the path, not the allure of shiny stacks. Solutions reign supreme over trends.",
6+
"In software engineering, problem-solving shines brighter than trendy tools. Solutions outlast the trends and hype."
7+
];
8+
9+
export const getAProblemFirstQuote = (quoteList: Quote[] = quotes): string => {
10+
const idx = Math.floor(Math.random() * quoteList.length);
11+
return quoteList[idx];
12+
}

types/index.d.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,6 @@ export type SiteConfig = {
2424

2525
export type NavConfig = {
2626
items: MainNavItem[]
27-
}
27+
}
28+
29+
export type Quote = string

0 commit comments

Comments
 (0)