generate reusable components

app/javascript/components/meetups/MeetupCard.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function MeetupCard({ id_event, speakers, title = '', event_speakers }) {
+    const eventWithSpeaker = event_speakers.map((talk) => {
+        const speaker = speakers.find((speak) => speak.id === talk.speaker_id);
+        return { ...talk, speaker };
+    });
+    return (
+        <li className="w-full">
+            <div className="meetups__card flex flex-col pb-12 max-w-[40rem]">
+                <div className="w-full rounded shadow-lg border-t p-10 border-gray-100 overflow-hidden">
+                    <h4 className="mb-4 text-xl font-bold text-gray md:text-2xl">{title}</h4>
+                    {eventWithSpeaker.length > 0 &&
+                        eventWithSpeaker.map(({ id, talk_title, speaker }) => (
+                            <div key={id}>
+                                <h5 className="mb-4 text-xl font-bold text-gray md:text-xl">
+                                    {talk_title}
+                                </h5>
+                                <div className="flex content-center mb-8 text-lg">
+                                    <img
+                                        className="object-cover w-14 h-14 mr-4 rounded-full"
+                                        src={speaker.image_url}
+                                        alt=""
+                                    />
+                                    <div>
+                                        <p className="font-bold text-gray md:text-lg">
+                                            {speaker.name}
+                                        </p>
+                                        <p className="text-sm text-gray md:text-lg">
+                                            {speaker.tagline}
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                </div>
+                <div className="bg-gray-200 shadow-lg text-right">
+                    <a href={`/meetups/${id_event}`}>
+                        <button className="my-4 mr-6 py-4 px-8 bg-gray-600 rounded text-white text-lg md:text-xl">
+                            View
+                        </button>
+                    </a>
+                </div>
+            </div>
+        </li>
+    );
+}
+
+MeetupCard.propTypes = {
+    id_event: PropTypes.number,
+    speakers: PropTypes.array,
+    title: PropTypes.string,
+    event_speakers: PropTypes.array,
+    year: PropTypes.string,
+    month: PropTypes.string,
+};

app/javascript/components/meetups/MonthSection.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+export default function MonthSection({ children, month }) {
+    return (
+        <li key={month} className="meetups__month flex flex-col items-start md:flex-row">
+            <div className="meetups__month--name w-32">
+                <h3 className="py-1 px-2 mb-4 w-min border-2 border-red-400 rounded uppercase text-md text-red-400 md:ml-auto">
+                    {month}
+                </h3>
+            </div>
+            <div className="meetups__card--border hidden w-px self-stretch mx-6 border-l border-gray-200 md:block" />
+            <ul className="p-4 flex flex-col gap-y-10 md:pt-2 md:p-12 md:gap-y-14 w-full">
+                {children}
+            </ul>
+        </li>
+    );
+}
+
+MonthSection.propTypes = {
+    month: PropTypes.string,
+    children: PropTypes.node,
+};

app/javascript/components/meetups/YearSection.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function YearSection({ children, year }) {
+    return (
+        <section key={year} className="p-10">
+            <h2 className="mb-8 text-4xl font-bold">{year}</h2>
+            <ul className="flex flex-col">{children}</ul>
+        </section>
+    );
+}
+
+YearSection.propTypes = {
+    year: PropTypes.string,
+    children: PropTypes.node,
+};

app/javascript/components/past_meetups/SpeakerBiosBlock.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Microphone from '../icons/Microphone';
+
+export default function SpeakerBiosBlock({ speakers }) {
+    return (
+        <div className="container max-w-2xl my-8 mx-3 p-4 flex flex-col">
+            <div className="inline-flex items-center gap-2 align-center mb-5">
+                <Microphone />
+                <h4 className="text-xl font-bold text-gray md:text-2xl">About the speakers</h4>
+            </div>
+            <div className="flex flex-wrap items-center gap-5">
+                {speakers?.map(({ id, bio }) => (
+                    <div key={id}>{bio}</div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+SpeakerBiosBlock.propTypes = {
+    speakers: PropTypes.arrayOf(PropTypes.object),
+};

app/javascript/components/past_meetups/SpeakerVideoBlock.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import VideoBlock from 'components/past_meetups/VideoBlock';
+
+export default function SpeakerVideoBlock({ speaker, eventSpeaker }) {
+    const { id, image_url: imageUrl, name, tagline } = speaker;
+    const {
+        talk_title: title,
+        talk_description: description,
+        talk_video_link: videoLink,
+    } = eventSpeaker;
+    return (
+        <>
+            <VideoBlock videoUrl={videoLink} title={title} />
+            <div key={id} className="flex content-center mb-8 text-lg mt-8">
+                <img className="object-cover w-14 h-14 mr-4 rounded-full" src={imageUrl} alt="" />
+                <div>
+                    <p className="font-bold text-gray md:text-lg">{name}</p>
+                    <p className="text-sm text-gray md:text-lg">{tagline}</p>
+                </div>
+            </div>
+            <p className="pb-14">{description}</p>
+        </>
+    );
+}
+
+SpeakerVideoBlock.propTypes = {
+    speaker: PropTypes.object,
+    eventSpeaker: PropTypes.object,
+};

app/javascript/components/past_meetups/VideoBlock.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function VideoBlock({ videoUrl, title }) {
+    if (!videoUrl) {
+        return null;
+    }
+    return (
+        <div className="card-container flex flex-wrap justify-center aspect-w-16 aspect-h-9">
+            <iframe src={videoUrl} title={title} frameBorder="0"></iframe>;
+        </div>
+    );
+}
+
+VideoBlock.propTypes = {
+    videoUrl: PropTypes.string,
+    title: PropTypes.string,
+};