1  import { useEffect, useState } from 'react'
 2  import { createFileRoute } from '@tanstack/react-router'
 3  import { getPunkSongs } from '@/data/demo.punk-songs'
 4  
 5  export const Route = createFileRoute('/demo/start/ssr/spa-mode')({
 6    ssr: false,
 7    component: RouteComponent,
 8  })
 9  
10  function RouteComponent() {
11    const [punkSongs, setPunkSongs] = useState<
12      Awaited<ReturnType<typeof getPunkSongs>>
13    >([])
14  
15    useEffect(() => {
16      getPunkSongs().then(setPunkSongs)
17    }, [])
18  
19    return (
20      <div
21        className="flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-800 to-black p-4 text-white"
22        style={{
23          backgroundImage:
24            'radial-gradient(50% 50% at 20% 60%, #1a1a1a 0%, #0a0a0a 50%, #000000 100%)',
25        }}
26      >
27        <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
28          <h1 className="text-3xl font-bold mb-6 text-green-400">
29            SPA Mode - Punk Songs
30          </h1>
31          <ul className="space-y-3">
32            {punkSongs.map((song) => (
33              <li
34                key={song.id}
35                className="bg-white/10 border border-white/20 rounded-lg p-4 backdrop-blur-sm shadow-md"
36              >
37                <span className="text-lg text-white font-medium">
38                  {song.name}
39                </span>
40                <span className="text-white/60"> - {song.artist}</span>
41              </li>
42            ))}
43          </ul>
44        </div>
45      </div>
46    )
47  }