Adnane Kadri

جرب اتباع الخطوات التالية: قم بتثبيت إضافة تهيئة الشيفرة (Formatting Extension) التي تفضلها، مثل Prettier أو ESLint أو Beautify. يمكنك البحث عنها في قائمة الاضافات Extensions في Visual Studio Code وتثبيتها. بعد تثبيت الاضافة، افتح ملف الإعدادات في Visual Studio Code بالضغط على Ctrl + , في ويندوز أو Cmd + , في ماك، أو من خلال الذهاب إلى قائمة "File" ثم "Preferences" ثم "Settings". في نافذة الإعدادات، قم بالبحث عن "format" في شريط البحث العلوي. ستظهر لك خيارات متعلقة بالتنسيق والتهيئة. قم بالتحقق من الإعدادات التالية: بعد ضبط الإعدادات، يجب أن يقوم Visual Studio Code بتنسيق الشيفرة تلقائيًا عند حفظ الملفات بناءً على إعدادات الامتداد الذي قمت بتثبيته. قد تحتاج أيضا إلى تثبيت الأدوات المطلوبة للامتدادات مثل Prettier أو ESLint بشكل منفصل. يمكنك تثبيتها باستخدام npm أو yarn عن طريق القيام بالتثبيت المحلي لمشروعك أو تثبيتها على مستوى النظام بشكل عالمي globally.

بما أنك تقوم بتجاوز عنصر audioBlob، فما عليك إلا ارسال الـ Blob الخاص بملف الأوديو وسيتم التعامل معه بشكل اعتيادي جدا، لنقم مثلا بإنشاء وظيفة جديدة هي وظيفة uploadAudio بحيث تقوم بـ: إنشاء formData نقوم بإضافة عنصر الأوديو إليه. ارسال ملف الصورة إلى الخادم. function uploadAudio() { // إرسال الصوت إلى الخادم هنا var formData = new FormData(); formData.append("audio", audioBlob, "recording.webm"); fetch("URL_TO_SERVER_ENDPOINT", { method: "POST", body: formData }) .then(response => response.json()) .then(data => { console.log("تم رفع الصوت بنجاح!", data); // استجابة من الخادم تحتوي على معلومات الصوت المرفوع ومعالجتها وتخزينها في قاعدة البيانات هنا }) .catch(error => { console.error("حدث خطأ أثناء رفع الصوت", error); }); } بعد هذا سيمكنك التعامل مع الملف من خلال الباك اند بشكل عادي جدا.

يحدث هذا بوساطة جداول، بحيث يكون هنالك جدول وسيط pivot table يمتلك عمودين أجنبيين كل منهما يمثل عمود id من أحد الجدولين بحيث تكون كل ثنائية من هذين العمودين هي ثنائية فريدة. عدد السجلات في هذا الجدول هو ما يمثل عدد العلاقات. مثال عملي: ننشئ جدول post_category_table يحوي هذا الجدول عمودين post_id و category_id كل ثنائية post_id, category_id هي ثنائية فريدة الآن لما نحاول تصنيف منشور في عدة تصنيفات نقوم بـإنشاء عدة سجلات كل منها يحمل post_id المنشور وcategory_id الفئة المستهدفة. طريقة القراءة: طريقة جلب تصنيفات المنشور تكون بقراءة قيم category_id التي نجلبها من سجلات هذا الجدول الوسيط التي فيها قيمة post_id تساوي قيمة معرف هذا المنشور. طريقة جلب منشورات تصنيف معين تكون بقراءة قيم post_id التي نجلبها من سجلات هذا الجدول الوسيط التي فيها قيمة category_id تساوي قيمة معرف هذه الفئة. في لارافيل مثلا، يتم ذلك بشكل تلقائي عند إنشاء pivot table يتبع هاته الطريقة في التسمية، يتم تصريح تابعين باسم categories و posts في نموذجي Post و Category على التوالي: public function categories(){ return $this->hasMany(Category::class); } .. public function posts(){ return $this->hasMany(Post::class); } أما على مستوى الواجهة الأمامية، فيمكنك لعمل مثل هاته النمذجة استعمال مكتبة مثل tags input.

كل منهما إطار عمل جاء لخدمة أفكار من مثل التصيير على الخادم server side rendering وتوليد المواقع الثابتة statis site generation، عدا أن الأول (NextJS) قائم على ReactJS في حين أن الثاني (NuxtJS) والمستوحى أصلا من الأول قائم على VueJS. عند استعمال React أو Vue مباشرة قد يكون هنالك الكثير من الأشياء المكررة والعمليات الروتينية التي يتوفر عليها اطارا العمل بشكل مدمج مسبقا built-in. هذا بجانب أن مكتبة React و Vue كانتا تفتقران لمفهوم الـ SSR قبل ذلك، فالمكونات والصفحات التي يقومان بتوليدها كانت تتم على جزء العميل، ولذلك فإن فهرسة محركات البحث لم تعد تشملها. فمحركات البحث تطلب الصفحات والمعلومات الوصفية وما الى ذلك من الخادم وليس من العميل. ولذلك فإنه هاته الفكرة بالأساس دعت الى انشاء اطر عمل مثل NextJS و NuxtJS، اللذان يتجاوزان هاته الفكرة ويقومان -اختيارا طبعا- بتوليد هاته الصفحات والمكونات على جزء الخادم على خادم Node-based لتتم أرشفتها وفهرستها على محركات البحث.

حاليا لا أظن أنه يوجد، ولكن يمكنك مراسلة الدعم والتأكد من عدم وجود ذلك.

يحتمل أنك تستعمل جودة عالية لا يتوفر على متطلبات تشغيلها حاسوبك. جرب تقليل الجودة واختبر المشكلة مجددا، هل لا زالت الفيديوهات بطيئة؟

مرحبا صابر وعليكم السلام، مشكلتك غير واضحة على نحو جيد، هل تواجه مشكلة بتشغيل أحد فيديوهات الدورة؟ عموما، جرب فتح الموقع على متصفح آخر مثل فايرفوكس أو ادج، في حالة التعذر جرب استعمال جهاز آخر. في حالة تعذر كلا الحلين جرب التواصل مع الدعم من هنا.

يكون هذا بناءً على طريقة تعريفها واستخدامها في الكود. ففي المثال الذي أعطيته، تستخدم الدالة المسماة () => {...} كوظيفة callback .. الحاسوب يتعرف على ذلك من خلال قواعد اللغة والتوقعات المتعلقة بطريقة استخدام الدوال، وإلا كيف يتعرف على المتغيرات والدوال وغيرها. فعند تنفيذ الكود، عندما يتم استدعاء app.listen(port, () => {...})، يتم تمرير الدالة المعبرة بواسطة () => {...} كوظيفة callback إلى app.listen. هذا يسمح بتنفيذ الكود الذي يحتوي على console.log عندما يتم استدعاء الوظيفة callback في نقطة معينة من عملية الاستماع للاتصالات على البوابة port. وببساطة، الحاسوب يعرف أن الدالة هي callback function من خلال طريقة استخدامها في الكود والقواعد المحددة في لغة جافاسكربت. هكذا هو عمل جافاسكربت.

ليس هنالك أي فترة مطلوبة فالوصول إلى الدورات هو وصول مدى الحياة. كما أنه قد يختلف الطالب مع الآخر في نقاط عدة من شأنها أن تؤثر في تحديد هاته المدة من مثل قدرته الاستيعابية ومقدار تفرغه للمشاهدة والتحصيل وما الى ذلك. لا تهتم بتحديد الفترة الزمنية بشكل دقيق، بدل ذلك اهتم بالكسب المعرفي والتطوير من معارفك، فإن كنت تتعلم شيئا ما جديدا كل يوم هو أحسن وأفضل لك من التركيز في المدة. وعموما، تأتي الدورة بإجمالي 72 ساعة فيديو، ضف إليها المدة المستغرقة في التطبيق أو الاستيعاب أو المناقشة أو ما الى ذلك، ولنقدر ذلك بـ 5 أضعاف اجمالي المدة فتكون 360 ساعة. فيكون الوقت الإجمالي للإنتهاء من الدورة هو: أربع ساعات يوميا لمدة 3 أشهر. (4 * 3 * 30) ساعتان يوميا لمدة 6 أشهر. (2 * 30 * 6) ساعة يوميا لمدة 12 شهر. (1 * 30 * 12) طبعا فإن هاته الحسابات تقريبية قد تقصرر وقد تطول.

مثل هذا السؤال يكون هو الأكثر ترددا عادة، فيما يلي بعض الخطوات العملية التي يمكنك القيام بها: اطلعي ووسعي نظرتك أكثر على مجالات البرمجة وتطوير البرمجيات. حددي مجالا تجدين نفسك تهتمين به. اطلعلي على مجموعة اللغات والادوات التي يهتم بها المشتغلون عن المجال. قارني واختاري تجميعة ادوات ولغات. ابدئي في التعلم من خلال الدورات المعترف بها والمعروفة. حسني مهاراتك . اعتمدي على الاستمرارية. لا تنسي التطبيق العملي والممارسة التطبيقية بجانب الكسب المعرفي النظري. ابحثي عن الشهادات المعترف بها. يمكنك الاستزادة بالقراءة من هنا:

فكرة الدوال في الأصل أساسا هي في تمكين القدرة على اعادة استعمال وتنفيذ كتلة برمجية، فهي مجموعة من الأوامر تدل على وظيفة أو مهمة معينة مهيكلة في دالة. بعض هاته الدوال قد تقوم بحدث معين مثل ارسال رسالة بريد الكتروني أو عرض رسالة نجاح في الشاشة، في حين أن بعضها الآخر يعيد خرجا ويترتب عنها عائد، يمكن استعمال هذا العائد في مكان آخر في الشيفرة. لنقل مثلا أن هنالك دالة تقوم باستخراج اسم مستخدم ما انطلاقا من عنوان بريده الالكتروني، بحيث نستعمل هذا الاسم في عرضه على شاشة المستخدم. الآن هذه العملية تحتاج تقسيم مهام وتنظيما بحيث: تكون هنالك دالة لجلب البريد الالكتروني تكون هنالك دالة لجلب الاسم تكون هنالك دالة لطباعة الاسم حتى يحصل هذا الارتباط بين هاته الدوال، وحتى يمكن معالجة المدخلات المختلفة يتطلب من هاته الدوال أن تقوم بمنطق معين ثم تعيد لنا قيما. فدالة جلب البريد الالكتروني يفترض أن تعيد قيمة سلسلة نصية تعبر عن عنوان البريد الالكتروني. في حين أن دالة جلب الاسم يفترض أن تعيد قيمة سلسلة نصية تعبر عن اسم المستخدم. وأخيرا تقوم دالة الطباعة بطباعة الاسم على الشاشة. لتحديد ما نريد أن نعيده من داخل الدالة، نقوم فقط باضافة عبارة return إليه.

بخصوص مشكلة ترتيب الحقول، قم بإعادة ترتيب الحقول في النموذج بالترتيب الصحيح وفقًا لترتيب العناصر في الكود. يمكنك تبديل مكان حقل "الباسوورد" ووضعه بعد حقل "اسم المستخدم" حتى يتوافق مع الترتيب الصحيح الذي تريده. أما بخصوص عناصر الاختيار النصية قم بإضافة نص لعناصر الاختيار النصية (Radio Buttons) بوضع النص بين علامتي الفتح والإغلاق لعناصر الـ <label> المرتبطة بكل عنصر اختيار نصي. على سبيل المثال، يمكنك تحديد النص لعنصر الاختيار النصي "star" كالتالي: <input type="radio" id="star" name="Plan" value="star"> <label for="star">Star Plan</label> أما عن المشكلة الأخيرة بخصوص زر الاشتراك، يرجى التأكد من وجود قواعد CSS أو أنماط لتنسيق الأزرار وظهورها بشكل صحيح. يمكنك إضافة قواعد CSS للأزرار أو استخدام مكتبة تنسيق جاهزة مثل Bootstrap لتحقيق تنسيق جميل ومتناسق للأزرار.

يفترض بالأمر الطبيعي لتشغيل خادم التطوير أن يكون: npm run start و لي: npm start أيضا تأكد من أن المشروع الذي تحاول تشغيل هذا الأمر فيه هو مشروع رياكت، إذ أنك لا تريد تنفيذ هذا الأمر لمجرد تنفيذه وفقط. أيضا يظهر من الصورة السابقة أنك تضع ملف package.json داخل مجلد فرعي. تخلص من ذلك وضعه على نفس مستوى الملفات والمجلدات الأخرى.

لا يوجد أي مشكلة، هذا هو الخرج الطبيعي للأمر npm run dev في نسخ لارافيل المتأخرة. اذ أن لارافيل أصبح يستعمل vite كمجمع وحدات وخادم تطوير للواجهة الأمامية بديلا عن laravel-mix سابقا. فالأمر: npm run dev يقوم بتشغيل خادم vite للتطوير. ان كنت تحاول تحزيم ملفات الأصول وتخريجها يمكنك تنفيذ الأمر: npm run build بدلا منه. اقرأ أكثر عن تفاصيل هذا التبديل:

طبعا فإنك لن تحتاج أي لغة أخرى لتعلم لغة معينة بطبيعة الحال، ولكن قد يعينك التخصص في مجال ما على تعلم لغة بايثون من ناحية معينة، مثلا: ستحتاج HTML , CSS , JS لإستعمال بايثون في تطوير الويب الشامل. SQL, R لإستعمال بايثون في علم البيانات وتحليلها. أساسيات الريضايات والإحصاء بجانب بايثون للتعلم الآلي والذكاء الصناعي. تصاميم المستويات والألعاب وأساسيات الرياضيات والجبر والاحصاء بجانب بايثون لتطوير الألعاب. مفاهيم الأتمتة وبرامجها لإستعمال بايثون في الأتمتة وتطوير البرامج. معروف أن لغة مثل بايثون تشتغل في العديد من المجالات وتحوز على العديد من المكتبات الضخمة التي تحظى بشعبية كبيرة. ولذلك فإن تعيينك للمجال الذي تريد أن تشتغل فيه يمكنه أن يحدد مجموعة الأشياء التي تعينك على التخصص أكثر في بايثون، أما ان كنت تقصد معرفة عامة باللغة فلا يجب عليك أي من ذلك، يمكنك اختيار اي كورس والبدء فيه مباشرة.

يمكن استخدام طرق متعددة لتعيين شفافية اللون في CSS. إليك بعض الطرق الشائعة: استخدام قيمة rgba: يمكنك استخدام الوظيفة rgba لتعيين لون مع قيمة ألفا (شفافية). يتم تحديد الألفا بين 0 و 1، حيث يكون 0 غير شفاف و 1 غير شفاف. مثال: background-color: rgba(0, 0, 0, 0.5); /* أسود مع شفافية 50٪ */ استخدام قيمة hsla: تشبه وظيفة rgba ولكنها تستخدم قيمة اللون في نموذج HSL (صبغة، تشبع، سطوع) بدلاً من نموذج RGB. يمكن تحديد الشفافية بنفس الطريقة باستخدام قيمة ألفا. مثال: background-color: hsla(240, 100%, 50%, 0.5); /* أزرق مع شفافية 50٪ */ استخدام قيمة transparent: يمكنك استخدام القيمة transparent لتعيين اللون كمستوى شفافية كاملة. مثال: background-color: transparent; /* شفاف بالكامل */ استخدام خاصية opacity: يمكنك استخدام خاصية opacity لتعيين مستوى شفافية للعنصر بأكمله بما في ذلك المحتوى. تؤثر هذه الخاصية على العنصر وجميع عناصره الفرعية. قيمة الشفافية هي رقم بين 0 و 1، حيث يكون 0 غير شفاف و 1 غير شفاف. مثال: opacity: 0.5; /* شفافية 50٪ */ نوع البيانات <color>

مرحبا مهند، أنقل سطر تضمين ملف auth.php إلى أعلى الصفحة وتحديد قبل المسار التالي: Route::get('/{user:username}' , [UserController::class, 'index'])->middleware('auth')->name('user_profile'); فيكون كاملا: require __DIR__.'/auth.php'; Route::middleware('auth')->group(function () { Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit'); Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update'); Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy'); }); Route::get('/explore' , [PostController::class, 'explore'])->name('explore'); Route::post('/p/{post:slug}/comment', [CommentController::class, 'store'])->name('store_comment')->middleware('auth'); Route::controller(PostController::class)->middleware('auth')->group(function(){ Route::get('/' , 'index')->name('home_page'); Route::get('/p/create', 'create')->name('create_post'); Route::post('/p/create', 'store')->name('store_post'); Route::get('/p/{post:slug}' , 'show')->name('show_post'); Route::get('/p/{post:slug}/edit' , 'edit')->name('edit_post'); Route::patch('/p/{post:slug}/update' , 'update')->name('update_post'); Route::delete('/p/{post:slug}/delete' , 'destroy')->name('delete_post'); }); Route::get('/{user:username}' , [UserController::class, 'index'])->middleware('auth')->name('user_profile'); ثم نفذ الأمر: php artisan route:clear لمحو التخزين المؤقت للمسارات، وأعد تشغيل artisan serve وسيعمل معك بشكل طبيعي. ان كنت مشترك في دورة PHP في الأكاديمية، ففيما يلي تفاصيل المشكلة:

يمكنك بجانب المقترح أيضا اضافة حقل بولياني باسم is_approved يعبر عن ما ان كان المنشور موافقا على نشره أو لا. بحيث سيمكنك لاحقا التعديل على هاته القيمة فقط لنشره، أو جلب المنشورات التي قيمة is_approved فيها هي true فتكون هي المنشورات الموافق على نشرها. CREATE TABLE posts ( id INT NOT NULL AUTO_INCREMENT, post_title VARCHAR(255) NOT NULL, is_approved BOOLEAN NOT NULL DEFAULT FALSE, updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id) );

الاختصارات كثيرة، يمكنك فتح القائمة الخاصة بها من خلال الضغط على CTRL + K , CTRL + S واستعراضها كاملة. كما ويمكنك بطبيعة الحال تخصيصها وفق استعمالاتك الخاصة أو وفق ما يليق بك أو وفق ما أنت معتاد عليه.

سوف لن يحصل أي شيء مادمت لم تقم بالتقديم على الفعل، فبعد اتمام الدورة والتحصل على الشهادة سوف يمكنك التسجيل في مواقع العمل الحر والبدء في التقديم على المشاريع التي تناسب المهارات التي اكتستبها. وببعض من الجهد والصبر سوف تبتدأ أولى مشاريعك وتنطلق في مسيرتك العملية. أما بخصوص المشاكل. فستحتاج دوما للمساعدة وسوف تصادف مشاكل مستجدة بشكل دائم، ولن تتوقف المشاكل عن الظهور. ولهذا يوجد مثل هاته المجتمعات البرمجية، أين يساعد المطورون والمبرمجون بعضهم البعض ويشاركون خبراتهم. ففي أكاديمية حسوب يمكنك استعمال قسم الأسئلة العامة لطرح انشغالاتك أو المشاكل التي تصادفها وسوف يحاول المدربون تقديم اجابات شافية. فأنت ستستمر في التعلم بشكل مواز مع العمل فقط. وهو الأمر الذي يعمل به معظم المشتغلين في المجال من مختلف التخصصات.

الطريق واضحة، تعلم القدر الكافي وابدأ بالتقديم على المشاريع التي تحس أنك قادر على انجازها، وطور مهاراتك في خلال ذلك. إليك أيضا بعض الخطوات التي يمكنك اتباعها: حدد أهدافك: قم بتحديد أهدافك المهنية بوضوح. حدد ما ترغب في تحقيقه وما الذي تريد أن تصبح عليه. حلل مهاراتك: قم بتقييم مهاراتك وقدراتك الحالية. حدد المجالات التي تجيدها والمجالات التي تحتاج إلى تطوير. تعلم باستمرار: استثمر في تطوير مهاراتك وزيادة معرفتك في مجال عملك المفضل. قم بالتدريب على الأدوات والتقنيات الجديدة وتواصل مع المجتمع المهني ذو الصلة. قم ببناء شبكة علاقات: قم ببناء شبكة علاقات احترافية قوية. التواصل مع الناس في مجال عملك المفضل وتوسيع دائرة معارفك سيساعدك في الحصول على فرص جديدة ومشاريع. لا تنسى التسويق الذاتي: قم بتسويق نفسك وخدماتك بشكل فعال. أنشئ ملف شخصي احترافي وقم بإنشاء حسابات عبر الإنترنت لعرض أعمالك ونشاطك المهني. طور فكر الابتكار واستعد دوما للتغيير: كون مرنًا ومستعدًا للتغيير. ابحث عن فرص جديدة وقم بتطوير أفكار إبداعية للابتكار في مجال عملك. خذ الاستشارة والتوجيه: ابحث عن مرشدين أو مستشارين ذوي خبرة في العمل الحر للحصول على المشورة والتوجيه. يمكنهم مشاركة خبراتهم ونصائحهم لمساعدتك في تحقيق أهدافك، قد يكون ذلك بصورة مباشرة بشكل سؤال وجواب أو نقاش، أو قد يكون بمجرد الاستفادة من خبراتهم من خلال قراءة تدويناتهم أو متابعة حساباتهم المهنية أو فيديوهاتهم او ما الى ذلك.

مرحبا عمرو، ينبغي أولا فهم ما تقوم به القيمة block لعناصر a داخل عناصر القائمة، خاصية block في CSS تُستخدم لتحديد كيفية سلوك عنصر HTML في عرضه وتوزيعه داخل العنصر الأب وليس داخل عنصر body، فإعطاء عنصر ما هاته الخاصية سيجعله عنصرا كتليا (بمعنى أنه سيمتد على كامل العرض الحاوي الخاص به). وهو نفس ما اختبرناه في المثال المرفق، فعناصر a أخذت كامل عرض حاويها المباشر وهو العنصر list-inline-item. جرب أزلها وستلتمس سبب قيامنا بإعطاءنا إياها. أما عن inline-block التي يتم تطبيقها على عنصر list-inline-item من بوتستراب فهي خاصية تمكن العنصر من سلوك نفس سلوك العناصر السطرية من حيث تواجدها على نفس السطر ومن جهة ثانية من سلوك نفس سلوك العناصر الكتلية من حيث تحديد العرض والارتفاع وما الى ذلك. تلخيص: جعلنا من عناصر a تأخذ كامل عرض حاويها المباشر list-inline-item وأعطينا هاته الأخيرة امكانية أن يتم تحديد عرض وارتفاع لها.

مشكلتك غير واضحة جيدا، فهي تحتاج توصيفا واضحا. ولكن الشيفرة الخاصة بك تمتلك بعض المشاكل هي: أصلح تضمين useState فأنت تكتبها كـ usetate بدون S كبيرة. import React, {useState} from 'react' أزل واحدا من تضميني React واترك واحدا فقط، import React from 'react' import React, {useState} from 'react' الحظ أنه بحذف الثاني ستحتاج استيراد وحدة useState، ولذلك يفضل حذف الأول مباشرة. أصلح استعمال useNavigate لتصبح: let navigate = useNavigate(); فأنت تكتبها بـ n صغيرة. نفس الشيء بخصوص useFormik: let formik =useformik({ ^ و نفس الشيء هنا: let [statusErrors,setStatusErrors] =usestate('') ^ وهنا أيضا: let {errors, set errors} = usestate ([]) ^ هاته هي أخطاء السياق التي تقوم بها بشكل مبدئي، فشيفرتك بحاجة الى تنقيح أولا. في حالة استمرار اي مشكلة يرجى ارفاق نص المشكلة كاملا.

بدون أي اضافة او خدمة خارجية؟ الـ downtime لا بد منه، ولو جزءا من الثانية. وصحيح، قد يمكن تقليله بالتزام بعض الممارسات ولكن لا أحسب أنه يمكن تحقيق zero downtime إلا ببعض خدمات الطرف الثالث التي تتوفر على تقنيات ادارة الحمل load balanceers والتنصيب المتعدد Multisite deployment وغيرها من ممارسات zero downtime. يذكر في توثيق لارافيل مثلا خدمات من مثل: envoyer laravel vapor أجدها خيارات ممتازة ان كنت تريد تحقيقه. في العادة، قد يحدث لمجرد ثواني قليلة، في حالة تعدي ذلك او أخذ وقت طويل يحتمل أن تكون المشكلة متعلق بشيء آخر تماما.

جرب استعمال المتغير liked الذي لديك في التصيير الشرطي لزر الإعجاب أو يكفي ال handler الخاص بضغطة الزر: <button className={`btn-primary`} onClick={liked ? handleAddLove : handleRemoveLove}> <Image src="/heart-icon.svg" alt="heart icon" width={30} height={30} /> </button> قد يمكنك ايضا استعمال نفس الشيء في تمييز تنسيقات زر الإعجاب عن زر الغاء الإعجاب. انتبه الى اضافة handler آخر هو handleRemoveLove يقوم بنفس ما يدل عليه، أي ازالة الإعجاب.