Move components to ui

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 PostCard from "../Card";
-import Content from "../Content";
+import { homeItems } from '../../data';
+import Card from '../ui/Card';
+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;
+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;
+export default Settings;