Adding files for first stage of completed project

dnrm · Jun 15, 2021 · 252f3b7 · 252f3b7
1 parent f41ab79
commit 252f3b7
Show file tree

Hide file tree

Showing 12 changed files with 1,219 additions and 264 deletions.
diff --git a/components/Users.tsx b/components/Users.tsx
@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from "react";
+import Link from "next/link";
+
+const Users = () => {
+    const [users, setUsers] = useState<Array<any>>([]);
+
+    useEffect(() => {
+        const get = async () => {
+            const response = await fetch("/api/users");
+            const users = await response.json();
+            setUsers(users);
+        };
+        get();
+    }, []);
+
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 py-6">
+            {users.map((i) => {
+                return (
+                    <Link href={`/users/${i.content}`}>
+                        <a>
+                            <div
+                                className="user-container p-4 shadow-sm rounded-md border-gray-200 border-2 cursor-pointer"
+                                key={i._id}
+                            >
+                                <div className="name">
+                                    <h1 className="text-2xl font-bold tracking-tighter">
+                                        {i.content}
+                                    </h1>
+                                </div>
+                            </div>
+                        </a>
+                    </Link>
+                );
+            })}
+        </div>
+    );
+};
+
+export default Users;
diff --git a/images/cover.jpeg b/images/cover.jpeg
diff --git a/package.json b/package.json
@@ -8,9 +8,13 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "10.2.3",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "autoprefixer": "^10.2.6",
+    "firebase": "^8.6.7",
+    "next": "^11.0.0",
+    "postcss": "^8.3.4",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "tailwindcss": "^2.1.4"
   },
   "devDependencies": {
     "@types/react": "17.0.11",

diff --git a/pages/api/hello.ts b/pages/api/hello.ts
diff --git a/pages/api/users.ts b/pages/api/users.ts
@@ -0,0 +1,7 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+    const response = await fetch('https://api.medina.dev/v1/usernames');
+    const usernames = await response.json();
+    res.send(usernames);
+}
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,69 +1,96 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Home.module.css'
+import Head from "next/head";
+import Image from "next/image";
+import src from "../images/cover.jpeg";
+import Users from "../components/Users";
 
 export default function Home() {
-  return (
-    <div className={styles.container}>
-      <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
-      <main className={styles.main}>
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
-        </h1>
-
-        <p className={styles.description}>
-          Get started by editing{' '}
-          <code className={styles.code}>pages/index.js</code>
-        </p>
-
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h2>Documentation &rarr;</h2>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h2>Learn &rarr;</h2>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a
-            href="https://github.com/vercel/next.js/tree/master/examples"
-            className={styles.card}
-          >
-            <h2>Examples &rarr;</h2>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-          >
-            <h2>Deploy &rarr;</h2>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
-
-      <footer className={styles.footer}>
-        <a
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Powered by{' '}
-          <span className={styles.logo}>
-            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
-          </span>
-        </a>
-      </footer>
-    </div>
-  )
+    return (
+        <main className="flex flex-col p-8">
+            <Head>
+                <title>User Profiles | dnrm</title>
+                <meta property="og:title" content="Home | dnrm" />
+                <meta
+                    property="og:description"
+                    content="Social media site by Daniel Medina"
+                />
+                <meta
+                    property="og:image"
+                    content="https://source.unsplash.com/random"
+                />
+            </Head>
+            <header className="flex items-center justify-between">
+                <h1 className="text-6xl md:text-8xl lg:text-9xl tracking-tighter font-bold text-black py-10">
+                    Welcome
+                </h1>
+                <div className="icons flex">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="h-8 w-8 mx-1"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                    >
+                        <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"
+                        />
+                    </svg>
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="h-8 w-8 mx-1"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                    >
+                        <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"
+                        />
+                    </svg>
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="h-8 w-8 mx-1"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                    >
+                        <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+                        />
+                    </svg>
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="h-8 w-8 mx-1"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                    >
+                        <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"
+                        />
+                    </svg>
+                </div>
+            </header>
+            <section>
+                <Image src={src} layout="responsive" />
+            </section>
+            <section id="users">
+                <h1 className="text-4xl md:text-6xl lg:text-8xl tracking-tighter font-bold text-black pt-8 pb-2">
+                    Users
+                </h1>
+                <hr />
+                <Users />
+            </section>
+        </main>
+    );
 }
diff --git a/pages/users/[user].tsx b/pages/users/[user].tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { useRouter } from "next/router";
+
+const User = () => {
+    const router = useRouter();
+    const { user } = router.query;
+
+    return (
+        <div className="flex justify-center items-center w-screen h-screen">
+            <h1 className="text-4xl sm:text-6xl md:text-8xl font-bold tracking-tighter">{user}</h1>
+        </div>
+    );
+};
+
+export default User;
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/styles/Home.module.css b/styles/Home.module.css
diff --git a/styles/globals.css b/styles/globals.css
@@ -1,9 +1,11 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 html,
 body {
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 }
 
 a {