addresed MR comments

components/MiniEventCard.tsx

@@ -1,37 +1,35 @@
-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 (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="14"
-      height="9"
-      viewBox="0 0 14 9"
-      fill="none"
-      className={styles.dropDownIcon}
-    >
-      <path
-        d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z"
-        fill="#1482E3"
-      />
-    </svg>
-  );
-};
+const DropDownIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="9"
+    viewBox="0 0 14 9"
+    fill="none"
+    className={styles.dropDownIcon}
+  >
+    <path
+      d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z"
+      fill="#1482E3"
+    />
+  </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>
   );
 };