import useSWR from "swr";

function UserProfile() {
  const { data, error } = useSWR("/api/user", fetcher);

  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;
  return <p>Name: {data.name}!</p>;
}

function UserAvatar() {
  const { data, error } = useSWR("/api/user", fetcher);

  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;
  return <img src ={data.avatarUrl} alt="Profile image" />;
}

export default function App() {
  return (
    <div>
      <UserAvatar />
      <UserProfile />
    </div>
  );
}