Skip to content

Commit 61f6d63

Browse files
Abhijit-JhaAbhijit-Jha
authored
Merge pull request #5 from itshover/feat/sitemap
feat: add sponsor page with various support options and a footer comp…
2 parents d5542ea + 3e14c69 commit 61f6d63

2 files changed

Lines changed: 209 additions & 34 deletions

File tree

‎app/sponsor/sponsor-content.tsx‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const SponsorCard = ({
4040
initial={{ opacity: 0, y: 20 }}
4141
animate={{ opacity: 1, y: 0 }}
4242
transition={{ duration: 0.5, delay }}
43-
className="bg-card hover:border-primary/50 flex flex-col justify-between rounded-xl border p-6 shadow-sm transition-colors"
43+
className="bg-card hover:border-primary/50 flex min-w-0 flex-col justify-between overflow-hidden rounded-xl border p-6 shadow-sm transition-colors"
4444
>
4545
<div className="mb-4">
4646
<div className="mb-4 inline-flex rounded-lg bg-zinc-100 p-3 dark:bg-zinc-800">
@@ -65,15 +65,19 @@ const CopyField = ({ label, value }: { label: string; value: string }) => {
6565

6666
return (
6767
<div className="space-y-1.5">
68-
<span className="text-muted-foreground text-xs font-medium">{label}</span>
69-
<div className="bg-muted/50 flex items-center justify-between rounded-md border px-3 py-2">
70-
<code className="truncate font-mono text-sm">{value}</code>
68+
<span className="text-muted-foreground block text-xs font-medium wrap-break-word">
69+
{label}
70+
</span>
71+
<div className="bg-muted/50 flex items-center gap-2 rounded-md border px-3 py-2">
72+
<code className="min-w-0 flex-1 truncate font-mono text-xs sm:text-sm">
73+
{value}
74+
</code>
7175
<TooltipProvider>
7276
<Tooltip>
7377
<TooltipTrigger asChild>
7478
<button
7579
onClick={handleCopy}
76-
className="text-muted-foreground hover:text-foreground ml-2 flex justify-center text-center transition-colors"
80+
className="text-muted-foreground hover:text-foreground flex shrink-0 justify-center text-center transition-colors"
7781
>
7882
{copied ? (
7983
<CheckedIcon className="h-4 w-4 text-green-500" />
@@ -113,14 +117,19 @@ export default function SponsorContent() {
113117
inspire future updates. Alternatively, your feedback is incredibly
114118
valuable!
115119
</p>
116-
<div className="flex justify-center gap-4">
117-
<Button asChild size="lg" className="gap-2">
120+
<div className="flex flex-col justify-center gap-3 sm:flex-row sm:gap-4">
121+
<Button asChild size="lg" className="w-full gap-2 sm:w-auto">
118122
<Link href={LINKS.CREATOR} target="_blank">
119123
<MessageCircleIcon className="h-4 w-4" />
120124
Leave Feedback
121125
</Link>
122126
</Button>
123-
<Button asChild variant="outline" size="lg" className="gap-2">
127+
<Button
128+
asChild
129+
variant="outline"
130+
size="lg"
131+
className="w-full gap-2 sm:w-auto"
132+
>
124133
<Link href={LINKS.GITHUB} target="_blank">
125134
<GithubIcon className="h-4 w-4" />
126135
Star on GitHub
@@ -130,7 +139,7 @@ export default function SponsorContent() {
130139
</motion.div>
131140
</div>
132141

133-
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
142+
<div className="grid min-w-0 gap-6 md:grid-cols-2 lg:grid-cols-3">
134143
<SponsorCard
135144
title="Buy Me a Coffee"
136145
description="Support with a small donation."

‎components/footer.tsx‎

Lines changed: 191 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,206 @@
11
"use client";
2+
import { useState } from "react";
23
import Link from "next/link";
34
import { motion } from "motion/react";
4-
import { LINKS } from "@/constants";
5+
import { LINKS, SPONSOR } from "@/constants";
6+
import GithubIcon from "@/icons/github-icon";
7+
import TwitterXIcon from "@/icons/twitter-x-icon";
8+
import HeartIcon from "@/icons/heart-icon";
9+
import RocketIcon from "@/icons/rocket-icon";
10+
import StarIcon from "@/icons/star-icon";
11+
import SparklesIcon from "@/icons/sparkles-icon";
12+
import CoffeeIcon from "@/icons/coffee-icon";
13+
import CodeIcon from "@/icons/code-icon";
14+
import BulbSvg from "@/icons/bulb-svg";
15+
import FlameIcon from "@/icons/flame-icon";
16+
import LikeIcon from "@/icons/like-icon";
17+
import BookmarkIcon from "@/icons/bookmark-icon";
18+
import CameraIcon from "@/icons/camera-icon";
19+
import MoonIcon from "@/icons/moon-icon";
20+
import BellOffIcon from "@/icons/bell-off-icon";
21+
import LockIcon from "@/icons/lock-icon";
22+
import RefreshIcon from "@/icons/refresh-icon";
23+
import GearIcon from "@/icons/gear-icon";
24+
import MessageCircleIcon from "@/icons/message-circle-icon";
25+
import SendIcon from "@/icons/send-icon";
26+
import CheckedIcon from "@/icons/checked-icon";
27+
28+
const CryptoAddress = ({
29+
label,
30+
address,
31+
}: {
32+
label: string;
33+
address: string;
34+
}) => {
35+
const [copied, setCopied] = useState(false);
36+
37+
const handleCopy = async () => {
38+
await navigator.clipboard.writeText(address);
39+
setCopied(true);
40+
setTimeout(() => setCopied(false), 2000);
41+
};
42+
43+
return (
44+
<button
45+
onClick={handleCopy}
46+
className="hover:text-foreground group flex cursor-pointer items-center gap-1.5 text-left text-xs transition-colors"
47+
>
48+
<span className="truncate">
49+
{label}: {address.slice(0, 20)}...
50+
</span>
51+
{copied && <CheckedIcon className="h-3 w-3 shrink-0 text-green-500" />}
52+
</button>
53+
);
54+
};
555

656
const Footer = () => {
57+
const featuredIcons = [
58+
{ Icon: HeartIcon, name: "heart" },
59+
{ Icon: RocketIcon, name: "rocket" },
60+
{ Icon: StarIcon, name: "star" },
61+
{ Icon: SparklesIcon, name: "sparkles" },
62+
{ Icon: CoffeeIcon, name: "coffee" },
63+
{ Icon: CodeIcon, name: "code" },
64+
{ Icon: BulbSvg, name: "bulb" },
65+
{ Icon: FlameIcon, name: "flame" },
66+
{ Icon: LikeIcon, name: "like" },
67+
{ Icon: BookmarkIcon, name: "bookmark" },
68+
{ Icon: CameraIcon, name: "camera" },
69+
{ Icon: MoonIcon, name: "moon" },
70+
{ Icon: BellOffIcon, name: "bell-off" },
71+
{ Icon: LockIcon, name: "lock" },
72+
{ Icon: RefreshIcon, name: "refresh" },
73+
{ Icon: GearIcon, name: "gear" },
74+
{ Icon: MessageCircleIcon, name: "message" },
75+
{ Icon: SendIcon, name: "send" },
76+
{ Icon: GithubIcon, name: "github" },
77+
{ Icon: TwitterXIcon, name: "twitter" },
78+
];
79+
780
return (
881
<motion.footer
982
initial={{ opacity: 0, y: 20 }}
1083
whileInView={{ opacity: 1, y: 0 }}
1184
transition={{ duration: 0.5 }}
1285
viewport={{ once: true }}
13-
className="border-t py-6 md:py-0"
86+
className="border-t"
1487
>
15-
<div className="container mx-auto flex max-w-7xl flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
16-
<div className="flex flex-col items-center gap-4 px-8 md:flex-row md:gap-2 md:px-0">
17-
<p className="text-muted-foreground text-center text-sm leading-loose md:text-left">
18-
Built by{" "}
19-
<Link
20-
href={LINKS.CREATOR}
21-
target="_blank"
22-
rel="noreferrer"
23-
className="font-medium underline underline-offset-4"
24-
>
25-
Abhijit
26-
</Link>
27-
. The source code is available on{" "}
28-
<Link
29-
href={LINKS.GITHUB}
30-
target="_blank"
31-
rel="noreferrer"
32-
className="font-medium underline underline-offset-4"
33-
>
34-
GitHub
35-
</Link>
36-
.
37-
</p>
88+
<div className="w-full px-4 py-12 md:px-8 lg:px-12">
89+
<div className="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-4">
90+
<div className="space-y-4">
91+
<h3 className="text-lg font-semibold">Quick Links</h3>
92+
<nav className="flex flex-col space-y-3">
93+
<Link
94+
href="/"
95+
className="text-muted-foreground hover:text-foreground transition-colors"
96+
>
97+
Home
98+
</Link>
99+
<Link
100+
href="/icons"
101+
className="text-muted-foreground hover:text-foreground transition-colors"
102+
>
103+
Icons
104+
</Link>
105+
<Link
106+
href="/sponsor"
107+
className="text-muted-foreground hover:text-foreground transition-colors"
108+
>
109+
Sponsor
110+
</Link>
111+
<Link
112+
href={LINKS.GITHUB}
113+
target="_blank"
114+
rel="noreferrer"
115+
className="text-muted-foreground hover:text-foreground transition-colors"
116+
>
117+
GitHub
118+
</Link>
119+
</nav>
120+
</div>
121+
122+
<div className="space-y-4">
123+
<h3 className="text-lg font-semibold">Sponsor</h3>
124+
<div className="flex flex-col space-y-3">
125+
<Link
126+
href={SPONSOR.buymeacoffee}
127+
target="_blank"
128+
rel="noreferrer"
129+
className="text-muted-foreground hover:text-foreground inline-flex items-center gap-2 transition-colors"
130+
>
131+
<CoffeeIcon size={16} />
132+
Buy Me a Coffee
133+
</Link>
134+
<div className="text-muted-foreground space-y-2 text-sm">
135+
<p className="text-foreground font-medium">Crypto</p>
136+
<CryptoAddress label="BTC" address={SPONSOR.btc} />
137+
<CryptoAddress label="ETH" address={SPONSOR.eth} />
138+
<CryptoAddress label="SOL" address={SPONSOR.sol} />
139+
</div>
140+
</div>
141+
</div>
142+
143+
<div className="space-y-4 lg:col-span-2">
144+
<h3 className="text-lg font-semibold">Featured Icons</h3>
145+
<div className="grid grid-cols-5 gap-3 sm:grid-cols-6 md:grid-cols-5 lg:grid-cols-10">
146+
{featuredIcons.map(({ Icon, name }) => (
147+
<motion.div
148+
key={name}
149+
whileHover={{ scale: 1.1 }}
150+
className="hover:bg-accent flex items-center justify-center rounded-lg border p-2 transition-colors"
151+
>
152+
<Icon size={20} />
153+
</motion.div>
154+
))}
155+
</div>
156+
</div>
157+
</div>
158+
159+
<div className="mt-12 border-t pt-8">
160+
<div className="flex flex-col items-center justify-between gap-4 md:flex-row">
161+
<p className="text-muted-foreground text-center text-sm md:text-left">
162+
Built by{" "}
163+
<Link
164+
href={LINKS.CREATOR}
165+
target="_blank"
166+
rel="noreferrer"
167+
className="hover:text-foreground font-medium underline underline-offset-4 transition-colors"
168+
>
169+
Abhijit
170+
</Link>
171+
. The source code is available on{" "}
172+
<Link
173+
href={LINKS.GITHUB}
174+
target="_blank"
175+
rel="noreferrer"
176+
className="hover:text-foreground font-medium underline underline-offset-4 transition-colors"
177+
>
178+
GitHub
179+
</Link>
180+
.
181+
</p>
182+
183+
<div className="flex items-center gap-4">
184+
<Link
185+
href={LINKS.GITHUB}
186+
target="_blank"
187+
rel="noreferrer"
188+
className="text-muted-foreground hover:text-foreground transition-colors"
189+
aria-label="GitHub"
190+
>
191+
<GithubIcon size={20} />
192+
</Link>
193+
<Link
194+
href={LINKS.TWITTER}
195+
target="_blank"
196+
rel="noreferrer"
197+
className="text-muted-foreground hover:text-foreground transition-colors"
198+
aria-label="Twitter"
199+
>
200+
<TwitterXIcon size={20} />
201+
</Link>
202+
</div>
203+
</div>
38204
</div>
39205
</div>
40206
</motion.footer>

0 commit comments

Comments
 (0)