Move components to ui

components/Card.jsx

@@ -1,19 +0,0 @@
-const PostCard = ({ title, type, text, author, image }) => (
-  <div className="m-auto px-4 py-4 max-w-xl">
-    <div className="bg-white shadow-md rounded-b-xl">
-      <div>
-        <img
-          className="rounded-t-xl h-32 w-full object-cover"
-          src={image || 'https://ionic-docs-demo.herokuapp.com/assets/card-top-img.png'}
-        />
-      </div>
-      <div className="px-4 py-4 mt-2 bg-white rounded-b-xl">
-        <h4 className="font-bold py-0 text-s text-gray-400 uppercase">{type}</h4>
-        <h2 className="font-bold text-2xl text-gray-800">{title}</h2>
-        <p className="sm:text-sm text-s text-gray-500 mr-1 my-3">{text}</p>
-      </div>
-    </div>
-  </div>
-);
-
-export default PostCard;

components/pages/Feed.jsx

@@ -1,8 +1,8 @@
-import Content from '../Content';
-
 import { Virtuoso } from 'react-virtuoso';
-import List from '../List';
+
-import ListItem from '../ListItem';
+import Content from '../ui/Content';
+import List from '../ui/List';
+import ListItem from '../ui/ListItem';
 
 const Feed = ({ selected }) => {
   return (

components/pages/Home.jsx

@@ -1,6 +1,22 @@
-import { homeItems } from "../../data";
+import { homeItems } from '../../data';
-import PostCard from "../Card";
+import Card from '../ui/Card';
-import Content from "../Content";
+import Content from '../ui/Content';
+
+const PostCard = ({ title, type, text, author, image }) => (
+  <Card>
+    <div>
+      <img
+        className="rounded-t-xl h-32 w-full object-cover"
+        src={image || 'https://ionic-docs-demo.herokuapp.com/assets/card-top-img.png'}
+      />
+    </div>
+    <div className="px-4 py-4 mt-2 bg-white rounded-b-xl">
+      <h4 className="font-bold py-0 text-s text-gray-400 uppercase">{type}</h4>
+      <h2 className="font-bold text-2xl text-gray-800">{title}</h2>
+      <p className="sm:text-sm text-s text-gray-500 mr-1 my-3">{text}</p>
+    </div>
+  </Card>
+);
 
 const Home = ({ selected }) => {
   return (
@@ -9,7 +25,7 @@ const Home = ({ selected }) => {
         <PostCard {...i} />
       ))}
     </Content>
-  )
+  );
-}
+};
 
 export default Home;

components/pages/Settings.jsx

@@ -1,11 +1,11 @@
-import Content from "../Content";
+import Content from '../ui/Content';
 
 const Settings = ({ selected }) => {
   return (
     <Content visible={selected} className="p-4">
       <h2>Settings</h2>
     </Content>
-  )
+  );
-}
+};
 
 export default Settings;

components/ui/Card.jsx

@@ -0,0 +1,9 @@
+import classNames from 'classnames';
+
+const Card = ({ children, className, ...props }) => (
+  <div {...props} className={classNames('m-auto px-4 py-4 max-w-xl', className)}>
+    <div className="bg-white shadow-md rounded-b-xl">{children}</div>
+  </div>
+);
+
+export default Card;

components/ui/Modal.jsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useDrag } from 'react-use-gesture';
-import Store from '../store';
+import Store from '../../store';
 import { SafeAreaContext } from './SafeArea';
 
 const Modal = ({ open, onClose, children }) => {

components/ui/Nav.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 
 import { Plugins } from '@capacitor/core';
-import Store from '../store';
+import Store from '../../store';
 
 const Nav = ({ page }) => {
   const [showMenu, setShowMenu] = useState(false);

components/ui/README.md

@@ -0,0 +1,5 @@
+# UI Components
+
+These components are a mini-tailwind UI framework for building native mobile apps with web technologies.
+
+These components are meant to be modified and customized to fit your app, and provide many common mobile UI patterns.

pages/index.js

@@ -1,22 +1,23 @@
+import { useState } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
 import Store from '../store';
 
-import App from '../components/App';
+import App from '../components/ui/App';
-import Backdrop from '../components/Backdrop';
+import Backdrop from '../components/ui/Backdrop';
-import Menu from '../components/Menu';
+import Menu from '../components/ui/Menu';
-import Modal from '../components/Modal';
+import Modal from '../components/ui/Modal';
-import Nav from '../components/Nav';
+import Nav from '../components/ui/Nav';
+import Tab from '../components/ui/Tab';
+import TabBar from '../components/ui/TabBar';
+import List from '../components/ui/List';
+import ListItem from '../components/ui/ListItem';
+import Button from '../components/ui/Button';
+import { SafeAreaProvider } from '../components/ui/SafeArea';
+
 import Home from '../components/pages/Home';
 import Feed from '../components/pages/Feed';
 import Settings from '../components/pages/Settings';
-import Tab from '../components/Tab';
-import TabBar from '../components/TabBar';
-import List from '../components/List';
-import ListItem from '../components/ListItem';
-import { useState } from 'react';
-import Button from '../components/Button';
-import { SafeAreaProvider } from '../components/SafeArea';
 
 const pages = [
   { id: 'home', title: 'Home', icon: 'home-outline', selectedIcon: 'home', component: Home },