From 7e919069538b74680c4c09284750be0fff12e156 Mon Sep 17 00:00:00 2001
From: sid <35936587+siddharth-shringarpure@users.noreply.github.com>
Date: Sun, 27 Oct 2024 09:07:08 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Improved=20displaying=20of=20pricin?=
 =?UTF-8?q?g=20for=20users.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .husky/pre-commit                      |  3 +--
 components/custom/EventDescription.tsx | 27 ++++++++++++++++++++++----
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/.husky/pre-commit b/.husky/pre-commit
index e290538..72c4429 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,2 +1 @@
-#!/usr/bin/env sh
-npx lint-staged && npm run build
+npm test
diff --git a/components/custom/EventDescription.tsx b/components/custom/EventDescription.tsx
index 03b4497..f82eba4 100644
--- a/components/custom/EventDescription.tsx
+++ b/components/custom/EventDescription.tsx
@@ -48,7 +48,12 @@ const EventDescription: React.FC<EventDescriptionProps> = ({
           variant="outline"
           className="text-light-purple bg-blue-100 px-3 py-1 rounded-full"
         >
-          Price: ${eventDetails.ticketPrice.toFixed(2)}
+          {/*Show price and format by separating triplets of digits*/}
+          Price: $
+          {eventDetails.ticketPrice.toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
         </Badge>
       </CardHeader>
 
@@ -60,9 +65,23 @@ const EventDescription: React.FC<EventDescriptionProps> = ({
           <Separator className="my-4" />
           <p className="leading-relaxed">{eventDetails.description}</p>
           <Separator className="my-4" />
-          <p><b>Location:</b><br />{eventDetails.location}</p><br />
-          <p><b>Date:</b><br />{eventDetails.date}</p><br />
-          <p><b>Host:</b><br />{eventDetails.host}</p>
+          <p>
+            <b>Location:</b>
+            <br />
+            {eventDetails.location}
+          </p>
+          <br />
+          <p>
+            <b>Date:</b>
+            <br />
+            {eventDetails.date}
+          </p>
+          <br />
+          <p>
+            <b>Host:</b>
+            <br />
+            {eventDetails.host}
+          </p>
           {eventDetails.ticketsSold / eventDetails.capacity >= 0.9 && (
             <div className="mt-2 p-2 bg-yellow-300 text-black rounded">
               Limited Tickets Remaining!