Решил задание 03-components - 10-MeetupView

js-tasks-ru · Dec 27, 2024 · 1933382 · 1933382
1 parent df2086a
commit 1933382
Showing 1 changed file with 26 additions and 7 deletions.
diff --git a/03-components/10-MeetupView/MeetupView.js b/03-components/10-MeetupView/MeetupView.js
@@ -12,30 +12,49 @@ export default defineComponent({
   components: {
     UiAlert,
     UiContainer,
+    MeetupCover,
+    MeetupAgenda,
+    MeetupDescription,
+    MeetupInfo,
+  },
+
+  props: {
+    /**
+     * @type {{ title: string, image: string, description: string, agenda: Array, organizer: string, place: string, date: string }}
+     */
+    meetup: {
+      type: Object,
+      required: true,
+    }
   },
 
   template: `
     <div>
 
-      <!-- Обложка митапа -->
+      <MeetupCover
+        :title="meetup.title"
+         :image="meetup.image" />
 
       <UiContainer>
-        <div class="meetup">
+        <div class="meetup">date
           <div class="meetup__content">
             <h2>Описание</h2>
 
-            <!-- Описание митапа -->
+            <MeetupDescription :description="meetup.description" />
 
             <h2>Программа</h2>
 
-            <!-- Программа митапа -->
-            <!-- Или при пустой программе - сообщение "Программа пока пуста..." в UiAlert -->
-            <UiAlert></UiAlert>
+            <MeetupAgenda v-if="meetup.agenda?.length" :agenda="meetup.agenda"/>
+            <UiAlert v-else>Программа пока пуста...</UiAlert>
 
           </div>
           <div class="meetup__aside">
 
-            <!-- Краткая информация о митапе -->
+            <MeetupInfo
+              :organizer="meetup.organizer"
+              :place="meetup.place"
+              :date="meetup.date"
+            />
 
             <div class="meetup__aside-buttons"></div>
           </div>