refactor: create article item component

Author: Lanttcat

components/ArticleItem.tsx

@@ -0,0 +1,35 @@
+import { memo } from "react"
+
+interface ArticleItemProps {
+  imageURL: string,
+  name: string
+  tags: string
+  authors: string
+  path: string
+}
+
+export const ArticleItem = memo<ArticleItemProps>(({ imageURL, tags, authors, name, path }) => {
+  return (
+    <div className="p-4 md:w-1/3">
+      <div className="h-full border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden">
+        <img className="lg:h-48 md:h-36 w-full object-cover object-center" src={imageURL} alt={name} />
+        <div className="p-6">
+          <h2 className="tracking-widest text-xs title-font font-medium text-gray-400 mb-1">{ tags }</h2>
+          <h1 className="title-font text-lg font-medium text-gray-900 mb-3">{ name }</h1>
+          <p className="leading-relaxed mb-3">{ authors }</p>
+          <div className="flex items-center flex-wrap ">
+            <a className="text-indigo-500 inline-flex items-center md:mb-2 lg:mb-0" href={"/article?cid=" + path}>Goto
+              <svg className="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2"
+                fill="none" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M5 12h14"/>
+                <path d="M12 5l7 7-7 7"/>
+              </svg>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+})
+
+ArticleItem.displayName = 'ArticleItem'

pages/_app.tsx

@@ -186,7 +186,7 @@ function App({ Component, pageProps }) {
                                 active ? "bg-blue-500 text-gray-300" : "text-gray-900"
                               } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
                             >
-                              id: {getBrief(account)}
+                              ID: {getBrief(account)}
                             </button>
                           )}
                         </Menu.Item>

pages/articles-all.js

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react"
 import axios from "axios"
 import { Layout } from "../components/Layout"
+import { ArticleItem } from "../components/ArticleItem"
 
 let ethAccount
 
@@ -28,27 +29,12 @@ export default function MyAssets() {
 
   return (
     <Layout>
-      <div className="flex justify-center">
-        <div className="p-4">
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 pt-4">
-            {nfts.map((nft, i) => (
-              <div key={i} className="border shadow rounded-xl overflow-hidden">
-                <img src={nft.image} className="rounded" />
-                <div className="p-4">
-                  <a href={"/article?cid=" + nft.path}>
-                    <p className="text-2xl font-semibold">{nft.name}</p>
-                  </a>
-                  <p className="text-2xl font-semibold">
-                  By:
-                    <a href={"/articles?author=" + nft.eth}>{nft.authors}</a>
-                  </p>
-                Tags: {nft.tags}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
+      <section className="text-gray-600 body-font flex flex-wrap -m-4 justify-start m-6">
+        {nfts.map((nft, i) => (
+          <ArticleItem key={i} imageURL={nft.image} name={nft.name} tags={nft.tags} authors={nft.authors}  path={nft.path}/>
+        ))}
+
+      </section>
     </Layout>
   )
 }

pages/articles-my.js

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react"
 import axios from "axios"
 import { useAccount } from "../hooks/useAccount"
 import { Layout } from "../components/Layout"
+import { ArticleItem } from "../components/ArticleItem"
 
 export default function MyAssets() {
   const [nfts, setNfts] = useState([])
@@ -27,26 +28,11 @@ export default function MyAssets() {
 
   return (
     <Layout>
-      <div className="flex justify-center">
-        <div className="p-4">
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 pt-4">
-            {nfts.map((nft, i) => (
-              <div key={i} className="border shadow rounded-xl overflow-hidden">
-                <img src={nft.image} className="rounded" />
-                <div className="p-4">
-                  <a href={"/article?cid=" + nft.path}>
-                    <p className="text-2xl font-semibold">{nft.name}</p>
-                  </a>
-                  <p className="text-2xl font-semibold">
-                  By:
-                    <a href={"/articles?author=" + nft.eth}>{nft.authors}</a>
-                  </p>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
+      <section className="text-gray-600 body-font flex flex-wrap -m-4 m-6">
+        {nfts.map((nft, i) => (
+          <ArticleItem key={i} imageURL={nft.image} name={nft.name} tags={nft.tags} authors={nft.authors}  path={nft.path}/>
+        ))}
+      </section>
     </Layout>
   )
 }

pages/create-draft.tsx

@@ -3,7 +3,7 @@ import { Editor } from "../components/Editor"
 export default function CreateDraft() {
   const account = 'testaccout'
   return (
-    <div className="flex justify-center py-16 min-h-screen">
+    <div className="flex justify-center py-16">
       <Editor account={account} />
     </div>
   )