import React from 'react'
import AdminDashboard from '~/layouts/AdminLayout';

const UsersSection = () => {
  return (
    <div>UsersSection</div>
  )
}

UsersSection.getLayout = (page: any) => (
  <AdminDashboard>{page}</AdminDashboard>
);

export default UsersSection

import React from 'react'
import AdminDashboard from '~/layouts/AdminLayout';

const UsersSection = () => {
  return (
    <div>UsersSection</div>
  )
}

UsersSection.getLayout = (page: any) => (
  <AdminDashboard>{page}</AdminDashboard>
);

export default UsersSection

/** @type {import("next").NextConfig} */
const config = {
  reactStrictMode: false,

  /**
   * If you have `experimental: { appDir: true }` set, then you must comment the below `i18n` config
   * out.
   *
   * @see https://github.com/vercel/next.js/issues/41980
   */
  i18n: {
    locales: ['en'],
    defaultLocale: 'en',
  },
  redirects: async () => {
    return [
      {
        source: '/admin',
        destination: '/',
        permanent: true,
      },
      {
        source: '/admin/:id',
        destination: '/admin/:id/dashboard',
        permanent: true,
      },
    ];
  },
};
export default config;

/** @type {import("next").NextConfig} */
const config = {
  reactStrictMode: false,

  /**
   * If you have `experimental: { appDir: true }` set, then you must comment the below `i18n` config
   * out.
   *
   * @see https://github.com/vercel/next.js/issues/41980
   */
  i18n: {
    locales: ['en'],
    defaultLocale: 'en',
  },
  redirects: async () => {
    return [
      {
        source: '/admin',
        destination: '/',
        permanent: true,
      },
      {
        source: '/admin/:id',
        destination: '/admin/:id/dashboard',
        permanent: true,
      },
    ];
  },
};
export default config;

import React, { ReactNode } from 'react';
interface AdminLayoutProps {
  children: ReactNode;
}
const AdminLayout = ({ children }: AdminLayoutProps) => {
  return (
    <div style={{ display: 'flex', minHeight: '100vh' }}>
      <nav
        style={{
          backgroundColor: '#1E293B',
          color: 'white',
          minWidth: '16rem',
          padding: '2rem',
        }}
      >
        {/* Sidebar content */}
      </nav>
      <main style={{ flex: 1, padding: '2rem' }}>
        {/* Main content */}
        {children}
      </main>
    </div>
  );
};
export default AdminLayout;

import React, { ReactNode } from 'react';
interface AdminLayoutProps {
  children: ReactNode;
}
const AdminLayout = ({ children }: AdminLayoutProps) => {
  return (
    <div style={{ display: 'flex', minHeight: '100vh' }}>
      <nav
        style={{
          backgroundColor: '#1E293B',
          color: 'white',
          minWidth: '16rem',
          padding: '2rem',
        }}
      >
        {/* Sidebar content */}
      </nav>
      <main style={{ flex: 1, padding: '2rem' }}>
        {/* Main content */}
        {children}
      </main>
    </div>
  );
};
export default AdminLayout;

/* eslint-disable @typescript-eslint/ban-ts-comment */
import { type AppType } from 'next/app';
import { type Session } from 'next-auth';
import { SessionProvider } from 'next-auth/react';
import { ChakraProvider } from '@chakra-ui/react';
import { api } from '~/utils/api';
import { appTheme } from '~/theme/theme';

import '~/styles/globals.css';
import Head from 'next/head';

const MyApp: AppType<{ session: Session | null }> = ({
  Component,
  pageProps: { session, ...pageProps },
}) => {
// Create this method to get component layout
  const getLayout =
    //@ts-ignore
    (Component?.getLayout as unknown) ?? ((page: unknown) => page);

  return (
    <ChakraProvider theme={appTheme} resetCSS>
      <SessionProvider session={session}>
        {
          // In my case this line throws an error but nothing to worry just ignore it and
          //call the created method
          //@ts-ignore
          getLayout(<Component {...pageProps} />)
        }
      </SessionProvider>
    </ChakraProvider>
  );
};
export default api.withTRPC(MyApp);

/* eslint-disable @typescript-eslint/ban-ts-comment */
import { type AppType } from 'next/app';
import { type Session } from 'next-auth';
import { SessionProvider } from 'next-auth/react';
import { ChakraProvider } from '@chakra-ui/react';
import { api } from '~/utils/api';
import { appTheme } from '~/theme/theme';

import '~/styles/globals.css';
import Head from 'next/head';

const MyApp: AppType<{ session: Session | null }> = ({
  Component,
  pageProps: { session, ...pageProps },
}) => {
// Create this method to get component layout
  const getLayout =
    //@ts-ignore
    (Component?.getLayout as unknown) ?? ((page: unknown) => page);

  return (
    <ChakraProvider theme={appTheme} resetCSS>
      <SessionProvider session={session}>
        {
          // In my case this line throws an error but nothing to worry just ignore it and
          //call the created method
          //@ts-ignore
          getLayout(<Component {...pageProps} />)
        }
      </SessionProvider>
    </ChakraProvider>
  );
};
export default api.withTRPC(MyApp);