basic frontend working with tailwind

edennington · Aug 30, 2021 · 09d14a5 · 09d14a5
1 parent 7cb12e1
commit 09d14a5
Show file tree

Hide file tree

Showing 11 changed files with 752 additions and 134 deletions.
diff --git a/components/Layout.tsx b/components/Layout.tsx
diff --git a/components/List.tsx b/components/List.tsx
diff --git a/components/ListDetail.tsx b/components/ListDetail.tsx
diff --git a/components/ListItem.tsx b/components/ListItem.tsx
diff --git a/package.json b/package.json
@@ -19,7 +19,10 @@
     "@types/node": "^12.12.21",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.1",
+    "autoprefixer": "^10.3.3",
+    "postcss": "^8.3.6",
     "prettier": "^2.3.2",
-    "typescript": "4.0"
+    "tailwindcss": "^2.2.8",
+    "typescript": "^4.4.2"
   }
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -0,0 +1,26 @@
+import 'tailwindcss/tailwind.css'
+import Head from 'next/head'
+function Robes({ Component, pageProps }) {
+  return (
+    <>
+      <Component {...pageProps} />
+      <style jsx global>
+        {`
+          body {
+            background: black;
+            color: white;
+          }
+        `}
+      </style>
+      <Head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;600;700&display=swap"
+          rel="stylesheet"
+        />
+      </Head>
+    </>
+  )
+}
+
+export default Robes
diff --git a/pages/api/robes/index.ts b/pages/api/robes/index.ts
@@ -1,11 +1,11 @@
 import { NextApiRequest, NextApiResponse } from 'next'
 import pMap from 'p-map'
-import { chunk, flatten, orderBy, take } from 'lodash'
+import { chunk, flatten, orderBy } from 'lodash'
 import { utils as etherUtils, BigNumber } from 'ethers'
 import type { OpenseaResponse, Asset } from '../../../utils/openseaTypes'
 import RobeIDs from '../../../data/robes-ids.json'
 
-const chunked = take(chunk(RobeIDs, 20), 3)
+const chunked = chunk(RobeIDs, 20)
 const apiKey = process.env.OPENSEA_API_KEY
 
 const fetchRobePage = async (ids: string[]) => {
@@ -46,7 +46,7 @@ const fetchRobes = async () => {
         svg: a.image_url,
       }
     })
-  return orderBy(mapped, 'price', 'asc')
+  return orderBy(mapped, ['price', 'id'], 'asc')
 }
 
 const handler = async (_req: NextApiRequest, res: NextApiResponse) => {

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,15 +1,57 @@
 import Link from 'next/link'
-import Layout from '../components/Layout'
-
-const IndexPage = () => (
-  <Layout title="Home | Next.js + TypeScript Example">
-    <h1>Hello Next.js 👋</h1>
-    <p>
-      <Link href="/about">
-        <a>About</a>
-      </Link>
-    </p>
-  </Layout>
-)
+import { RobeInfo } from './api/robes'
+import { format as ts } from 'timeago.js'
+
+export async function getStaticProps() {
+  const res = await fetch('https://robes-market.vercel.app/api/robes')
+  const data = await res.json()
+
+  return {
+    props: {
+      robes: data.robes,
+      lastUpdate: data.lastUpdate,
+    },
+    revalidate: 300,
+  }
+}
+
+interface Props {
+  robes: RobeInfo[]
+  lastUpdate: string
+}
+
+const Robe = ({ robe }: { robe: RobeInfo }) => {
+  return (
+    <a href={robe.url} target="_blank">
+      <div className="flex flex-col justify-center items-center gap-2 p-4 m-4 border border-white transform hover:scale-105 transition-all">
+        <img src={robe.svg} />
+        <div className="text-center">
+          <p className="text-lg">#{robe.id}</p>
+          <p>{robe.price} ETH</p>
+        </div>
+      </div>
+    </a>
+  )
+}
+
+const IndexPage = ({ robes, lastUpdate }: Props) => {
+  return (
+    <div className="font-mono flex flex-col justify-center items-center gap-4 pt-10 w-screen">
+      <h1 className="text-3xl">Divine Robes</h1>
+      <div className="text-center">
+        <p className="text-xl">
+          The current floor price for Divine Robes is {robes[0].price} ETH.
+        </p>
+        <p>Last updated {ts(lastUpdate)}</p>
+
+        <div className="grid grid-cols-2 pt-5">
+          {robes.map((robe) => {
+            return <Robe robe={robe} key={robe.id} />
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
 
 export default IndexPage
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,14 @@
+module.exports = {
+  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    fontFamily: {
+      mono: 'Inconsolata, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    },
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}