feat(app): new App component

kitchen-sink/react/components/App.jsx

@@ -1,31 +1,30 @@
 import React, { useState } from 'react';
 import { HashRouter as Router, Switch, Route } from 'react-router-dom';
-import { TailwindMobileProvider } from 'tailwind-mobile/react';
+import { App as TailwindMobileApp } from 'tailwind-mobile/react';
 
 import routes from '../routes.js';
 import HomePage from '../pages/Home.jsx';
 
 function App() {
   const [theme, setTheme] = useState('ios');
   return (
-    <TailwindMobileProvider theme={theme}>
-      <div
-        className={`absolute left-0 top-0 w-full h-full min-h-screen twm-${theme}`}
-      >
-        <Router>
-          <Switch>
-            {routes.map((route) => (
-              <Route key={route.path} path={route.path}>
-                <route.component />
-              </Route>
-            ))}
-            <Route path="/">
-              <HomePage theme={theme} setTheme={setTheme} />
+    <TailwindMobileApp
+      theme={theme}
+      className="absolute left-0 top-0 w-full h-full min-h-screen"
+    >
+      <Router>
+        <Switch>
+          {routes.map((route) => (
+            <Route key={route.path} path={route.path}>
+              <route.component />
             </Route>
-          </Switch>
-        </Router>
-      </div>
-    </TailwindMobileProvider>
+          ))}
+          <Route path="/">
+            <HomePage theme={theme} setTheme={setTheme} />
+          </Route>
+        </Switch>
+      </Router>
+    </TailwindMobileApp>
   );
 }
 

src/react/components/App.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { cls } from '../shared/cls.js';
+import { TailwindMobileProvider } from '../shared/TailwindMobileProvider.jsx';
+
+const App = (props) => {
+  const {
+    component = 'div',
+    className,
+
+    theme = 'material',
+
+    // Children
+    children,
+
+    // Rest
+    ...rest
+  } = props;
+
+  const Component = component;
+
+  const attrs = {
+    ...rest,
+  };
+
+  return (
+    <TailwindMobileProvider theme={theme}>
+      <Component className={cls(`twm-${theme}`, className)} {...attrs}>
+        {children}
+      </Component>
+    </TailwindMobileProvider>
+  );
+};
+
+export default App;

src/react/tailwind-mobile-react.js

@@ -1,3 +1,4 @@
+import App from './components/App.jsx';
 import Badge from './components/Badge.jsx';
 import Block from './components/Block.jsx';
 import BlockFooter from './components/BlockFooter.jsx';
@@ -46,6 +47,7 @@ export {
   useTheme,
   useThemeClasses,
   // components
+  App,
   Badge,
   Block,
   BlockFooter,