Skip to content

components #60

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

Open
sunilkumawat-96 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

components #60

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
67 changes: 40 additions & 27 deletions components/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Twitter } from "lucide-react"
import Link from "next/link"

// Custom Telegram icon since Lucide doesn't have one
// Custom Telegram icon
const TelegramIcon = () => (
<svg viewBox="0 0 24 24" className="w-5 h-5" fill="currentColor">
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
Expand All @@ -23,54 +23,67 @@ const LinkedInIcon = () => (
)

export default function Footer() {
const currentUrl = typeof window !== 'undefined' ? window.location.href : ''

Comment on lines +26 to +27
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 13, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

Potential SSR hydration mismatch.

Reading window.location.href directly in the component body can cause hydration mismatches in Next.js. The server renders with an empty string while the client hydrates with the actual URL, which may trigger React warnings.

Use a client-side effect to safely capture the URL after mount:

+import { useEffect, useState } from 'react'
+
 export default function Footer() {
-  const currentUrl = typeof window !== 'undefined' ? window.location.href : ''
+  const [currentUrl, setCurrentUrl] = useState('')
+
+  useEffect(() => {
+    setCurrentUrl(window.location.href)
+  }, [])

Alternatively, use Next.js router:

+import { useRouter } from 'next/router'
+
 export default function Footer() {
+  const router = useRouter()
+  const currentUrl = typeof window !== 'undefined' 
+    ? `${window.location.origin}${router.asPath}` 
+    : ''

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In components/footer.tsx around lines 26-27, reading window.location.href during
render causes SSR/client hydration mismatch; change to capture the URL only on
the client (after mount) or via Next.js router: move the window access into a
useEffect (set state with the URL) or use useRouter().asPath (or base URL
derived from router) so server renders match client and prevent hydration
warnings.

return (
<footer className="border-t border-gradient-to-r from-[#228B22]/20 to-[#FFBF00]/20 bg-gradient-to-r from-[#228B22]/5 via-[#91A511]/5 to-[#FFBF00]/5 backdrop-blur-sm mt-20">
<div className="max-w-6xl mx-auto px-4 py-12">
<div className="flex flex-col md:flex-row justify-between items-center gap-6">

{/* Project Info */}
<div className="text-center md:text-left">
<h3 className="text-2xl font-bold font-playfair bg-gradient-to-r from-[#228B22] to-[#E4B905] bg-clip-text text-transparent mb-2">
Stable Viewpoints
</h3>
<p className="text-gray-600">Fostering thoughtful dialogue toward a more stable future.</p>
<p className="text-gray-600">
Fostering thoughtful dialogue toward a more stable future.
</p>
</div>

<div className="flex items-center gap-6">
{/* Social Media Icons */}
<div className="flex flex-col md:flex-row items-center gap-6">
<span className="text-gray-600 font-medium">Connect with us:</span>
<div className="flex items-center gap-4">
<Link
href="https://t.me/StabilityNexus"
target="_blank"
className="p-3 rounded-full bg-gradient-to-r from-[#228B22] to-[#5A981A] hover:from-[#3E921E] hover:to-[#91A511] text-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
aria-label="Telegram"
>
<Link href="https://t.me/StabilityNexus" target="_blank" className="p-3 rounded-full bg-gradient-to-r from-[#228B22] to-[#5A981A] hover:from-[#3E921E] hover:to-[#91A511] text-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" aria-label="Telegram">
<TelegramIcon />
</Link>
<Link
href="https://discord.gg/fuuWX4AbJt"
target="_blank"
className="p-3 rounded-full bg-gradient-to-r from-[#91A511] to-[#ADAC0D] hover:from-[#ADAC0D] hover:to-[#C8B209] text-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
aria-label="Discord"
>
<Link href="https://discord.gg/fuuWX4AbJt" target="_blank" className="p-3 rounded-full bg-gradient-to-r from-[#91A511] to-[#ADAC0D] hover:from-[#ADAC0D] hover:to-[#C8B209] text-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" aria-label="Discord">
<DiscordIcon />
</Link>
<Link
href="https://www.linkedin.com/company/stability-nexus/"
target="_blank"
className="p-3 rounded-full bg-gradient-to-r from-[#C8B209] to-[#E4B905] hover:from-[#E4B905] hover:to-[#FFBF00] text-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
aria-label="LinkedIn"
>
<Link href="https://www.linkedin.com/company/stability-nexus/" target="_blank" className="p-3 rounded-full bg-gradient-to-r from-[#C8B209] to-[#E4B905] hover:from-[#E4B905] hover:to-[#FFBF00] text-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" aria-label="LinkedIn">
<LinkedInIcon />
</Link>
<Link
href="https://twitter.com/StabilityNexus"
target="_blank"
className="p-3 rounded-full bg-gradient-to-r from-[#E4B905] to-[#FFBF00] hover:from-[#FFBF00] hover:to-[#FFC517] text-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
aria-label="Twitter"
>
<Link href="https://twitter.com/StabilityNexus" target="_blank" className="p-3 rounded-full bg-gradient-to-r from-[#E4B905] to-[#FFBF00] hover:from-[#FFBF00] hover:to-[#FFC517] text-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" aria-label="Twitter">
<Twitter className="w-5 h-5" />
</Link>
Comment on lines +47 to 58
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 13, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

Add rel="noopener noreferrer" to external links for security.

All target="_blank" links should include rel="noopener noreferrer" to prevent tab-nabbing vulnerabilities and avoid passing referrer information unnecessarily.

Apply this diff:

-              <Link href="https://t.me/StabilityNexus" target="_blank" className="p-3 rounded-full bg-gradient-to-r from-[#228B22] to-[#5A981A] hover:from-[#3E921E] hover:to-[#91A511] text-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" aria-label="Telegram">
+              <Link href="https://t.me/StabilityNexus" target="_blank" rel="noopener noreferrer" className="p-3 rounded-full bg-gradient-to-r from-[#228B22] to-[#5A981A] hover:from-[#3E921E] hover:to-[#91A511] text-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" aria-label="Telegram">
                 <TelegramIcon />
               </Link>
-              <Link href="https://discord.gg/fuuWX4AbJt" target="_blank" className="p-3 rounded-full bg-gradient-to-r from-[#91A511] to-[#ADAC0D] hover:from-[#ADAC0D] hover:to-[#C8B209] text-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" aria-label="Discord">
+              <Link href="https://discord.gg/fuuWX4AbJt" target="_blank" rel="noopener noreferrer" className="p-3 rounded-full bg-gradient-to-r from-[#91A511] to-[#ADAC0D] hover:from-[#ADAC0D] hover:to-[#C8B209] text-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" aria-label="Discord">
                 <DiscordIcon />
               </Link>
-              <Link href="https://www.linkedin.com/company/stability-nexus/" target="_blank" className="p-3 rounded-full bg-gradient-to-r from-[#C8B209] to-[#E4B905] hover:from-[#E4B905] hover:to-[#FFBF00] text-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" aria-label="LinkedIn">
+              <Link href="https://www.linkedin.com/company/stability-nexus/" target="_blank" rel="noopener noreferrer" className="p-3 rounded-full bg-gradient-to-r from-[#C8B209] to-[#E4B905] hover:from-[#E4B905] hover:to-[#FFBF00] text-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" aria-label="LinkedIn">
                 <LinkedInIcon />
               </Link>
-              <Link href="https://twitter.com/StabilityNexus" target="_blank" className="p-3 rounded-full bg-gradient-to-r from-[#E4B905] to-[#FFBF00] hover:from-[#FFBF00] hover:to-[#FFC517] text-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" aria-label="Twitter">
+              <Link href="https://twitter.com/StabilityNexus" target="_blank" rel="noopener noreferrer" className="p-3 rounded-full bg-gradient-to-r from-[#E4B905] to-[#FFBF00] hover:from-[#FFBF00] hover:to-[#FFC517] text-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" aria-label="Twitter">
                 <Twitter className="w-5 h-5" />
               </Link>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<Link href="https://t.me/StabilityNexus" target="_blank" className="p-3 rounded-full bg-gradient-to-r from-[#228B22] to-[#5A981A] hover:from-[#3E921E] hover:to-[#91A511] text-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" aria-label="Telegram">
<TelegramIcon />
</Link>
<Link
href="https://discord.gg/fuuWX4AbJt"
target="_blank"
className="p-3 rounded-full bg-gradient-to-r from-[#91A511] to-[#ADAC0D] hover:from-[#ADAC0D] hover:to-[#C8B209] text-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
aria-label="Discord"
>
<Link href="https://discord.gg/fuuWX4AbJt" target="_blank" className="p-3 rounded-full bg-gradient-to-r from-[#91A511] to-[#ADAC0D] hover:from-[#ADAC0D] hover:to-[#C8B209] text-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" aria-label="Discord">
<DiscordIcon />
</Link>
<Link
href="https://www.linkedin.com/company/stability-nexus/"
target="_blank"
className="p-3 rounded-full bg-gradient-to-r from-[#C8B209] to-[#E4B905] hover:from-[#E4B905] hover:to-[#FFBF00] text-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
aria-label="LinkedIn"
>
<Link href="https://www.linkedin.com/company/stability-nexus/" target="_blank" className="p-3 rounded-full bg-gradient-to-r from-[#C8B209] to-[#E4B905] hover:from-[#E4B905] hover:to-[#FFBF00] text-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" aria-label="LinkedIn">
<LinkedInIcon />
</Link>
<Link
href="https://twitter.com/StabilityNexus"
target="_blank"
className="p-3 rounded-full bg-gradient-to-r from-[#E4B905] to-[#FFBF00] hover:from-[#FFBF00] hover:to-[#FFC517] text-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
aria-label="Twitter"
>
<Link href="https://twitter.com/StabilityNexus" target="_blank" className="p-3 rounded-full bg-gradient-to-r from-[#E4B905] to-[#FFBF00] hover:from-[#FFBF00] hover:to-[#FFC517] text-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" aria-label="Twitter">
<Twitter className="w-5 h-5" />
</Link>
<Link href="https://t.me/StabilityNexus" target="_blank" rel="noopener noreferrer" className="p-3 rounded-full bg-gradient-to-r from-[#228B22] to-[#5A981A] hover:from-[#3E921E] hover:to-[#91A511] text-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" aria-label="Telegram">
<TelegramIcon />
</Link>
<Link href="https://discord.gg/fuuWX4AbJt" target="_blank" rel="noopener noreferrer" className="p-3 rounded-full bg-gradient-to-r from-[#91A511] to-[#ADAC0D] hover:from-[#ADAC0D] hover:to-[#C8B209] text-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" aria-label="Discord">
<DiscordIcon />
</Link>
<Link href="https://www.linkedin.com/company/stability-nexus/" target="_blank" rel="noopener noreferrer" className="p-3 rounded-full bg-gradient-to-r from-[#C8B209] to-[#E4B905] hover:from-[#E4B905] hover:to-[#FFBF00] text-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" aria-label="LinkedIn">
<LinkedInIcon />
</Link>
<Link href="https://twitter.com/StabilityNexus" target="_blank" rel="noopener noreferrer" className="p-3 rounded-full bg-gradient-to-r from-[#E4B905] to-[#FFBF00] hover:from-[#FFBF00] hover:to-[#FFC517] text-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" aria-label="Twitter">
<Twitter className="w-5 h-5" />
</Link>
🤖 Prompt for AI Agents 
In components/footer.tsx around lines 47 to 58, each external Link uses
target="_blank" but lacks rel="noopener noreferrer"; update every Link that
opens in a new tab to include rel="noopener noreferrer" (e.g., add rel="noopener
noreferrer" alongside target="_blank" on the Telegram, Discord, LinkedIn, and
Twitter Link components) to prevent tab-nabbing and avoid leaking referrer
information.

</div>
</div>

{/* Sharing Buttons */}
<div className="mt-6 flex items-center gap-4">
<span className="text-gray-600 font-medium">Share this project:</span>

{/* Twitter Share */}
<a href={`https://twitter.com/intent/tweet?text=Check out Stable Viewpoints!&url=${currentUrl}`} target="_blank" rel="noopener noreferrer" className="p-2 rounded-full bg-blue-500 hover:bg-blue-600 text-white transition-all" aria-label="Share on Twitter">
<Twitter className="w-5 h-5" />
</a>

{/* LinkedIn Share */}
<a href={`https://www.linkedin.com/sharing/share-offsite/?url=${currentUrl}`} target="_blank" rel="noopener noreferrer" className="p-2 rounded-full bg-blue-700 hover:bg-blue-800 text-white transition-all" aria-label="Share on LinkedIn">
<LinkedInIcon />
</a>

{/* Telegram Share */}
<a href={`https://t.me/share/url?url=${currentUrl}&text=Check out Stable Viewpoints!`} target="_blank" rel="noopener noreferrer" className="p-2 rounded-full bg-blue-400 hover:bg-blue-500 text-white transition-all" aria-label="Share on Telegram">
<TelegramIcon />
</a>

{/* Discord Share */}
<a href={`https://discord.com/channels/@me`} target="_blank" rel="noopener noreferrer" className="p-2 rounded-full bg-indigo-500 hover:bg-indigo-600 text-white transition-all" aria-label="Share on Discord">
<DiscordIcon />
</a>
Comment on lines +67 to +84
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 13, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

Missing URL encoding causes broken share links.

The currentUrl is interpolated directly into share URLs without encoding. If the URL contains query parameters or special characters (e.g., ?, &, =), the share links will malform and fail.

Apply this diff to encode the URL:

+            const encodedUrl = encodeURIComponent(currentUrl)
+            const encodedText = encodeURIComponent('Check out Stable Viewpoints!')
+
             {/* Twitter Share */}
-            <a href={`https://twitter.com/intent/tweet?text=Check out Stable Viewpoints!&url=${currentUrl}`} target="_blank" rel="noopener noreferrer" className="p-2 rounded-full bg-blue-500 hover:bg-blue-600 text-white transition-all" aria-label="Share on Twitter">
+            <a href={`https://twitter.com/intent/tweet?text=${encodedText}&url=${encodedUrl}`} target="_blank" rel="noopener noreferrer" className="p-2 rounded-full bg-blue-500 hover:bg-blue-600 text-white transition-all" aria-label="Share on Twitter">
               <Twitter className="w-5 h-5" />
             </a>
 
             {/* LinkedIn Share */}
-            <a href={`https://www.linkedin.com/sharing/share-offsite/?url=${currentUrl}`} target="_blank" rel="noopener noreferrer" className="p-2 rounded-full bg-blue-700 hover:bg-blue-800 text-white transition-all" aria-label="Share on LinkedIn">
+            <a href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`} target="_blank" rel="noopener noreferrer" className="p-2 rounded-full bg-blue-700 hover:bg-blue-800 text-white transition-all" aria-label="Share on LinkedIn">
               <LinkedInIcon />
             </a>
 
             {/* Telegram Share */}
-            <a href={`https://t.me/share/url?url=${currentUrl}&text=Check out Stable Viewpoints!`} target="_blank" rel="noopener noreferrer" className="p-2 rounded-full bg-blue-400 hover:bg-blue-500 text-white transition-all" aria-label="Share on Telegram">
+            <a href={`https://t.me/share/url?url=${encodedUrl}&text=${encodedText}`} target="_blank" rel="noopener noreferrer" className="p-2 rounded-full bg-blue-400 hover:bg-blue-500 text-white transition-all" aria-label="Share on Telegram">
               <TelegramIcon />
             </a>

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In components/footer.tsx around lines 67 to 84, the share links interpolate
currentUrl directly which can break when the URL contains query params or
special characters; update each share href to URL-encode currentUrl using
encodeURIComponent(currentUrl) (and URL-encode any query text like the
tweet/telegram text where applicable) so the generated share URLs are valid and
safe; ensure you replace the raw ${currentUrl} with the encoded value in all
four anchors and keep existing target/rel/aria attributes unchanged.

Comment on lines +82 to +84
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 13, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

Discord "share" button doesn't actually share content.

Discord doesn't provide a web-based share URL like other platforms. The current link (https://discord.com/channels/@me) only opens the user's DMs without sharing any content, which creates a misleading user experience.

Consider one of these alternatives:

  1. Remove the Discord share button (recommended) since Discord doesn't support web-based sharing.
  2. Copy URL to clipboard with a toast notification when clicked.
  3. Add explanatory text that the user needs to manually paste the link in Discord.

If you choose option 2, here's an example implementation:

-            {/* Discord Share */}
-            <a href={`https://discord.com/channels/@me`} target="_blank" rel="noopener noreferrer" className="p-2 rounded-full bg-indigo-500 hover:bg-indigo-600 text-white transition-all" aria-label="Share on Discord">
+            {/* Discord - Copy to Clipboard */}
+            <button onClick={() => navigator.clipboard.writeText(currentUrl)} className="p-2 rounded-full bg-indigo-500 hover:bg-indigo-600 text-white transition-all" aria-label="Copy link for Discord">
               <DiscordIcon />
-            </a>
+            </button>

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In components/footer.tsx around lines 82 to 84, the Discord "share" anchor
currently points to https://discord.com/channels/@me which does not share
content and is misleading; remove the Discord share button entirely
(recommended) by deleting the anchor and <DiscordIcon /> markup, or
alternatively replace the anchor with a button that copies the current page URL
to the clipboard and triggers a toast notification on success/failure (ensure to
prevent default link behavior, use navigator.clipboard.writeText, handle errors,
and provide accessible aria-label and keyboard support).

</div>

</div>
</div>
</footer>
Expand Down