text: import Head from 'next/head';
  import dynamic from 'next/dynamic';
  import Navbar from './Navbar';
  import { useRouter } from 'next/router';
  
  const DynamicFooter = dynamic(() => import('./ui/Footer'))
  
  export default function SiteLayout({ children, meta: pageMeta }) {
          const meta = {
                  title: 'Coffee with friends @starcafe',
                  description: 'Enjoy coffee with friends.',
                  cardImage: '/og.png',
                  ...pageMeta
          };
  
          const router = useRouter()
  
          return (
                  <>
                          <Head>
                                  <title>{meta.title}</title>
                                  <meta content="width=device-width, user-scalable=no, initial-scale=1, viewport-fit=cover" name="viewport" />
                                  <meta content={meta.description} name="description" />
                                  <meta property="og:type" content="website" />
                                  <meta property="og:url" content={`https://star.cafe${router.asPath}`} />
                                  <meta property="og:site_name" content={meta.title} />
                                  <meta property="og:description" content={meta.description} />
                                  <meta property="og:title" content={meta.title} />
                                  <meta property="og:image" content={meta.cardImage} />
                                  <meta name="twitter:card" content="summary_large_image" />
                                  <meta name="twitter:site" content="@starcafe" />
                                  <meta name="twitter:title" content={meta.title} />
                                  <meta name="twitter:description" content={meta.description} />
                                  <meta name="twitter:image" content={meta.cardImage} />
                                  <meta charSet="utf-8" />
                                  <meta name='application-name' content="@starcafe" />
                                  <meta content="IE=edge" httpEquiv="X-UA-Compatible" />
                                  <meta name="robots" content="follow, index" />
                                  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=9B05yOLOnb" />
                                  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=9B05yOLOnb" />
                                  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=9B05yOLOnb" />
                                  <link rel="manifest" href="/manifest.json" />
                                  <link rel="mask-icon" href="/safari-pinned-tab.svg?v=9B05yOLOnb" color="#261e18" />
                                  <link rel="shortcut icon" href="/favicon.ico?v=9B05yOLOnb" />
                                  <meta name="msapplication-TileColor" content="black" />
                                  <meta name="theme-color" content="black" />
                                  <meta name='format-detection' content='telephone=no' />
                                  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
                                  <link rel="apple-touch-icon" href="apple-icon-180.png" />
                                  <meta name="apple-mobile-web-app-capable" content="yes" />
                                  <meta name="apple-mobile-web-app-title" content="@starcafe" />
                                  <link rel="apple-touch-startup-image" href="/images/ayo-ogunseinde.png"></link>
                                  <link href="/splashscreens/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
                                  <link href="/splashscreens/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
                                  <link href="/splashscreens/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
                                  <link href="/splashscreens/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
                                  <link href="/splashscreens/iphonexr_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
                                  <link href="/splashscreens/iphonexsmax_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
                                  <link href="/splashscreens/ipad_splash.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
                                  <link href="/splashscreens/ipadpro1_splash.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
                                  <link href="/splashscreens/ipadpro3_splash.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
                                  <link href="/splashscreens/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
                                  <script async defer data-website-id="e6260f48-a807-4df6-9589-660006cf2d4f" src="https://stats.star.cafe/umami.js"></script>
                          </Head>
                          <Navbar title="" />
                          <div id="skip">
                                  {children}
                          </div>
                          <DynamicFooter />
                  </>
          );
  }
  
  export const getLayout = page => <SiteLayout>{page}</SiteLayout>;
  
  
  