client(Main.tsx) add a new wrapper component

Author: 0l1v3rr

client/src/App.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import Main from "./components/layout/Main";
 import Header from "./pages/Header";
 import Options from "./pages/Options";
 import Preview from "./pages/Preview";
@@ -12,10 +13,10 @@ const App = () => {
     <div className="bg-gh-bg w-full min-h-screen overflow-x-hidden select-none pb-5">
       <Header />
 
-      <main className="flex gap-4 mx-4 sm:mx-10 md:mx-32 lg:mx-36 mt-6 flex-col lg:flex-row">
+      <Main>
         <Options setLink={(link: string) => setLink(link)} />
         <Preview link={link} />
-      </main>
+      </Main>
     </div>
   );
 };

client/src/components/layout/Main.tsx

@@ -0,0 +1,15 @@
+import { FC, ReactElement } from "react";
+
+interface MainProps {
+  children: ReactElement[];
+}
+
+const Main: FC<MainProps> = ({ children }) => {
+  return (
+    <main className="flex gap-4 mx-4 sm:mx-10 md:mx-32 lg:mx-36 mt-6 flex-col lg:flex-row">
+      {children}
+    </main>
+  );
+};
+
+export default Main;