تصميم صفحة الدعوة الإلكترونية
المسار: تطوير نظام إدارة الأعراس ودعوات QR الوحدة: صفحات الدعوة والواجهة الأمامية
مدخل إلى الدرس: تصميم صفحة الدعوة الإلكترونية
تصميم صفحة الدعوة الإلكترونية — نظام إدارة الأعراس والمناسبات ودعوات QR | Next.js وPrisma | أديب الصلوي
طريقة الدراسة: اقرأ التعريف، تتبّع المثال في الشرح، نفّذه بنفسك، ثم اختبر النتيجة والحالات الاستثنائية قبل الانتقال.
أهداف هذا الدرس
- تجميع صفحة دعوة جذابة: بطاقة، تفاصيل، خريطة، زر RSVP.
- إضافة عدّاد أيام متبقية يُحسب على الخادم.
- تهيئة Tailwind بأرقام وقيم من قاعدة البيانات.
المخطط: مخطط أقسام صفحة الدعوة ومواضعها على الشاشة
flowchart TD
H["header — شريط 🏷 باستخدام event.name"]
HR["hero — بطاقة زفاف
بمناسبة زفافهما... + اسم الضيف"]
CN["عداد — X يوم متبقٍ (من server)"]
DT["تفاصيل — التاريخ · المكان"]
RF["RsvpForm — عميل بحد أدنى من props"]
H --> HR --> CN --> DT --> RF
مثال
// app/i/[token]/page.tsx (مكمّل التصميم)
const daysLeft = Math.max(
0,
Math.ceil(
(guest.event.date.getTime() - Date.now()) / (1000 * 60 * 60 * 24)
)
);
Wedding
{guest.event.name}
بمناسبة زفافهما، يُشرفنا حضوركم
{guest.name} و {guest.event.name}
{daysLeft}يوم
نان сердечко 🍃
- التاريخ
-
{guest.event.date.toLocaleDateString("ar-SA", { weekday: "long", day: "numeric", month: "long" })}
- المكان
- {guest.event.location}
لماذا history.calendar on server؟
صفحة الدعوة تُظهر للجميع؛ لا خلاف. لكن عند تنسيق التاريخ نستخدم suppressHydrationWarning لتجنّب اختلاف التوقيت المحلي بين الخادم والمتصفح في أول حمولة.
لماذا الديناميكية؟
الخطوط والصور تُصنع عبر Tailwind وكذلك مجالت (bg-[#fff7f0]) — لا نكتب CSS عالمي، بل فئات في الملف. وتُضاف البيانات ديناميكياً حتى لو تغيّرت تفاصيل الحفل في آخر لحظة تعكس القاعدة الحالية.
تمرين تطبيقي: أضف للمكان حقلاً صور suffix وأنشئ رابط خريطة Google يفتح بحدث target=_blank عند الضغط.
أخطاء شائعة يجب تفاديها
- تهريب تاريخ مركّب بلا suppHydration فيومض اليوم الخطأ.
- جعل العداد يُحسب على العميل فيفتح للمسّاحات زمنية مختلفة.
- وضع أزرار المدعوين بلا أثر استجابة فيفتح لغيرها.
معجم مصطلحات الدرس
- tailwind فئة
- اسم جاهز كـ bg-[#fff7f0] يحدد النمط مباشرة.
- suppressHydrationWarning
- تجاهل اختلاف أول هيدلة للتاريخ المتغير.
- بطاقة الدعوة
- كتلة HTML تبرز بيانات الحدث وتجذب للتفاعل.
مراجعة وتمرين تثبيت المهارة
اختبار سريع: اشرح بعبارتك معنى «تصميم صفحة الدعوة الإلكترونية»، ثم بيّن أين ستستخدمه داخل نظام تسجيل حضور دعوات مناسبة عبر رمز QR، وما الخطأ الذي يجب اختباره قبل الاعتماد على الحل.
تحدٍّ إضافي: غيّر شرطًا واحدًا في التطبيق، وتوقع النتيجة، ثم نفّذ الاختبار وفسّر الاختلاف.
الدرس التالي: نموذج الرد RSVP التفاعلي. من الأفضل إنهاء التجربة الحالية قبل متابعة الدرس التالي.
