♻️ refactor: main layout

common/components/CoreLayout/CoreLayout.tsx

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from "react";
+
+export const CoreLayout = ({ children }: PropsWithChildren) => {
+  return <div className="h-screen-safe relative">{children}</div>;
+};

common/components/CoreLayout/index.ts

@@ -0,0 +1 @@
+export * from "./CoreLayout";

common/fonts/index.ts

@@ -0,0 +1 @@
+export * from './inter';

common/fonts/inter.ts

@@ -0,0 +1,6 @@
+import { Inter } from "next/font/google";
+
+export const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+});

package.json

@@ -10,10 +10,13 @@
     "prettier": "prettier --write 'src/**/*.{js,jsx,ts,tsx,scss}'"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
     "next": "14.2.5",
     "react": "^18",
     "react-dom": "^18",
-    "sass": "^1.77.8"
+    "sass": "^1.77.8",
+    "tailwind-merge": "^2.4.0",
+    "tailwind-variants": "^0.2.1"
   },
   "devDependencies": {
     "@types/node": "^20",

pages/_app.tsx

@@ -1,6 +1,26 @@
-import "@/styles/globals.scss";
+import { CoreLayout } from "@/common/components/CoreLayout";
+import { inter } from "@/common/fonts";
+
 import type { AppProps } from "next/app";
 
+import "@/styles/globals.scss";
+
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  const Layout = (Component as any).layout
+    ? (Component as any).layout
+    : CoreLayout;
+
+  return (
+    <>
+      {/* This is required for fonts to work in Portal too  */}
+      <style global jsx>{`
+        :root {
+          --font-inter: ${inter.style.fontFamily};
+        }
+      `}</style>
+      <Layout>
+        <Component {...pageProps} />
+      </Layout>
+    </>
+  );
 }