fix: router page

maqi1520 · Dec 14, 2021 · fffa7b2 · fffa7b2 · vercel · Dec 14, 2021
1 parent 161bad2
commit fffa7b2
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 21 deletions.
diff --git a/next.config.js b/next.config.js
@@ -1,4 +1,7 @@
 module.exports = {
+  images: {
+    domains: ['images.unsplash.com'],
+  },
   eslint: {
     dirs: ['src', 'server'], // Only run ESLint on the 'pages' and 'utils' directories during production builds (next build)
   },

diff --git a/src/pages/develop/index.jsx b/src/pages/develop/index.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { getLayout } from '../../components/Layout';
+
+export default function Develop() {
+  return (
+    <div className="container max-w-6xl mx-auto py-4">
+      <div className="flex justify-between">
+        <div className="text-2xl font-medium text-gray-800">开发</div>
+      </div>
+      <div>
+        安装 docker-compose docker-compose up docker-compose up -d
+        后台启动并运行容器 开发中
+      </div>
+    </div>
+  );
+}
+
+Develop.getLayout = getLayout;
diff --git a/src/pages/docs/index.jsx b/src/pages/docs/index.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { getLayout } from '../../components/Layout';
+
+export default function Docs() {
+  return (
+    <div className="container max-w-6xl mx-auto py-4">
+      <div className="flex justify-between">
+        <div className="text-2xl font-medium text-gray-800">文档</div>
+      </div>
+      <div>开发中</div>
+    </div>
+  );
+}
+
+Docs.getLayout = getLayout;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -396,11 +396,15 @@ function Home({}: Props): ReactElement {
                     </h3>
                     <p className="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
                   </div>
-                  <Image
-                    className="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0"
-                    src="https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2694&amp;q=80"
-                    alt=""
-                  />
+                  <div className="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0">
+                    <Image
+                      width="100%"
+                      height="100%"
+                      className="rounded-full" // just an example
+                      src="https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=269&amp;q=80"
+                      alt=""
+                    />
+                  </div>
                 </blockquote>
                 <blockquote className="flex flex-col-reverse items-center justify-between w-full col-span-1 p-6 mt-16 mb-16 text-center transition-all duration-200 bg-gray-100 rounded-lg md:flex-row md:text-left hover:bg-white hover:shadow ease xl:mb-0">
                   <div className="flex flex-col pr-10">
@@ -424,11 +428,15 @@ function Home({}: Props): ReactElement {
                     </h3>
                     <p className="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
                   </div>
-                  <Image
-                    className="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0"
-                    src="https://images.unsplash.com/photo-1546820389-44d77e1f3b31?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1400&amp;q=80"
-                    alt=""
-                  />
+                  <div className="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0">
+                    <Image
+                      width="100%"
+                      height="100%"
+                      className="rounded-full" // just an example
+                      src="https://images.unsplash.com/photo-1546820389-44d77e1f3b31?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=140&amp;q=80"
+                      alt=""
+                    />
+                  </div>
                 </blockquote>
               </div>
               <div className="w-full xl:w-1/2 xl:pl-8">
@@ -455,11 +463,15 @@ function Home({}: Props): ReactElement {
                     </h3>
                     <p className="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
                   </div>
-                  <Image
-                    className="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0"
-                    src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1700&amp;q=80"
-                    alt=""
-                  />
+                  <div className="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0">
+                    <Image
+                      width="100%"
+                      height="100%"
+                      className="rounded-full" // just an example
+                      src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=170&amp;q=80"
+                      alt=""
+                    />
+                  </div>
                 </blockquote>
                 <blockquote className="flex flex-col-reverse items-center justify-between w-full col-span-1 p-6 mt-16 text-center transition-all duration-200 bg-gray-100 rounded-lg md:flex-row md:text-left hover:bg-white hover:shadow ease">
                   <div className="flex flex-col pr-10">
@@ -484,11 +496,15 @@ function Home({}: Props): ReactElement {
                     </h3>
                     <p className="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
                   </div>
-                  <Image
-                    className="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0"
-                    src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2700&amp;q=80"
-                    alt=""
-                  />
+                  <div className="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0">
+                    <Image
+                      width="100%"
+                      height="100%"
+                      className="rounded-full" // just an example
+                      src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=270&amp;q=80"
+                      alt=""
+                    />
+                  </div>
                 </blockquote>
               </div>
             </div>

diff --git a/src/pages/project/index.tsx b/src/pages/project/index.tsx
@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react';
 import Link from 'next/link';
 import { getLayout } from '../../components/Layout';
+import { useRouter } from 'next/router';
 
 interface Props {}
 
@@ -37,11 +38,18 @@ export function Item({}: Props): ReactElement {
 }
 
 export default function Project(): ReactElement {
+  const router = useRouter();
+
+  const handleCreate = () => {
+    router.push('/editor');
+  };
   return (
     <main className="container max-w-6xl mx-auto py-4">
       <div className="flex justify-between">
         <div className="text-2xl font-medium text-gray-800">我的应用</div>
-        <button className="btn btn-primary">创建应用</button>
+        <button onClick={handleCreate} className="btn btn-primary">
+          创建应用
+        </button>
       </div>
       <div className="grid-cols-1 lg:grid-cols-4 gap-4 grid py-4">
         <Item />