setting up project

2022-02-13 12:36:34 -08:00
parent 2513b29849
commit d2a807248d
7 changed files with 6997 additions and 300 deletions
@@ -10,13 +10,17 @@
  "dependencies": {
    "next": "12.0.10",
    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-dom": "17.0.2",
+    "react-icons": "^4.3.1"
  },
  "devDependencies": {
    "@types/node": "17.0.17",
    "@types/react": "17.0.39",
+    "autoprefixer": "^10.4.2",
    "eslint": "8.9.0",
    "eslint-config-next": "12.0.10",
+    "postcss": "^8.4.6",
+    "tailwindcss": "^3.0.22",
    "typescript": "4.5.5"
  }
 }
@@ -1,72 +1,64 @@
-import type { NextPage } from 'next'
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Home.module.css'
+import Head from "next/head";
+import { useEffect, useRef } from "react";
+
+import { FaTh } from "react-icons/fa";
+
+export default function Fig() {
+  const inputRef = useRef<HTMLInputElement>();
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);

-const Home: NextPage = () => {
  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" />
+        <title>Fig | The Power of Everything</title>
+
+        <link
+          rel="shortcut icon"
+          href="https://api.statvoo.com/favicon/?url=https://fig.io/"
+        />
+
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;1,100;1,200&display=swap"
+          rel="stylesheet"
+        ></link>
      </Head>

-      <main className={styles.main}>
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
-        </h1>
+      {/* header */}
+      <div className="fixed top-0 right-0 flex flex-row p-10 justify-end space-x-2">
+        <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200 ">
+          <FaTh className="ml-auto text-md text-slate-400" />
+        </span>

-        <p className={styles.description}>
-          Get started by editing{' '}
-          <code className={styles.code}>pages/index.tsx</code>
-        </p>
+        <img
+          className="rounded-full shadow-lg"
+          src="https://lh3.googleusercontent.com/fife/AAWUweVw1nKpPc_Q0FtNJQKi1xg6DBlirOq1ouP_Nbx9kIX2Q-h5q9wpra5k3p5xOo0QQOMvrwRVk07RdbWnEIEFW05sm_eFKamDV63uyJGRfdcChrN-CLhtV8CsDSLjJ_ezrJnH6i2yD8OJrhezUZvQvFW6J09R1HOmjCDrqrtxQmeK38mx6Q7F0Y9Z3r7sRpddR_EjUIEiK0ooHFyX3lLvy19xL_nJQKhgtsoc6EtECZ9dKX2a6P-WIF_bKC7OZRiuwsGSU0Yf1HyCz0W8GZIVRrhMidvofwHyQMBHeaZUiNfUYS9_VVQWGy9QnjmMgBDiCiN9Q9DfEKs-Xp0sN8WN82hj9TQWn4o2VhMnSZe79NholSsF4PAGUPZAoJAzNQcatVeuOwiEUm2K5QROHe-jo8SMU4oPwqhiOkA1kVuAbfZN0fBko2Dl2lCp63g-2guEhtPSFv7Arh0GbbAUZuKdeu9w64sjZP_dvr0NHjAywN7zPTauJgf95WnF2J_-yFN5016pOyDrgto02wft3-jbM2UYA8c0AA-4befSIN-OBMS80xo7A1ISI93UdXuETPG7CeaSWKGkqJjcXPQXbddYdPu7H0w4imw_GPSs8cgWKtJgm5Jke4ASwVTXBHbVioUQxYJbFWr4WiqkjT5D8CdiqymppgbxsI-mZLr85ZeTrpflDeOM1MWUrlbCCw2kSanAfpomYIz5eHxOsIBDzIUYB897tYcHF93TtxHD-RUDil5jz1E=s32-c"
+        />
+      </div>

-        <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>
+      <main className="container mx-auto flex flex-col justify-center h-screen">
+        <div
+          className="flex flex-row my-auto mx-auto w-[25rem] 
+        items-center justify-start space-x-5 border bg-slate-50 p-3 px-5 rounded-full"
+        >
+          <img
+            ref={inputRef}
+            className=""
+            height={30}
+            width={30}
+            src="https://api.statvoo.com/favicon/?url=https://fig.io/"
+          />

-          <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/canary/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>
+          <input
+            className="placeholder:text-slate-300 text-slate-600 text-md font-bold outline-none  bg-slate-50"
+            placeholder="power to do"
+          />
        </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>
-  )
+    </>
+  );
 }
-
-export default Home
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
@@ -1,9 +1,15 @@
+@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;
+
+  @apply bg-slate-100;
 }

 a {
@@ -14,3 +20,7 @@ a {
 * {
  box-sizing: border-box;
 }
+
+* {
+  font-family: "Poppins", sans-serif;
+}
@@ -0,0 +1,10 @@
+module.exports = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};