runfoo-org/elmeg-demo
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

404: Replace emoji with Bird SVG icon, no emojis

Browse source
This commit is contained in:
fullsizemalt 2025-12-25 22:14:53 -08:00
parent 9ed077af85
commit d0f19fc666
1 changed files with 10 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
frontend/app/not-found.tsx
View file

@ -2,7 +2,7 @@
import Link from "next/link" import Link from "next/link"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { Home, Search, Shuffle, ArrowLeft, Music, Disc3 } from "lucide-react" import { Home, Search, Shuffle, ArrowLeft, Music, Bird } from "lucide-react"
import { useState, useEffect } from "react" import { useState, useEffect } from "react"
const GOOSE_QUOTES = [ const GOOSE_QUOTES = [
@ -27,7 +27,7 @@ const SONG_SUGGESTIONS = [
] ]
export default function NotFound() { export default function NotFound() {
const [quote, setQuote] = useState("") const [quote, setQuote] = useState(GOOSE_QUOTES[0])
const [suggestion, setSuggestion] = useState(SONG_SUGGESTIONS[0]) const [suggestion, setSuggestion] = useState(SONG_SUGGESTIONS[0])
const [isSpinning, setIsSpinning] = useState(false) const [isSpinning, setIsSpinning] = useState(false)
@ -48,14 +48,15 @@ export default function NotFound() {
return ( return (
<div className="flex flex-col items-center justify-center min-h-[70vh] text-center px-4"> <div className="flex flex-col items-center justify-center min-h-[70vh] text-center px-4">
{/* Animated Goose/Music Icon */} {/* Animated Bird Icon */}
<div className="relative mb-6 group cursor-pointer" onClick={shuffleQuote}> <div
<div className={`transition-transform duration-300 ${isSpinning ? 'rotate-180 scale-110' : ''}`}> className="relative mb-6 cursor-pointer group"
<Disc3 className="h-32 w-32 text-primary/20 group-hover:text-primary/40 transition-colors" /> onClick={shuffleQuote}
title="Click to shuffle quote"
>
<div className={`p-6 rounded-full bg-primary/10 transition-all duration-300 group-hover:bg-primary/20 ${isSpinning ? 'rotate-12 scale-110' : ''}`}>
<Bird className="h-20 w-20 text-primary transition-transform group-hover:scale-105" />
</div> </div>
<span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-6xl group-hover:scale-110 transition-transform">
🦆
</span>
</div> </div>
{/* 404 Header */} {/* 404 Header */}