feat: add Footer, LoadingSkeleton

app/about/loading.tsx

@@ -1,7 +1,5 @@
-export default async function Loading() {
-  return (
-    <div className="h-[calc(80vh-80px)] flex flex-col items-center justify-center">
-      <h2 className="font-mono text-lg">加载中...</h2>
-    </div>
-  );
+import LoadingSkeleton from '../components/LoadingSkeleton';
+
+export default function Loading() {
+  return <LoadingSkeleton />;
 }

app/about/page.tsx

@@ -6,8 +6,8 @@ export const metadata = {
 
 export default async function About() {
   return (
-    <div className="h-[50vh] mt-[80px] flex flex-col items-center justify-center">
-      <h1 className="mt-10 text-3xl font-bold">页面施工中!</h1>
+    <div className="min-h-[calc(100vh-180px)] flex flex-col items-center justify-center">
+      <h1 className="text-3xl font-bold">页面施工中!</h1>
     </div>
   );
 }

app/components/Footer.tsx

@@ -0,0 +1,18 @@
+export default function Footer() {
+  return (
+    <footer className="h-[100px] mx-40 flex items-center justify-between text-violet12 font-regular">
+      <div>
+        Copyright © 2023 - PRESENT{' '}
+        <a href="/" className="text-[#175199]">
+          Axnir's Site
+        </a>
+      </div>
+      <div>
+        Powered by{' '}
+        <a href="nextjs.org" className="text-[#175199]">
+          Next.js
+        </a>
+      </div>
+    </footer>
+  );
+}

app/components/LoadingSkeleton.tsx

@@ -0,0 +1,8 @@
+export default function LoadingSkeleton() {
+  // TODOui
+  return (
+    <div className="min-h-[calc(100vh-180px)] flex flex-col items-center justify-center">
+      <h2 className="text-lg">加载中...</h2>
+    </div>
+  );
+}

app/components/Nav.tsx

@@ -26,10 +26,10 @@ const Link = ({ href, children }: { href: string; children: ReactNode }) => {
 
 export default function Nav({ className }: { className?: string }) {
   return (
-    <header className="sticky top-0 w-full flex items-center justify-center backdrop-blur-sm bg-white bg-opacity-60">
+    <header className="mx-40 sticky top-0 flex items-center justify-between backdrop-blur-sm bg-white bg-opacity-60">
       <NextLink
         href="/"
-        className="mr-40 flex items-center text-violet12 font-medium"
+        className="flex items-center text-violet12 font-medium"
       >
         {SITE_CONFIG.title}
       </NextLink>

app/layout.tsx

@@ -1,5 +1,7 @@
 import Nav from './components/Nav';
+import Footer from './components/Footer';
 import SITE_CONFIG from '@/site.config';
+
 import './globals.css';
 
 export const metadata = {
@@ -19,6 +21,7 @@ export default function RootLayout({
         <main className="min-h-screen">
           <Nav />
           {children}
+          <Footer />
         </main>
       </body>
     </html>

app/loading.tsx

@@ -1,7 +1,5 @@
-export default async function Loading() {
-  return (
-    <div className="h-[calc(80vh-80px)] flex flex-col items-center justify-center">
-      <h2 className="font-mono text-lg">加载中...</h2>
-    </div>
-  );
+import LoadingSkeleton from './components/LoadingSkeleton';
+
+export default function Loading() {
+  return <LoadingSkeleton />;
 }

app/page.tsx

@@ -1,6 +1,6 @@
 export default async function Home() {
   return (
-    <div className="h-[50vh] mt-[80px] flex flex-col items-center justify-center">
+    <div className="min-h-[calc(100vh-180px)] flex flex-col items-center justify-center">
       <h1 className="text-3xl font-bold">页面施工中!</h1>
     </div>
   );

app/post/loading.tsx

@@ -1,7 +1,5 @@
-export default async function Loading() {
-  return (
-    <div className="h-[50vh] mt-[80px] flex flex-col items-center justify-center">
-      <h2 className="font-mono text-lg">加载中...</h2>
-    </div>
-  );
+import LoadingSkeleton from '../components/LoadingSkeleton';
+
+export default function Loading() {
+  return <LoadingSkeleton />;
 }

app/post/page.tsx

@@ -13,7 +13,7 @@ export default async function Post() {
   const posts = await getPostList();
 
   return (
-    <div className="flex flex-col items-center">
+    <div className="min-h-[calc(100vh-180px)] flex flex-col items-center">
       {posts.map((post) => (
         <Link key={post.id} href={`/post/${post.id}`}>
           <article className="w-[650px] rounded-lg bg-slate-100 p-4 mb-3">