feat: finish home page

sidwebworks · Jun 9, 2022 · 0eaa08b · 0eaa08b
1 parent f2995bb
commit 0eaa08b
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 6 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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">