Skip to content

updated footer with better ui/ux #295

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mehul-m-prajapati merged 3 commits into from
May 20, 2026
Merged

updated footer with better ui/ux #295

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b2fce9e
updated footer with better ui/ux
ArshiBansal May 17, 2026
0c9b844
Merge remote-tracking branch 'upstream/main' into Update_footer
ArshiBansal May 18, 2026
6feb600
Merge branch 'main' into Update_footer
mehul-m-prajapati May 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
117 changes: 48 additions & 69 deletions src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { FaGithub, FaTwitter, FaLinkedin } from 'react-icons/fa';
import { FaGithub } from 'react-icons/fa';
import { Link } from 'react-router-dom';
Comment on lines +1 to 2
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

FILE="$(fd -i 'Footer.tsx' | head -n 1)"
echo "Inspecting: $FILE"

echo "== Imports =="
rg -n '^\s*import\s' "$FILE"

echo "== Referenced symbols that require imports =="
rg -n '\buseState\b|React\.FormEvent|<FaEnvelope\b|<FaInfoCircle\b' "$FILE"

Repository: GitMetricsLab/github_tracker

Length of output: 474

Add missing React and icon symbol imports to fix unresolved references.

Lines 5 (useState), 7 (React.FormEvent), 46 (FaEnvelope), and 54 (FaInfoCircle) reference symbols without corresponding imports.

Proposed fix 
+import { type FormEvent, useState } from 'react';
-import { FaGithub } from 'react-icons/fa';
+import { FaEnvelope, FaGithub, FaInfoCircle } from 'react-icons/fa';
 import { Link } from 'react-router-dom';
@@
-  const handleSubscribe = (e: React.FormEvent) => {
+  const handleSubscribe = (e: FormEvent) => {
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/Footer.tsx` around lines 1 - 2, The file is missing imports
for React, useState, and two icon symbols causing unresolved references; add an
import for React and useState (so React.FormEvent and useState are available)
and include FaEnvelope and FaInfoCircle with the existing FaGithub import from
'react-icons/fa' (ensure the import statement now provides FaGithub, FaEnvelope,
FaInfoCircle), leaving the existing Link import intact.


function Footer() {
Expand All @@ -12,82 +12,61 @@ function Footer() {
};

return (
<footer className="bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 py-6 px-4 sm:px-6 lg:px-8 transition-colors duration-300">
<footer className="dark:text-white bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 py-2 px-6 transition-colors duration-300">
<div className="max-w-7xl mx-auto">
{/* Main Footer Content */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-6">
{/* Project Info */}
<div className="flex flex-col items-start">
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">GitHub Tracker</h3>
<p className="text-gray-600 dark:text-gray-400 text-sm">
Track and analyze GitHub repositories with ease.
</p>
</div>

{/* Quick Links */}
<div className="flex flex-col space-y-2">
<h4 className="font-semibold text-gray-900 dark:text-white">Quick Links</h4>
<Link
to="/"
className="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors text-sm"
>
Home
</Link>
<Link
to="/about"
className="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors text-sm"
>
About
</Link>
<Link
to="/contact"
className="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors text-sm"
>
Contact Us
</Link>
</div>

{/* Social Links */}
<div className="flex flex-col space-y-2">
<h4 className="font-semibold text-gray-900 dark:text-white">Connect With Us</h4>
<a
href="https://github.com/GitMetricsLab/github_tracker"
target="_blank"
rel="noopener noreferrer"
className="flex items-center text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors text-sm"
>
<FaGithub className="h-5 w-5 mr-2" />
GitHub
</a>
<div className="flex flex-col md:flex-row justify-between items-center p-3">
<div className="flex items-center space-x-2 md:mb-0">
<a
href="https://twitter.com/example"
target="_blank"
rel="noopener noreferrer"
className="flex items-center text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors text-sm"
href="https://github.com/GitMetricsLab/github_tracker"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center hover:text-gray-300 transition-colors"
>
<FaTwitter className="h-5 w-5 mr-2" />
Twitter
</a>
<a
href="https://linkedin.com/company/example"
target="_blank"
rel="noopener noreferrer"
className="flex items-center text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors text-sm"
>
<FaLinkedin className="h-5 w-5 mr-2" />
LinkedIn
<FaGithub className="h-5 w-5 mr-1" />
GitHub Tracker
</a>

<p className="text-sm leading-6 text-gray-600 dark:text-gray-400 max-w-sm">
Track repositories, analyze contributions, and explore GitHub
insights with a clean and intuitive interface.
</p>
</div>

</div>
{/* Navigation Links */}
<div className="space-y-3">
<h3 className="text-sm font-semibold uppercase tracking-wider text-gray-900 dark:text-white">
Quick Links
</h3>

{/* Footer Bottom */}
<div className="border-t border-gray-200 dark:border-gray-800 pt-4 text-center text-gray-600 dark:text-gray-400">
<p className="text-xs sm:text-sm">
&copy; {new Date().getFullYear()} GitHub Tracker. All rights reserved.
</p>
</div>
<div className="flex flex-col space-y-2">
<Link
to="/contact"
className="inline-flex items-center gap-2 text-sm hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
>
<FaEnvelope className="h-3.5 w-3.5" />
Contact Us
</Link>

<Link
to="/about"
className="inline-flex items-center gap-2 text-sm hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
>
<FaInfoCircle className="h-3.5 w-3.5" />
About
</Link>
</div>
</div>
<div className="flex space-x-6 text-gray-600 dark:text-gray-300">
<Link to='/contact' className="hover:text-gray-900 dark:hover:text-white transition-colors">Contact Us</Link>
<Link to='/about' className="hover:text-gray-900 dark:hover:text-white transition-colors">About</Link>
</div>
</div>
<div className="p-2 border-t border-gray-200 dark:border-gray-800 text-center text-gray-600 dark:text-gray-400">
<p className="text-xs md:text-sm font-semibold">
&copy; {new Date().getFullYear()}{" "}
<span className="font-semibold">GitHub Tracker</span>. All rights reserved.
</p>
</div>
</div>
</footer>
);
Expand Down
Loading