tesseract-design
/
viewfinder

import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

import type {LinksFunction} from '@remix-run/node';
import { setup, extractCss } from '@tesseract-design/viewfinder-react';
import * as React from 'react';
import * as gooberPrefixer from 'goober/prefixer';
import globalStylesheetUrl from './style.css';

setup(React.createElement, gooberPrefixer.prefix);

export const links: LinksFunction = () => {
  return [{ rel: "stylesheet", href: globalStylesheetUrl }];
};

const App = () => (
  <html lang="en-PH">
    <head>
      <meta charSet="utf-8" />
      <meta name="viewport" content="width=device-width,initial-scale=1" />
      <Meta />
      <Links />
      <style>{extractCss()}</style>
    </head>
    <body>
      <Outlet />
      <ScrollRestoration />
      <Scripts />
      <LiveReload />
    </body>
  </html>
)

export default App