chore: replace react wrap balancer #690

- removed wrap balancer and replaced with tailwind
- also added ts-ignore to domain slug bc of wonky intermittent error

Closes #690

apps/ai/package.json

@@ -64,7 +64,6 @@
     "react-confetti": "^6.1.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.49.3",
-    "react-wrap-balancer": "^1.1.0",
     "resend": "^2.1.0",
     "slugify": "^1.6.6",
     "stripe": "^14.12.0",

apps/ai/src/app/(domain)/[domain]/[slug]/page.tsx

@@ -58,6 +58,8 @@ export async function generateMetadata({
         },
       ],
     },
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore TODO: This is erroring occassionaly due to env.js
     ...(params.domain.endsWith(`.${env.NEXT_PUBLIC_ROOT_DOMAIN}`) &&
       siteData.customDomain && {
         alternates: {

apps/ai/src/app/(routes)/(marketing)/not-authorized/page.tsx

@@ -1,7 +1,6 @@
 import type { Metadata } from 'next';
 
 import Link from 'next/link';
-import Balancer from 'react-wrap-balancer';
 
 import { cn } from '@av/ui';
 import { buttonVariants } from '@av/ui/button';
@@ -22,13 +21,11 @@ const NotAuthorizedPage = () => {
         <h1 className="mt-4 text-3xl font-bold tracking-tight text-foreground sm:text-5xl">
           A little bit Alexis
         </h1>
-        <Balancer>
-          <p className="mx-auto mt-4 max-w-2xl text-base sm:mt-6 lg:text-lg">
-            Looks like you&apos;ve taken a wrong turn on the way to Café
-            Tropical. A mistake you say? Contact Stevie at the front desk for
-            assistance. Just don&apos;t ask for a wake-up call.
-          </p>
-        </Balancer>
+        <p className="mx-auto mt-4 max-w-2xl text-balance text-base sm:mt-6 lg:text-lg">
+          Looks like you&apos;ve taken a wrong turn on the way to Café Tropical.
+          A mistake you say? Contact Stevie at the front desk for assistance.
+          Just don&apos;t ask for a wake-up call.
+        </p>
 
         <div className="mt-10 flex justify-center">
           <Link

apps/ai/src/components/dashboard/header.tsx

@@ -12,11 +12,11 @@ export function DashboardHeader({
   return (
     <div className="flex flex-col items-start justify-between md:flex-row md:items-center">
       <div className="grid gap-1">
-        <h2 className="max-w-4xl truncate text-2xl font-bold md:text-3xl">
+        <h2 className="max-w-4xl truncate text-balance text-2xl font-bold md:text-3xl">
           {title}
         </h2>
         {description && (
-          <p className="max-w-2xl text-base text-muted-foreground lg:text-lg">
+          <p className="max-w-2xl text-balance text-base text-muted-foreground lg:text-lg">
             {description}
           </p>
         )}

apps/ai/src/components/marketing/pricing-cards.tsx

@@ -3,7 +3,6 @@
 import type { TeamSubscriptionPlan } from '#/lib/types';
 
 import { useCallback, useState } from 'react';
-import Balancer from 'react-wrap-balancer';
 
 import { cn } from '@av/ui';
 import { Switch } from '@av/ui/switch';
@@ -85,19 +84,17 @@ export function PricingCards({
         ))}
       </div>
 
-      <p className="mt-6 text-center text-base text-muted-foreground">
-        <Balancer>
-          Reach out to our{' '}
-          <a
-            className="font-medium text-primary hover:underline"
-            href="mailto:[email protected]"
-          >
-            Support Team
-          </a>{' '}
-          if you have any questions.
-          <br />
-          <strong>Backed by our 100% Delight Guarantee. Cancel anytime.</strong>
-        </Balancer>
+      <p className="mt-6 text-balance text-center text-base text-muted-foreground">
+        Reach out to our{' '}
+        <a
+          className="font-medium text-primary hover:underline"
+          href="mailto:[email protected]"
+        >
+          Support Team
+        </a>{' '}
+        if you have any questions.
+        <br />
+        <strong>Backed by our 100% Delight Guarantee. Cancel anytime.</strong>
       </p>
     </section>
   );

apps/ai/src/components/marketing/pricing-faq.tsx

@@ -1,5 +1,3 @@
-import Balancer from 'react-wrap-balancer';
-
 import {
   Accordion,
   AccordionContent,
@@ -146,14 +144,12 @@ export function PricingFaq() {
     <section className="container max-w-3xl py-2">
       <div className="mb-14 space-y-6 text-center">
         <h2 className="text-center text-3xl font-bold md:text-5xl">
-          <Balancer>Frequently Asked Questions</Balancer>
+          Frequently Asked Questions
         </h2>
-        <p className="text-md text-muted-foreground">
-          <Balancer>
-            Explore our comprehensive FAQ to find quick answers to common
-            inquiries. If you need further assistance, don&apos;t hesitate to
-            contact us for personalized help.
-          </Balancer>
+        <p className="text-md text-balance text-muted-foreground">
+          Explore our comprehensive FAQ to find quick answers to common
+          inquiries. If you need further assistance, don&apos;t hesitate to
+          contact us for personalized help.
         </p>
       </div>
       <Accordion type="single" collapsible className="w-full">

apps/ai/src/components/providers/domain-providers.tsx

@@ -1,7 +1,5 @@
 import type { ReactNode } from 'react';
 
-import { Provider as BalancerProvider } from 'react-wrap-balancer';
-
 import { Toaster } from '@av/ui/toaster';
 
 import { ThemeProvider } from '#/components/providers/theme-provider';
@@ -16,7 +14,6 @@ export function DomainProviders({ children }: { children: ReactNode }) {
         {children}
       </ModalProvider>
       <Toaster />
-      <BalancerProvider />
     </ThemeProvider>
   );
 }

apps/ai/src/components/providers/providers.tsx

@@ -3,7 +3,6 @@
 import type { ReactNode } from 'react';
 
 import { SessionProvider } from 'next-auth/react';
-import { Provider as BalancerProvider } from 'react-wrap-balancer';
 
 import { Toaster } from '@av/ui/toaster';
 
@@ -22,7 +21,6 @@ export function Providers({ children }: { children: ReactNode }) {
         </ModalProvider>
         <ConfettiProvider />
         <Toaster />
-        <BalancerProvider />
       </SessionProvider>
     </ThemeProvider>
   );