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