✨ Improved displaying of pricing for users.

.husky/pre-commit

@@ -1,2 +1 @@
-#!/usr/bin/env sh
+npm test
-npx lint-staged && npm run build

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>
-          <p><b>Date:</b><br />{eventDetails.date}</p><br />
+            <b>Location:</b>
-          <p><b>Host:</b><br />{eventDetails.host}</p>
+            <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!