110 lines
4.3 KiB
TypeScript
110 lines
4.3 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
|
|
interface StickyFooterProps {
|
|
url: string
|
|
title: string
|
|
}
|
|
|
|
export function StickyFooter({ url, title }: StickyFooterProps) {
|
|
const [isVisible, setIsVisible] = useState(true)
|
|
const [lastScrollY, setLastScrollY] = useState(0)
|
|
const [copied, setCopied] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
const currentScrollY = window.scrollY
|
|
setIsVisible(currentScrollY < lastScrollY || currentScrollY < 100)
|
|
setLastScrollY(currentScrollY)
|
|
}
|
|
|
|
window.addEventListener('scroll', handleScroll, { passive: true })
|
|
return () => window.removeEventListener('scroll', handleScroll)
|
|
}, [lastScrollY])
|
|
|
|
const shareLinks = {
|
|
twitter: `https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${url}`,
|
|
linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
|
|
}
|
|
|
|
const handleCopyLink = async () => {
|
|
await navigator.clipboard.writeText(url)
|
|
setCopied(true)
|
|
setTimeout(() => setCopied(false), 2000)
|
|
}
|
|
|
|
const scrollToTop = () => {
|
|
window.scrollTo({ top: 0, behavior: 'smooth' })
|
|
}
|
|
|
|
return (
|
|
<footer
|
|
className={`
|
|
fixed bottom-0 left-0 right-0 z-40
|
|
bg-black/98 backdrop-blur-sm
|
|
border-t-4 border-[var(--neon-magenta)]
|
|
transition-transform duration-200 ease-in-out
|
|
${isVisible ? 'translate-y-0' : 'translate-y-full'}
|
|
`}
|
|
style={{
|
|
boxShadow: isVisible ? '0 -8px 30px rgba(155,90,142,0.5), inset 0 4px 20px rgba(155,90,142,0.1)' : 'none'
|
|
}}
|
|
>
|
|
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-[var(--neon-magenta)] to-transparent opacity-70" />
|
|
|
|
<div className="max-w-7xl mx-auto px-6 py-4 relative">
|
|
<div className="flex items-center justify-between">
|
|
<div className="hidden md:flex items-center gap-3">
|
|
<div className="flex gap-1.5">
|
|
<div className="w-2 h-2 bg-[var(--neon-cyan)] shadow-[0_0_6px_rgba(90,139,149,1)]" />
|
|
<div className="w-2 h-2 bg-[var(--neon-pink)] shadow-[0_0_6px_rgba(155,90,110,1)]" />
|
|
</div>
|
|
<span className="text-[var(--neon-cyan)] font-mono text-xs uppercase tracking-wider" style={{ textShadow: '0 0 8px rgba(90,139,149,0.6)' }}>
|
|
>> SHARE:
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3 mx-auto md:mx-0">
|
|
<a
|
|
href={shareLinks.twitter}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center gap-2 px-4 py-2 bg-black border-4 border-cyan-400 text-cyan-400 font-mono text-xs uppercase tracking-wider transition-all hover:shadow-[0_0_25px_rgba(29,161,242,0.8)] hover:bg-cyan-900/20"
|
|
style={{ textShadow: '0 0 8px rgba(56,189,248,0.6)' }}
|
|
>
|
|
[X]
|
|
</a>
|
|
|
|
<a
|
|
href={shareLinks.linkedin}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center gap-2 px-4 py-2 bg-black border-4 border-blue-400 text-blue-400 font-mono text-xs uppercase tracking-wider transition-all hover:shadow-[0_0_25px_rgba(10,102,194,0.8)] hover:bg-blue-900/20"
|
|
style={{ textShadow: '0 0 8px rgba(96,165,250,0.6)' }}
|
|
>
|
|
[IN]
|
|
</a>
|
|
|
|
<button
|
|
onClick={handleCopyLink}
|
|
className="flex items-center gap-2 px-4 py-2 bg-black border-4 border-[var(--neon-pink)] text-[var(--neon-pink)] font-mono text-xs uppercase tracking-wider transition-all hover:shadow-[0_0_25px_rgba(155,90,110,0.8)] hover:bg-pink-900/20"
|
|
style={{ textShadow: copied ? '0 0 10px rgba(155,90,110,1)' : '0 0 8px rgba(155,90,110,0.6)' }}
|
|
>
|
|
{copied ? '[✓ COPIED]' : '[COPY]'}
|
|
</button>
|
|
</div>
|
|
|
|
<button
|
|
onClick={scrollToTop}
|
|
className="hidden md:flex items-center gap-2 px-4 py-2 bg-black border-4 border-[var(--neon-cyan)] text-[var(--neon-cyan)] font-mono text-xs uppercase tracking-wider transition-all hover:shadow-[0_0_25px_rgba(90,139,149,0.8)] hover:bg-cyan-900/20"
|
|
style={{ textShadow: '0 0 8px rgba(90,139,149,0.6)' }}
|
|
>
|
|
[↑ TOP]
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
)
|
|
}
|