79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
|
|
export function BoopDivider({ targetId }: { targetId: string }) {
|
|
const [booped, setBooped] = useState(false)
|
|
|
|
const handleBoop = () => {
|
|
setBooped(true)
|
|
|
|
setTimeout(() => {
|
|
const target = document.getElementById(targetId)
|
|
if (target) {
|
|
target.scrollIntoView({ behavior: "smooth" })
|
|
}
|
|
}, 400)
|
|
|
|
setTimeout(() => setBooped(false), 1000)
|
|
}
|
|
|
|
return (
|
|
<div className="relative py-12 flex flex-col items-center justify-center gap-3">
|
|
{/* Decorative lines */}
|
|
<div className="absolute inset-x-0 top-1/2 -translate-y-1/2 flex items-center px-8 lg:px-32 pointer-events-none">
|
|
<div className="flex-1 h-px bg-gradient-to-r from-transparent via-primary/30 to-primary/30" />
|
|
<div className="w-32" />
|
|
<div className="flex-1 h-px bg-gradient-to-l from-transparent via-accent/30 to-accent/30" />
|
|
</div>
|
|
|
|
{/* Boop button */}
|
|
<button
|
|
onClick={handleBoop}
|
|
className={`
|
|
relative z-10 group cursor-pointer
|
|
px-6 py-3 rounded-full
|
|
bg-gradient-to-r from-primary/10 to-accent/10
|
|
border border-primary/20
|
|
hover:border-primary/50 hover:from-primary/20 hover:to-accent/20
|
|
hover:shadow-lg hover:shadow-primary/20
|
|
active:scale-90
|
|
transition-all duration-300 ease-out
|
|
${booped ? "scale-125 shadow-2xl shadow-primary/40 border-primary/60" : ""}
|
|
`}
|
|
>
|
|
<span
|
|
className={`
|
|
text-sm font-medium tracking-wide
|
|
bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent
|
|
transition-all duration-300
|
|
${booped ? "scale-110" : "group-hover:tracking-wider"}
|
|
`}
|
|
>
|
|
{booped ? "boop!" : "boop to continue"}
|
|
</span>
|
|
|
|
{/* Ripple effect on boop */}
|
|
{booped && (
|
|
<>
|
|
<span className="absolute inset-0 rounded-full animate-ping bg-primary/20" />
|
|
<span className="absolute inset-0 rounded-full animate-ping bg-accent/10 animation-delay-100" />
|
|
</>
|
|
)}
|
|
</button>
|
|
|
|
{/* Subtle hint arrow */}
|
|
<div
|
|
className={`
|
|
text-primary/40 transition-all duration-500
|
|
${booped ? "translate-y-2 opacity-0" : "animate-bounce"}
|
|
`}
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" className="opacity-60">
|
|
<path d="M4 6L8 10L12 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|