Skip to content

Commit 687d10b

Browse files
ezhillrageshezhillragesh
authored
Merge pull request #9 from priyankarpal/fix-issue-6
refactor: footer.tsx
2 parents 5875f4a + b22b01a commit 687d10b

File tree

2 files changed

+109
-97
lines changed

2 files changed

+109
-97
lines changed

‎comps/Footer.tsx

Lines changed: 108 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,79 @@
1-
import React from 'react';
2-
import Image from 'next/image';
3-
import Link from 'next/link';
4-
import { Button } from '@/components/ui/button';
5-
// Import icons
6-
import { LinkedInLogoIcon, TwitterLogoIcon, GitHubLogoIcon, DiscordLogoIcon } from "@radix-ui/react-icons";
1+
import React from "react";
2+
import Image from "next/image";
3+
import Link from "next/link";
4+
import { Button } from "@/components/ui/button";
5+
import {
6+
LinkedInLogoIcon,
7+
TwitterLogoIcon,
8+
GitHubLogoIcon,
9+
DiscordLogoIcon,
10+
} from "@radix-ui/react-icons";
711

812
const Footer: React.FC = () => {
13+
// footer links
14+
const FooterLinks = [
15+
{
16+
title: "Connect",
17+
links: [
18+
{
19+
name: "LinkedIn",
20+
href: "https://www.linkedin.com/company/sourceguide",
21+
icon: <LinkedInLogoIcon className="w-5 h-5" />,
22+
className: "hover:text-gray-900 dark:hover:text-white",
23+
},
24+
{
25+
name: "Twitter",
26+
href: "https://twitter.com/sourceguidehq",
27+
icon: <TwitterLogoIcon className="w-5 h-5" />,
28+
},
29+
{
30+
name: "GitHub",
31+
href: "https://github.com/sourceguidehq",
32+
icon: <GitHubLogoIcon className="w-5 h-5" />,
33+
},
34+
{
35+
name: "Discord",
36+
href: "https://discord.com/invite/t3Gzz9bF",
37+
icon: <DiscordLogoIcon className="w-5 h-5" />,
38+
},
39+
],
40+
},
41+
{
42+
title: "Explore",
43+
links: [
44+
{
45+
name: "About us",
46+
href: "/about",
47+
},
48+
{
49+
name: "Programs",
50+
href: "/programs",
51+
},
52+
{
53+
name: "Issues",
54+
href: "/issues",
55+
},
56+
{
57+
name: "Join us",
58+
href: "/join",
59+
},
60+
],
61+
},
62+
{
63+
title: "Legal",
64+
links: [
65+
{
66+
name: "Privacy Policy",
67+
href: "/privacy",
68+
},
69+
{
70+
name: "Terms & Conditions",
71+
href: "/terms",
72+
},
73+
],
74+
},
75+
];
76+
977
return (
1078
<footer className="bg-[#09090B]">
1179
<div className="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8">
@@ -22,109 +90,52 @@ const Footer: React.FC = () => {
2290
<span className="self-center text-2xl font-semibold whitespace-nowrap text-white">
2391
SourceGuide
2492
</span>
25-
</a>
26-
<p className="text-lg text-gray-400 dark:text-gray-500">Open Source for All</p>
93+
</a>
94+
<p className="text-lg text-gray-400 dark:text-gray-500">
95+
Open Source for All
96+
</p>
2797
</div>
2898
<div className="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
29-
<div className="text-center">
30-
<h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase text-white">
31-
Connect
32-
</h2>
33-
<ul className="text-gray-500 dark:text-gray-400 font-medium flex space-x-4 justify-center">
34-
<li>
35-
<a
36-
href="https://www.linkedin.com/company/sourceguide"
37-
className="hover:text-gray-900 dark:hover:text-white"
38-
>
39-
<LinkedInLogoIcon className="w-5 h-5" />
40-
</a>
41-
</li>
42-
<li>
43-
<a
44-
href="https://twitter.com/sourceguidehq"
45-
className="hover:text-gray-900 dark:hover:text-white"
46-
>
47-
<TwitterLogoIcon className="w-5 h-5" />
48-
</a>
49-
</li>
50-
<li>
51-
<a
52-
href="https://github.com/sourceguidehq"
53-
className="hover:text-gray-900 dark:hover:text-white"
54-
>
55-
<GitHubLogoIcon className="w-5 h-5" />
56-
</a>
57-
</li>
58-
<li>
59-
<a
60-
href="https://discord.gg/t3Gzz9bF"
61-
className="hover:text-gray-900 dark:hover:text-white"
62-
>
63-
<DiscordLogoIcon className="w-5 h-5" />
64-
</a>
65-
</li>
66-
</ul>
67-
</div>
68-
<div>
69-
<h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase text-white">
70-
Explore
71-
</h2>
72-
<ul className="text-gray-500 dark:text-gray-400 font-medium">
73-
<li className="mb-4">
74-
<Link href="/about">
75-
About us
76-
</Link>
77-
</li>
78-
<li className="mb-4">
79-
<Link href="/programs">
80-
Programs
81-
</Link>
82-
</li>
83-
<li className="mb-4">
84-
<Link href="/issues">
85-
Issues
86-
</Link>
87-
</li>
88-
<li>
89-
<Link href="/join">
90-
Join us
91-
</Link>
92-
</li>
93-
</ul>
94-
</div>
95-
<div>
96-
<h2 className="mb-6 text-sm font-semibold uppercase text-white">
97-
Legal
98-
</h2>
99-
<ul className="text-gray-500 dark:text-gray-400 font-medium">
100-
<li className="mb-4">
101-
<a href="/privacy" className="hover:underline" target='_blank'>
102-
Privacy Policy
103-
</a>
104-
</li>
105-
<li>
106-
<a href="/terms" className="hover:underline" target='_blank'>
107-
Terms &amp; Conditions
108-
</a>
109-
</li>
110-
</ul>
111-
</div>
99+
{FooterLinks.map((footerLink, index) => (
100+
<div key={index}>
101+
<h2 className="mb-6 text-sm font-semibold uppercase text-white">
102+
{footerLink?.title}
103+
</h2>
104+
<ul className="text-gray-500 dark:text-gray-400 font-medium">
105+
{footerLink.links.map((link, index) => (
106+
<li key={index} className="mb-4">
107+
<Link
108+
className="hover:underline flex gap-5"
109+
href={link?.href}
110+
>
111+
{link?.icon}
112+
{link?.name}
113+
</Link>
114+
</li>
115+
))}
116+
</ul>
117+
</div>
118+
))}
112119
</div>
113120
</div>
114121
<hr className="my-6 border-gray-700 lg:my-8" />
115122
<div className="sm:flex sm:items-center sm:justify-between">
116123
<span className="text-sm text-gray-400 sm:text-center dark:text-gray-500">
117-
© 2023{' '}
118-
<a href="https://sourceguide.com/" className="hover:underline dark:text-white">
124+
© 2023{" "}
125+
<a
126+
href="https://sourceguide.com/"
127+
className="hover:underline dark:text-white"
128+
>
119129
SourceGuide™
120130
</a>
121131
. All Rights Reserved.
122132
</span>
123133
<div className="flex mt-4 sm:justify-center sm:mt-0 space-x-4">
124-
<Link href="https://www.buymeacoffee.com/sourceguide" target='_blank'>
125-
<Button>
126-
Donate Now
127-
</Button>
134+
<Link
135+
href="https://www.buymeacoffee.com/sourceguide"
136+
target="_blank"
137+
>
138+
<Button>Donate Now</Button>
128139
</Link>
129140
</div>
130141
</div>

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12+
1213
"@bradgarropy/next-google-analytics": "^1.0.2",
1314
"@next/font": "^14.0.4",
1415
"@radix-ui/react-accordion": "^1.1.2",

0 commit comments

Comments
 (0)