Learning

• Tips
• Css Style
• Components
• Explain

Page/Error.tsx

<aside> 💬

function error() {
  return (
    <div className="min-h-screen flex items-center justify-center p-6">
        <div className="bg-white border-2 border-red-100 p-8 rounded-3xl text-center max-w-sm">
          <div className="text-4xl mb-4">⚠️</div>
          <h2 className="text-xl font-bold text-slate-900 mb-2">عذراً، حدث خطأ!</h2>
          <p className="text-slate-500 text-sm">لم نتمكن من جلب بيانات المستخدمين حالياً.</p>
        </div>
      </div>
  )
}

export default error

</aside>

app/loading.tsx

<aside> 💬

function loading() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50">
      <div className="animate-spin rounded-full h-16 w-16 border-t-4 border-blue-500 border-solid"></div>
      <h2 className="mt-4 text-xl font-semibold text-gray-700">
        جاري جلب بيانات GitHub...
      </h2>
    </div>
  );
}

export default loading;

</aside>

Fetch Data

<aside> 💬

try {
    await new Promise((resolve) => setTimeout(resolve, 3000));
    const response = await fetch("<https://api.github.com/users>", {
      next: { revalidate: 3600 },
    });

    if (!response.ok) {
      throw new Error(`Server Error: ${response.status}`);
    }

    const users: GitHubUser[] = await response.json();

    return (
      <main className="min-h-screen bg-gray-50 p-6">
        <div className="max-w-5xl mx-auto text-center">
          <h1 className="text-3xl font-bold mb-8">مستكشف مستخدمي GitHub 🚀</h1>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {users.map((user) => (
              <div key={user.id} className="bg-white p-4 rounded-xl shadow border border-gray-100">
                <img src={user.avatar_url} alt={user.login} className="w-20 h-20 rounded-full mx-auto mb-4" />
                <h2 className="font-bold">{user.login}</h2>
                <a href={user.html_url} target="_blank" className="text-blue-500 text-sm">Profile</a>
              </div>
            ))}
          </div>
        </div>
      </main>
    );
  } catch (error) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-red-50 p-4">
        <div className="text-center p-8 bg-white rounded-lg shadow-lg border-t-4 border-red-500">
          <h2 className="text-2xl font-bold text-red-600 mb-2">خطأ في الإتصال!</h2>
          <p className="text-gray-600">تأكد من الإنترنت أو حاول لاحقاً.</p>
        </div>
      </div>
    );
  }

</aside>