addresed MR comments

components/MiniEventCard.tsx

@@ -1,17 +1,16 @@
-import React, { ReactElement } from "react";
+import React, { ReactNode } from "react";
 import styles from "./MiniEventCard.module.css";
 
-interface EventProps {
-  title: string;
+interface Props {
+  name: string;
   descriptionShort: string;
-  descriptionLong: ReactElement;
+  description: ReactNode;
   location: string;
   date: string;
   time: string;
 }
 
-const DropDownIcon = () => {
-  return (
+const DropDownIcon = (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="14"
@@ -26,12 +25,11 @@ const DropDownIcon = () => {
     />
   </svg>
 );
-};
 
-export const MiniEventCard: React.FC<EventProps> = ({
-  title,
+export const MiniEventCard: React.FC<Props> = ({
+  name,
   descriptionShort,
-  descriptionLong,
+  description,
   location,
   date,
   time,
@@ -40,19 +38,17 @@ export const MiniEventCard: React.FC<EventProps> = ({
     <details className={styles.miniEventCard}>
       <summary>
         <div onClick={(event) => event.preventDefault()}>
-          <h2 className={styles.eventTitle}>{title}</h2>
+          <h2 className={styles.eventTitle}>{name}</h2>
           <p className={styles.eventInfo}>
             {location} | {date} | {time}
           </p>
           <p className={styles.shortDescription}>{descriptionShort}</p>
         </div>
 
-        <p className={styles.details}>
-          View details <DropDownIcon />
-        </p>
+        <p className={styles.details}>View details {DropDownIcon}</p>
       </summary>
 
-      <p className={styles.longDescription}>{descriptionLong}</p>
+      <div className={styles.longDescription}>{description}</div>
     </details>
   );
 };