Skip to content

Commit

Permalink
Merge pull request #9 from priyankarpal/fix-issue-6
Browse files Browse the repository at this point in the history 
refactor: footer.tsx
  • Loading branch information
@ezhillragesh
ezhillragesh authored Jan 8, 2024
2 parents 5875f4a + b22b01a commit 687d10b
Show file tree
Hide file tree
Showing 2 changed files with 109 additions and 97 deletions.
205 changes: 108 additions & 97 deletions comps/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,79 @@
import React from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
// Import icons
import { LinkedInLogoIcon, TwitterLogoIcon, GitHubLogoIcon, DiscordLogoIcon } from "@radix-ui/react-icons";
import React from "react";
import Image from "next/image";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import {
LinkedInLogoIcon,
TwitterLogoIcon,
GitHubLogoIcon,
DiscordLogoIcon,
} from "@radix-ui/react-icons";

const Footer: React.FC = () => {
// footer links
const FooterLinks = [
{
title: "Connect",
links: [
{
name: "LinkedIn",
href: "https://www.linkedin.com/company/sourceguide",
icon: <LinkedInLogoIcon className="w-5 h-5" />,
className: "hover:text-gray-900 dark:hover:text-white",
},
{
name: "Twitter",
href: "https://twitter.com/sourceguidehq",
icon: <TwitterLogoIcon className="w-5 h-5" />,
},
{
name: "GitHub",
href: "https://github.com/sourceguidehq",
icon: <GitHubLogoIcon className="w-5 h-5" />,
},
{
name: "Discord",
href: "https://discord.com/invite/t3Gzz9bF",
icon: <DiscordLogoIcon className="w-5 h-5" />,
},
],
},
{
title: "Explore",
links: [
{
name: "About us",
href: "/about",
},
{
name: "Programs",
href: "/programs",
},
{
name: "Issues",
href: "/issues",
},
{
name: "Join us",
href: "/join",
},
],
},
{
title: "Legal",
links: [
{
name: "Privacy Policy",
href: "/privacy",
},
{
name: "Terms & Conditions",
href: "/terms",
},
],
},
];

return (
<footer className="bg-[#09090B]">
<div className="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8">
Expand All @@ -22,109 +90,52 @@ const Footer: React.FC = () => {
<span className="self-center text-2xl font-semibold whitespace-nowrap text-white">
SourceGuide
</span>
</a>
<p className="text-lg text-gray-400 dark:text-gray-500">Open Source for All</p>
</a>
<p className="text-lg text-gray-400 dark:text-gray-500">
Open Source for All
</p>
</div>
<div className="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
<div className="text-center">
<h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase text-white">
Connect
</h2>
<ul className="text-gray-500 dark:text-gray-400 font-medium flex space-x-4 justify-center">
<li>
<a
href="https://www.linkedin.com/company/sourceguide"
className="hover:text-gray-900 dark:hover:text-white"
>
<LinkedInLogoIcon className="w-5 h-5" />
</a>
</li>
<li>
<a
href="https://twitter.com/sourceguidehq"
className="hover:text-gray-900 dark:hover:text-white"
>
<TwitterLogoIcon className="w-5 h-5" />
</a>
</li>
<li>
<a
href="https://github.com/sourceguidehq"
className="hover:text-gray-900 dark:hover:text-white"
>
<GitHubLogoIcon className="w-5 h-5" />
</a>
</li>
<li>
<a
href="https://discord.gg/t3Gzz9bF"
className="hover:text-gray-900 dark:hover:text-white"
>
<DiscordLogoIcon className="w-5 h-5" />
</a>
</li>
</ul>
</div>
<div>
<h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase text-white">
Explore
</h2>
<ul className="text-gray-500 dark:text-gray-400 font-medium">
<li className="mb-4">
<Link href="/about">
About us
</Link>
</li>
<li className="mb-4">
<Link href="/programs">
Programs
</Link>
</li>
<li className="mb-4">
<Link href="/issues">
Issues
</Link>
</li>
<li>
<Link href="/join">
Join us
</Link>
</li>
</ul>
</div>
<div>
<h2 className="mb-6 text-sm font-semibold uppercase text-white">
Legal
</h2>
<ul className="text-gray-500 dark:text-gray-400 font-medium">
<li className="mb-4">
<a href="/privacy" className="hover:underline" target='_blank'>
Privacy Policy
</a>
</li>
<li>
<a href="/terms" className="hover:underline" target='_blank'>
Terms &amp; Conditions
</a>
</li>
</ul>
</div>
{FooterLinks.map((footerLink, index) => (
<div key={index}>
<h2 className="mb-6 text-sm font-semibold uppercase text-white">
{footerLink?.title}
</h2>
<ul className="text-gray-500 dark:text-gray-400 font-medium">
{footerLink.links.map((link, index) => (
<li key={index} className="mb-4">
<Link
className="hover:underline flex gap-5"
href={link?.href}
>
{link?.icon}
{link?.name}
</Link>
</li>
))}
</ul>
</div>
))}
</div>
</div>
<hr className="my-6 border-gray-700 lg:my-8" />
<div className="sm:flex sm:items-center sm:justify-between">
<span className="text-sm text-gray-400 sm:text-center dark:text-gray-500">
© 2023{' '}
<a href="https://sourceguide.com/" className="hover:underline dark:text-white">
© 2023{" "}
<a
href="https://sourceguide.com/"
className="hover:underline dark:text-white"
>
SourceGuide™
</a>
. All Rights Reserved.
</span>
<div className="flex mt-4 sm:justify-center sm:mt-0 space-x-4">
<Link href="https://www.buymeacoffee.com/sourceguide" target='_blank'>
<Button>
Donate Now
</Button>
<Link
href="https://www.buymeacoffee.com/sourceguide"
target="_blank"
>
<Button>Donate Now</Button>
</Link>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"lint": "next lint"
},
"dependencies": {

"@bradgarropy/next-google-analytics": "^1.0.2",
"@next/font": "^14.0.4",
"@radix-ui/react-accordion": "^1.1.2",
Expand Down

0 comments on commit 687d10b

Please sign in to comment.