1  import { useEffect, useState } from 'react'
 2  
 3  import { createFileRoute } from '@tanstack/react-router'
 4  
 5  function getNames() {
 6    return fetch('/demo/api/names').then((res) => res.json())
 7  }
 8  
 9  export const Route = createFileRoute('/demo/start/api-request')({
10    component: Home,
11  })
12  
13  function Home() {
14    const [names, setNames] = useState<Array<string>>([])
15  
16    useEffect(() => {
17      getNames().then(setNames)
18    }, [])
19  
20    return (
21      <div
22        className="flex items-center justify-center min-h-screen p-4 text-white"
23        style={{
24          backgroundColor: '#000',
25          backgroundImage:
26            'radial-gradient(ellipse 60% 60% at 0% 100%, #444 0%, #222 60%, #000 100%)',
27        }}
28      >
29        <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
30          <h1 className="text-2xl mb-4">Start API Request Demo - Names List</h1>
31          <ul className="mb-4 space-y-2">
32            {names.map((name) => (
33              <li
34                key={name}
35                className="bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md"
36              >
37                <span className="text-lg text-white">{name}</span>
38              </li>
39            ))}
40          </ul>
41        </div>
42      </div>
43    )
44  }