الواجهة الأمامية

من الفكرة إلى كود يعمل فعلياً

توضح هذه المقاطع كيف تظهر مفاهيم كل مستوى داخل المشاريع الحقيقية. إنها نقاط بداية للقراءة والتحليل والتعديل والاختبار، وليست كوداً للنسخ دون فهم.

function ProgramCard({ title, duration, href }) {
  return (
    <article className="program-card">
      <p className="program-card__duration">{duration}</p>
      <h2>{title}</h2>
      <a href={href} aria-label={`Explore the ${title} program`}>
        View program <span aria-hidden="true">→</span>
      </a>
    </article>
  );
}

export function ProgramList({ programs }) {
  return (
    <section aria-labelledby="programs-title">
      <h1 id="programs-title">Choose a learning path</h1>
      <div className="program-grid">
        {programs.map((program) => (
          <ProgramCard key={program.id} {...program} />
        ))}
      </div>
    </section>
  );
}

async function getPrograms() {
  const response = await fetch("https://api.example.com/programs", {
    next: { revalidate: 300 },
  });

  if (!response.ok) throw new Error("Programs could not be loaded");
  return response.json();
}

export default async function ProgramsPage() {
  const programs = await getPrograms();

  return (
    <main>
      <h1>Programs</h1>
      <ProgramList programs={programs} />
    </main>
  );
}

اقرأ ثم عدّل بنفسك

غيّر أحد المتطلبات، وتوقّع النتيجة، ثم شغّل الكود للتحقق. أثناء المراجعة، اشرح سبب اختيارك واقتراحاً للتحسين التالي.