Fix react-wrap-balancer import breaking React DOM

src/content/config.ts

@@ -12,7 +12,8 @@ const blogCollection = defineCollection({
       // I am truly lost on how TZ works in Javascript Dates.
       // I believe somehow the solution would lie here in making sure that the date offset is parsed and transmitted properly,
       // but there is no insight in how this works so far. I'm lost as fuck.
-      const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+      
+      // const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
       const parsed = parse(date, "yyyy-MM-dd HH:mm:ss XX", new Date());
       // const utc = zonedTimeToUtc(parsed, timezone);
       return z.date().parse(parsed);

src/layouts/Post.astro

@@ -3,7 +3,7 @@ import General from "@layouts/General.astro";
 import Time from "@components/Time.tsx";
 import { type CollectionEntry } from "astro:content";
 import type { Props as SEOProps } from "astro-seo";
-import Balancer from "react-wrap-balancer";
+import { Balancer } from "react-wrap-balancer";
 
 interface Props {
   post: CollectionEntry<"blog">;
@@ -83,8 +83,7 @@ const ogp: SEOProps = {
   <div>
     <h1 class="max-md:text-lg max-sm:text-center max-sm:border-b border-zinc-700">
       <a href={post.slug}>
-        {title}
-        <!-- <Balancer>{title}</Balancer> -->
+        <Balancer>{title}</Balancer>
       </a>
     </h1>
     <p class="mt-0 text-sm ml-5">