Skip to content

Commit e459165

Browse files
authored
Merge pull request #41 from user-64bit/main
feat: add social links in user profile
2 parents ac87ff6 + 65340ed commit e459165

File tree

1 file changed

+116
-98
lines changed
  • src/app/(pages)/profile/[username]

1 file changed

+116
-98
lines changed

src/app/(pages)/profile/[username]/page.tsx

Lines changed: 116 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -165,22 +165,24 @@ export default function BentoGridDemo() {
165165
<Accordion type="single" collapsible>
166166
{userName.githubUsername && (
167167
<AccordionItem value="github">
168-
<AccordionTrigger>
169-
<div className="w-full flex justify-start items-center gap-6">
170-
<Image
171-
src="/assets/profile/github.webp"
172-
alt="github"
173-
className="invert"
174-
width={40}
175-
height={40}
176-
priority={false}
177-
loading="lazy"
178-
placeholder="blur"
179-
blurDataURL="data:image/png;base64,..."
180-
/>
181-
<span className="text-base font-semibold ">
182-
{userName.githubUsername}
183-
</span>
168+
<AccordionTrigger className="hover:no-underline">
169+
<div className="w-full flex justify-start items-center">
170+
<a target="_blank" href={`https://github.com/${userName.githubUsername}`} className="flex items-center gap-6 hover:underline hover:opacity-80">
171+
<Image
172+
src="/assets/profile/github.webp"
173+
alt="github"
174+
className="invert"
175+
width={40}
176+
height={40}
177+
priority={false}
178+
loading="lazy"
179+
placeholder="blur"
180+
blurDataURL="data:image/png;base64,..."
181+
/>
182+
<span className="text-base font-semibold ">
183+
{userName.githubUsername}
184+
</span>
185+
</a>
184186
</div>
185187
</AccordionTrigger>
186188
<AccordionContent>
@@ -191,22 +193,24 @@ export default function BentoGridDemo() {
191193

192194
{userName.superteamUsername && (
193195
<AccordionItem value="superteam">
194-
<AccordionTrigger>
195-
<div className="w-full flex justify-start items-center gap-6">
196-
<Image
197-
src="/assets/profile/superteam.jpeg"
198-
alt="superteam"
199-
className="rounded-full"
200-
width={40}
201-
height={40}
202-
priority={false}
203-
loading="lazy"
204-
placeholder="blur"
205-
blurDataURL="data:image/png;base64,..."
206-
/>
207-
<span className="text-base font-semibold ">
208-
{userName.superteamUsername}
209-
</span>
196+
<AccordionTrigger className="hover:no-underline">
197+
<div className="w-full flex justify-start items-center">
198+
<a target="_blank" href={`https://earn.superteam.fun/t/${userName.superteamUsername}`} className="flex items-center gap-6 hover:underline hover:opacity-80">
199+
<Image
200+
src="/assets/profile/superteam.jpeg"
201+
alt="superteam"
202+
className="rounded-full"
203+
width={40}
204+
height={40}
205+
priority={false}
206+
loading="lazy"
207+
placeholder="blur"
208+
blurDataURL="data:image/png;base64,..."
209+
/>
210+
<span className="text-base font-semibold ">
211+
{userName.superteamUsername}
212+
</span>
213+
</a>
210214
</div>
211215
</AccordionTrigger>
212216
<AccordionContent>
@@ -217,22 +221,24 @@ export default function BentoGridDemo() {
217221

218222
{userName.leetcodeUsername && (
219223
<AccordionItem value="leetcode">
220-
<AccordionTrigger>
221-
<div className="w-full flex justify-start items-center gap-6">
222-
<Image
223-
src="/assets/profile/leetcode.webp"
224-
alt="leetcode"
225-
className="rounded-full"
226-
width={40}
227-
height={40}
228-
priority={false}
229-
loading="lazy"
230-
placeholder="blur"
231-
blurDataURL="data:image/png;base64,..."
232-
/>
233-
<span className="text-base font-semibold ">
234-
{userName.leetcodeUsername}
235-
</span>
224+
<AccordionTrigger className="hover:no-underline">
225+
<div className="w-full flex justify-start items-center">
226+
<a target="_blank" href={`https://leetcode.com/${userName.leetcodeUsername}`} className="flex items-center gap-6 hover:underline hover:opacity-80">
227+
<Image
228+
src="/assets/profile/leetcode.webp"
229+
alt="leetcode"
230+
className="rounded-full"
231+
width={40}
232+
height={40}
233+
priority={false}
234+
loading="lazy"
235+
placeholder="blur"
236+
blurDataURL="data:image/png;base64,..."
237+
/>
238+
<span className="text-base font-semibold ">
239+
{userName.leetcodeUsername}
240+
</span>
241+
</a>
236242
</div>
237243
</AccordionTrigger>
238244
<AccordionContent>
@@ -245,29 +251,34 @@ export default function BentoGridDemo() {
245251
<AccordionItem value="codeforces">
246252
<AccordionTrigger>Codeforces</AccordionTrigger>
247253
<AccordionContent>
248-
Username: {userName.codeforcesUsername}
254+
<span>Username:</span>
255+
<a href={`https://codeforces.com/profile/${userName.codeforcesUsername}`} target="_blank" className="underline">
256+
{userName.codeforcesUsername}
257+
</a>
249258
</AccordionContent>
250259
</AccordionItem>
251260
)}
252261

253262
{userName.hackerrankUsername && (
254263
<AccordionItem value="hackerrank">
255-
<AccordionTrigger>
256-
<div className="w-full flex justify-start items-center gap-6">
257-
<Image
258-
src="/assets/profile/hackerrank.webp"
259-
alt="hackerrank"
260-
className="rounded-full"
261-
width={40}
262-
height={40}
263-
priority={false}
264-
loading="lazy"
265-
placeholder="blur"
266-
blurDataURL="data:image/png;base64,..."
267-
/>
268-
<span className="text-base font-semibold ">
269-
{userName.hackerrankUsername}
270-
</span>
264+
<AccordionTrigger className="hover:no-underline">
265+
<div className="w-full flex justify-start items-center">
266+
<a target="_blank" href={`https://www.hackerrank.com/profile/${userName.hackerrankUsername}`} className="flex items-center gap-6 hover:underline hover:opacity-80">
267+
<Image
268+
src="/assets/profile/hackerrank.webp"
269+
alt="hackerrank"
270+
className="rounded-full"
271+
width={40}
272+
height={40}
273+
priority={false}
274+
loading="lazy"
275+
placeholder="blur"
276+
blurDataURL="data:image/png;base64,..."
277+
/>
278+
<span className="text-base font-semibold ">
279+
{userName.hackerrankUsername}
280+
</span>
281+
</a>
271282
</div>
272283
</AccordionTrigger>
273284
<AccordionContent>
@@ -278,22 +289,24 @@ export default function BentoGridDemo() {
278289

279290
{userName.codechefUsername && (
280291
<AccordionItem value="codechef">
281-
<AccordionTrigger>
282-
<div className="w-full flex justify-start items-center gap-6">
283-
<Image
284-
src="/assets/profile/codechef.png"
285-
alt="codechef"
286-
className="rounded-full aspect-square"
287-
width={40}
288-
height={40}
289-
priority={false}
290-
loading="lazy"
291-
placeholder="blur"
292-
blurDataURL="data:image/png;base64,..."
293-
/>
294-
<span className="text-base font-semibold ">
295-
{userName.codechefUsername}
296-
</span>
292+
<AccordionTrigger className="hover:no-underline">
293+
<div className="w-full flex justify-start items-center">
294+
<a target="_blank" href={`https://www.codechef.com/users/${userName.codechefUsername}`} className="flex items-center gap-6 hover:underline hover:opacity-80">
295+
<Image
296+
src="/assets/profile/codechef.png"
297+
alt="codechef"
298+
className="rounded-full aspect-square"
299+
width={40}
300+
height={40}
301+
priority={false}
302+
loading="lazy"
303+
placeholder="blur"
304+
blurDataURL="data:image/png;base64,..."
305+
/>
306+
<span className="text-base font-semibold ">
307+
{userName.codechefUsername}
308+
</span>
309+
</a>
297310
</div>
298311
</AccordionTrigger>
299312

@@ -305,22 +318,24 @@ export default function BentoGridDemo() {
305318

306319
{userName.gfgUsername && (
307320
<AccordionItem value="gfg">
308-
<AccordionTrigger>
309-
<div className="w-full flex justify-start items-center gap-6">
310-
<Image
311-
src="/assets/profile/gfg.png"
312-
alt="gfg"
313-
className="rounded-full aspect-square"
314-
width={40}
315-
height={40}
316-
priority={false}
317-
loading="lazy"
318-
placeholder="blur"
319-
blurDataURL="data:image/png;base64,..."
320-
/>
321-
<span className="text-base font-semibold ">
322-
{userName.gfgUsername}
323-
</span>
321+
<AccordionTrigger className="hover:no-underline">
322+
<div className="w-full flex justify-start items-center">
323+
<a target="_blank" href={`https://www.geeksforgeeks.org/user/${userName.gfgUsername}`} className="flex items-center gap-6 hover:underline hover:opacity-80">
324+
<Image
325+
src="/assets/profile/gfg.png"
326+
alt="gfg"
327+
className="rounded-full aspect-square"
328+
width={40}
329+
height={40}
330+
priority={false}
331+
loading="lazy"
332+
placeholder="blur"
333+
blurDataURL="data:image/png;base64,..."
334+
/>
335+
<span className="text-base font-semibold ">
336+
{userName.gfgUsername}
337+
</span>
338+
</a>
324339
</div>
325340
</AccordionTrigger>
326341
<AccordionContent>
@@ -333,7 +348,10 @@ export default function BentoGridDemo() {
333348
<AccordionItem value="gitlab">
334349
<AccordionTrigger>GitLab</AccordionTrigger>
335350
<AccordionContent>
336-
Username: {userName.gitlabUsername}
351+
<span>Username:</span>
352+
<a href={`https://gitlab.com/${userName.gitlabUsername}`} target="_blank" className="underline">
353+
{userName.gitlabUsername}
354+
</a>
337355
</AccordionContent>
338356
</AccordionItem>
339357
)}

0 commit comments

Comments
 (0)