Skip to content

Commit 3e68714

Browse files
nikohoffrennikohoffren
committed
style: add Sponsor button to footer
1 parent c7fb0a9 commit 3e68714

3 files changed

Lines changed: 52 additions & 26 deletions

File tree

‎components/buttons/Sponsor.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/* eslint-disable @next/next/no-img-element */
2+
function Sponsor() {
3+
return (
4+
<a
5+
className='inline-block'
6+
target='_blank'
7+
rel='noopener noreferrer'
8+
href='https://github.com/sponsors/nikohoffren?o=esc'
9+
>
10+
<img
11+
className='h-6'
12+
src='https://img.shields.io/badge/sponsor-30363D?style=for-the-badge&logo=GitHub-Sponsors'
13+
alt='Sponsor'
14+
/>
15+
</a>
16+
)
17+
}
18+
19+
export default Sponsor

‎components/layout/Footer.tsx‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Image from 'next/image'
44
import { StarFilled } from '@ant-design/icons'
55
import { useEffect, useState } from 'react'
66
import Coffee from '../buttons/Coffee'
7+
import Sponsor from '../buttons/Sponsor'
78

89
const Footer = () => {
910
const [starCount, setStarCount] = useState<number | null>(null)
@@ -46,7 +47,7 @@ const Footer = () => {
4647
href='https://github.com/fork-commit-merge/fork-commit-merge'
4748
target='_blank'
4849
rel='noopener noreferrer'
49-
className='hover:text-modern-purple text-gray-400'
50+
className='text-gray-400 hover:text-modern-purple'
5051
aria-label='GitHub'
5152
>
5253
<svg
@@ -62,6 +63,7 @@ const Footer = () => {
6263
</svg>
6364
</a>
6465
<Coffee />
66+
<Sponsor />
6567
</div>
6668
</div>
6769

@@ -73,7 +75,7 @@ const Footer = () => {
7375
href='https://nextjs.org/'
7476
target='_blank'
7577
rel='noopener noreferrer'
76-
className='hover:text-modern-purple text-sm text-gray-600'
78+
className='text-sm text-gray-600 hover:text-modern-purple'
7779
>
7880
Next.js
7981
</a>
@@ -83,7 +85,7 @@ const Footer = () => {
8385
href='https://vercel.com/'
8486
target='_blank'
8587
rel='noopener noreferrer'
86-
className='hover:text-modern-purple text-sm text-gray-600'
88+
className='text-sm text-gray-600 hover:text-modern-purple'
8789
>
8890
Vercel
8991
</a>
@@ -93,7 +95,7 @@ const Footer = () => {
9395
href='https://mongodb.com/'
9496
target='_blank'
9597
rel='noopener noreferrer'
96-
className='hover:text-modern-purple text-sm text-gray-600'
98+
className='text-sm text-gray-600 hover:text-modern-purple'
9799
>
98100
MongoDB
99101
</a>
@@ -103,7 +105,7 @@ const Footer = () => {
103105
href='https://github.com/fork-commit-merge/fork-commit-merge'
104106
target='_blank'
105107
rel='noopener noreferrer'
106-
className='hover:text-modern-purple group flex items-center text-sm text-gray-600'
108+
className='group flex items-center text-sm text-gray-600 hover:text-modern-purple'
107109
>
108110
<span>GitHub Stars</span>
109111
{starCount !== null ? (
@@ -126,15 +128,15 @@ const Footer = () => {
126128
href='https://github.com/fork-commit-merge/fork-commit-merge/blob/main/CONTRIBUTING.md'
127129
target='_blank'
128130
rel='noopener noreferrer'
129-
className='hover:text-modern-purple text-sm text-gray-600'
131+
className='text-sm text-gray-600 hover:text-modern-purple'
130132
>
131133
Contributing
132134
</Link>
133135
</li>
134136
<li>
135137
<Link
136138
href='/privacy-policy'
137-
className='hover:text-modern-purple text-sm text-gray-600'
139+
className='text-sm text-gray-600 hover:text-modern-purple'
138140
>
139141
Privacy Policy
140142
</Link>
@@ -144,7 +146,7 @@ const Footer = () => {
144146
href='https://github.com/nikohoffren'
145147
target='_blank'
146148
rel='noopener noreferrer'
147-
className='hover:text-modern-purple text-sm text-gray-600'
149+
className='text-sm text-gray-600 hover:text-modern-purple'
148150
>
149151
Contact
150152
</Link>
@@ -154,7 +156,7 @@ const Footer = () => {
154156
href='https://github.com/fork-commit-merge/fork-commit-merge/blob/main/CODE_OF_CONDUCT.md'
155157
target='_blank'
156158
rel='noopener noreferrer'
157-
className='hover:text-modern-purple text-sm text-gray-600'
159+
className='text-sm text-gray-600 hover:text-modern-purple'
158160
>
159161
Code of Conduct
160162
</Link>
@@ -168,23 +170,23 @@ const Footer = () => {
168170
<li>
169171
<Link
170172
href='/faq'
171-
className='hover:text-modern-purple text-sm text-gray-600'
173+
className='text-sm text-gray-600 hover:text-modern-purple'
172174
>
173175
FAQ
174176
</Link>
175177
</li>
176178
<li>
177179
<Link
178180
href='/resources'
179-
className='hover:text-modern-purple text-sm text-gray-600'
181+
className='text-sm text-gray-600 hover:text-modern-purple'
180182
>
181183
Resources
182184
</Link>
183185
</li>
184186
<li>
185187
<Link
186188
href='/ai'
187-
className='hover:text-modern-purple text-sm text-gray-600'
189+
className='text-sm text-gray-600 hover:text-modern-purple'
188190
>
189191
AI Tools
190192
</Link>
@@ -194,7 +196,7 @@ const Footer = () => {
194196
href='https://opensource.org/'
195197
target='_blank'
196198
rel='noopener noreferrer'
197-
className='hover:text-modern-purple text-sm text-gray-600'
199+
className='text-sm text-gray-600 hover:text-modern-purple'
198200
>
199201
opensource.org
200202
</Link>

‎styles/tailwind.css‎

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -33,25 +33,25 @@
3333
}
3434

3535
.modern-card {
36-
@apply shadow-modern hover:shadow-modern-hover rounded-lg p-6 transition-all duration-200;
36+
@apply rounded-lg p-6 shadow-modern transition-all duration-200 hover:shadow-modern-hover;
3737
background-color: var(--bg-secondary);
3838
}
3939

4040
.modern-button {
41-
@apply bg-modern-purple hover:bg-modern-darkPurple focus:ring-modern-purple inline-flex items-center rounded-md border border-transparent px-4 py-2 text-sm font-medium text-white transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
41+
@apply inline-flex items-center rounded-md border border-transparent bg-modern-purple px-4 py-2 text-sm font-medium text-white transition-colors duration-200 hover:bg-modern-darkPurple focus:outline-none focus:ring-2 focus:ring-modern-purple focus:ring-offset-2;
4242
}
4343

4444
.hero-button {
45-
@apply bg-modern-purple hover:bg-modern-darkPurple focus:ring-modern-purple inline-flex items-center rounded-md border border-transparent px-6 py-3 text-2xl font-medium text-white transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
45+
@apply inline-flex items-center rounded-md border border-transparent bg-modern-purple px-6 py-3 text-2xl font-medium text-white transition-colors duration-200 hover:bg-modern-darkPurple focus:outline-none focus:ring-2 focus:ring-modern-purple focus:ring-offset-2;
4646
}
4747

4848
.modern-button-outline {
49-
@apply border-modern-purple text-modern-purple hover:bg-modern-purple focus:ring-modern-purple inline-flex items-center rounded-md border px-4 py-2 text-sm font-medium transition-colors duration-200 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2;
49+
@apply inline-flex items-center rounded-md border border-modern-purple px-4 py-2 text-sm font-medium text-modern-purple transition-colors duration-200 hover:bg-modern-purple hover:text-white focus:outline-none focus:ring-2 focus:ring-modern-purple focus:ring-offset-2;
5050
background-color: var(--bg-primary);
5151
}
5252

5353
.hero-button-outline {
54-
@apply border-modern-purple text-modern-purple hover:bg-modern-purple focus:ring-modern-purple inline-flex items-center rounded-md border px-6 py-3 text-2xl font-medium transition-colors duration-200 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2;
54+
@apply inline-flex items-center rounded-md border border-modern-purple px-6 py-3 text-2xl font-medium text-modern-purple transition-colors duration-200 hover:bg-modern-purple hover:text-white focus:outline-none focus:ring-2 focus:ring-modern-purple focus:ring-offset-2;
5555
background-color: var(--bg-primary);
5656
}
5757

@@ -125,11 +125,21 @@ body {
125125

126126
/* Buy me a coffee button */
127127
.buyButton {
128-
@apply relative inline-block transition-transform duration-200 hover:scale-110;
128+
text-decoration: none;
129+
color: #ffffff;
130+
background-color: #ffffff;
131+
border-radius: 6px;
132+
padding: 0.2rem;
133+
box-shadow: 0px 1px 2px rgba(190, 190, 190, 0.5);
134+
width: 1.5rem;
129135
}
130136

131-
.buyButton img {
132-
@apply transition-opacity duration-200;
137+
.buyButton:hover,
138+
.buyButton:active,
139+
.buyButton:focus {
140+
box-shadow: 0px 1px 2px 2px rgb(248, 178, 87);
141+
opacity: 0.85;
142+
color: #ffffff;
133143
}
134144

135145
/* Theme-specific styles */
@@ -188,8 +198,3 @@ body {
188198
.theme-dark .hover\:text-gray-700:hover {
189199
@apply hover:text-gray-200;
190200
}
191-
192-
.theme-dark .buyButton img {
193-
filter: brightness(0) invert(1);
194-
}
195-

0 commit comments

Comments
 (0)