From e1c552dee9c16822703e3aa36cf4e4a17ca4a327 Mon Sep 17 00:00:00 2001
From: alvyynm <alvyynm@gmail.com>
Date: Wed, 30 Oct 2024 13:28:31 +0300
Subject: [PATCH 1/2] feat: create utility fn for formatting event descriptions

---
 src/utilities/formatEventDescription.jsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 src/utilities/formatEventDescription.jsx

diff --git a/src/utilities/formatEventDescription.jsx b/src/utilities/formatEventDescription.jsx
new file mode 100644
index 00000000..d1f93683
--- /dev/null
+++ b/src/utilities/formatEventDescription.jsx
@@ -0,0 +1,20 @@
+/* eslint-disable react/no-array-index-key */
+import React from "react";
+// .split("\r\n\r\n") Splits by paragraphs
+// .split("\r\n") splits by lines
+const formatEventDescription = (text) =>
+  text.split("\r\n\r\n").map((paragraph) => (
+    <p key={crypto.randomUUID()} className="leading-6 mb-4 whitespace-pre-wrap">
+      {paragraph.split("\r\n").map((line, i) => (
+        <React.Fragment key={i}>
+          {line}
+          {i < paragraph.split("\r\n").length - 1 && (
+            // Adds space between lines
+            <br className="mb-2" />
+          )}
+        </React.Fragment>
+      ))}
+    </p>
+  ));
+
+export default formatEventDescription;

From 308c70adcfe3ba2efd861017f1979a4abb4b276a Mon Sep 17 00:00:00 2001
From: alvyynm <alvyynm@gmail.com>
Date: Wed, 30 Oct 2024 13:29:16 +0300
Subject: [PATCH 2/2] feat: properly format event descriptions

---
 .../eventsPreview/SingleEvents/sections/EventDescription.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/community/sections/eventsPreview/SingleEvents/sections/EventDescription.jsx b/src/pages/community/sections/eventsPreview/SingleEvents/sections/EventDescription.jsx
index 9c725a9d..478d2b5f 100644
--- a/src/pages/community/sections/eventsPreview/SingleEvents/sections/EventDescription.jsx
+++ b/src/pages/community/sections/eventsPreview/SingleEvents/sections/EventDescription.jsx
@@ -1,10 +1,11 @@
 import PropTypes from "prop-types";
 import React from "react";
+import formatEventDescription from "../../../../../../utilities/formatEventDescription";
 
 function EventDescription({ eventDesc }) {
   return (
-    <div className="w-full text-center max-w-3xl mx-auto text-sm md:text-[15px] md:leading-[22px] font-normal text-gray-600">
-      {eventDesc}
+    <div className="w-full max-w-3xl mx-auto text-sm md:text-[15px] md:leading-[22px] font-normal text-gray-600">
+      {formatEventDescription(eventDesc)}
     </div>
   );
 }