From c1213f1ce58c477bc58e61335fdd04bb146d8077 Mon Sep 17 00:00:00 2001
From: Mark Anthony Llego <111579522+llegomark@users.noreply.github.com>
Date: Mon, 23 Jan 2023 12:52:56 +0800
Subject: [PATCH] add: wrap balancer

---
 package.json    | 3 ++-
 pages/_app.tsx  | 5 ++++-
 pages/index.tsx | 3 +++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index fe3ce025..4e058399 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,8 @@
     "react-dom": "18.2.0",
     "react-hook-form": "^7.42.0",
     "react-hot-toast": "^2.4.0",
-    "react-use-measure": "^2.1.1"
+    "react-use-measure": "^2.1.1",
+    "react-wrap-balancer": "^0.4.0"
   },
   "devDependencies": {
     "@types/node": "18.11.3",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 9940e42a..b6ef327e 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,11 +1,14 @@
 import { Analytics } from "@vercel/analytics/react";
 import type { AppProps } from "next/app";
 import "../styles/globals.css";
+import { Provider } from "react-wrap-balancer";
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <>
-      <Component {...pageProps} />
+      <Provider>
+        <Component {...pageProps} />
+      </Provider>
       <Analytics />
     </>
   );
diff --git a/pages/index.tsx b/pages/index.tsx
index 146727f9..7bcfef8f 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -10,6 +10,7 @@ import Github from "../components/GitHub";
 import Header from "../components/Header";
 import LoadingDots from "../components/LoadingDots";
 import ResizablePanel from "../components/ResizablePanel";
+import Balancer from "react-wrap-balancer";
 
 const Home: NextPage = () => {
   const [loading, setLoading] = useState(false);
@@ -88,7 +89,9 @@ const Home: NextPage = () => {
           <p>Star on GitHub</p>
         </a>
         <h1 className="sm:text-6xl text-4xl max-w-2xl font-bold text-slate-900">
+          <Balancer>
           Generate your next Twitter bio in seconds
+          </Balancer>
         </h1>
         <p className="text-slate-500 mt-5">18,167 bios generated so far.</p>
         <div className="max-w-xl">