From 0eaa08b233d18b2344f6f1a442ba3f4495463392 Mon Sep 17 00:00:00 2001
From: Sidharth Rathi <Xodedeveloper@gmail.com>
Date: Thu, 9 Jun 2022 23:04:04 +0530
Subject: [PATCH] feat: finish home page

---
 package.json             |  1 +
 pnpm-lock.yaml           | 17 +++++++++++++++++
 src/hooks/use-editor.tsx |  3 ++-
 src/pages/_app.tsx       |  2 ++
 src/pages/index.tsx      | 16 +++++++++++-----
 5 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 9b20044..0a46c91 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "monaco-textmate": "^3.0.1",
     "nanoid": "^3.3.4",
     "next": "12.1.5",
+    "next-progress": "^2.2.0",
     "onigasm": "^2.2.5",
     "p-queue": "^7.2.0",
     "path-fx": "^2.1.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2f63a01..ffa9ec8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -28,6 +28,7 @@ specifiers:
   monaco-textmate: ^3.0.1
   nanoid: ^3.3.4
   next: 12.1.5
+  next-progress: ^2.2.0
   next-transpile-modules: ^9.0.0
   onigasm: ^2.2.5
   p-queue: ^7.2.0
@@ -65,6 +66,7 @@ dependencies:
   monaco-textmate: 3.0.1_onigasm@2.2.5
   nanoid: 3.3.4
   next: 12.1.5_ef5jwxihqo6n7gxfmzogljlgcm
+  next-progress: 2.2.0_next@12.1.5+react@18.1.0
   onigasm: 2.2.5
   p-queue: 7.2.0
   path-fx: 2.1.2
@@ -1853,6 +1855,17 @@ packages:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
     dev: true
 
+  /next-progress/2.2.0_next@12.1.5+react@18.1.0:
+    resolution: {integrity: sha512-g6VBoaj2SfUhKiBSJW/7ju06Ks3r3mUK79HdrLJ7fmvnjeyHPViAKLQDsMN1QIoBcTqN1hR7A8sISiMfm01qmQ==}
+    peerDependencies:
+      next: '>=6.0.0'
+      react: '>=16.0.0'
+    dependencies:
+      next: 12.1.5_ef5jwxihqo6n7gxfmzogljlgcm
+      nprogress: 0.2.0
+      react: 18.1.0
+    dev: false
+
   /next-transpile-modules/9.0.0:
     resolution: {integrity: sha512-VCNFOazIAnXn1hvgYYSTYMnoWgKgwlYh4lm1pKbSfiB3kj5ZYLcKVhfh3jkPOg1cnd9DP+pte9yCUocdPEUBTQ==}
     dependencies:
@@ -1901,6 +1914,10 @@ packages:
       - '@babel/core'
       - babel-plugin-macros
 
+  /nprogress/0.2.0:
+    resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
+    dev: false
+
   /object-assign/4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
diff --git a/src/hooks/use-editor.tsx b/src/hooks/use-editor.tsx
index f0a89d4..2f1152e 100644
--- a/src/hooks/use-editor.tsx
+++ b/src/hooks/use-editor.tsx
@@ -4,6 +4,7 @@ import {
   createContext,
   Dispatch,
   FC,
+  PropsWithChildren,
   useContext,
   useMemo,
   useState,
@@ -17,7 +18,7 @@ type IEditorState = {
 
 const EditorContext = createContext<IEditorState>(null);
 
-export const EditorProvider: FC = ({ children }) => {
+export const EditorProvider: FC<PropsWithChildren> = ({ children }) => {
   const [state, setState] = useState({
     editor: null,
     monaco: null,
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 0f90f22..ffe38ac 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,5 +1,6 @@
 import { useEventListener } from "@hooks/common";
 import { EditorProvider } from "@hooks/use-editor";
+import NextProgress from "next-progress";
 import type { AppProps } from "next/app";
 import Head from "next/head";
 import { Fragment } from "react";
@@ -24,6 +25,7 @@ function App({ Component, pageProps }: AppProps) {
         <title>Web Pen</title>
       </Head>
       <Provider store={store}>
+        <NextProgress color="#27D3CF" options={{ showSpinner: true }} />
         <EditorProvider>
           <Component {...pageProps} />
         </EditorProvider>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 10bb1aa..b4264cd 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -105,12 +105,15 @@ const Home: NextPage = () => {
           <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8">
             <h1 className="sr-only">Page title</h1>
             {/* Main 3 column grid */}
-            <div className="grid grid-cols-1 gap-4 items-start lg:grid-cols-3  min-h-80 lg:gap-8">
+            <div className="grid grid-cols-1 gap-4 items-start lg:grid-cols-3  min-h-[30rem] h-full lg:gap-8">
               {/* Left column */}
               <div className="grid grid-cols-1 gap-4 lg:col-span-2 h-full bg-dark-700 rounded-lg overflow-hidden shadow-xl">
                 <section aria-labelledby="section-1-title">
-                  <h2 className="sr-only" id="section-1-title">
-                    All Projects
+                  <h2
+                    className="text-xl pt-3 px-3 text-true-gray-400"
+                    id="section-2-title"
+                  >
+                    Your previous projects
                   </h2>
                   <div className="rounded-lg overflow-hidden">
                     <div className="gap-y-3 p-2 grid">
@@ -131,7 +134,10 @@ const Home: NextPage = () => {
               {/* Right column */}
               <div className="grid grid-cols-1 gap-4 h-full bg-dark-700 rounded-lg overflow-hidden shadow-xl">
                 <section aria-labelledby="section-2-title">
-                  <h2 className="sr-only" id="section-2-title">
+                  <h2
+                    className="text-lg pt-3 px-3 text-true-gray-400"
+                    id="section-2-title"
+                  >
                     Select a project template
                   </h2>
                   <div className="rounded-lg overflow-hidden shadow">
@@ -204,7 +210,7 @@ const ProjectCard = ({ project }: { project: Directory }) => {
       <div className="grid grid-cols-2 gap-2 mr-auto">
         <p className="text-xl -mt-1 text-cyan-400">{project.name}</p>
         <p className=" text-true-gray-500 text-sm mt-1 mr-auto">
-          {format(new Date(project.createdAt), "EEEE dd MMMM yyyy tttt")}
+          {format(new Date(project.createdAt), "EEEE dd MMMM yyyy")}
         </p>
 
         <div className="flex mt-1 items-center gap-2">