feat(repo): Add repo intro section to repository page

Author: lazhenyi

src/app/(default)/r/[owner]/[repo]/(default)/page.tsx

@@ -11,14 +11,15 @@ import {FileAction} from "@/component/repo/fileaction";
 import {Loader} from "@mantine/core";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
+import {RepoIntro} from "@/component/repo/repointro";
 
 dayjs.extend(relativeTime);
 
 
 export default function RepositoryPage() {
     const [Repo, setRepo] = useState<Repository | undefined>()
     const [Loading, setLoading] = useState(false);
-    const [Tab, setTab] = useState('');
+    const [Tab, setTab] = useState('intro');
     const [Owner, setOwner] = useState({
         owner: '',
         repo: ''
@@ -188,6 +189,13 @@ export default function RepositoryPage() {
                                 </div>
                             )
                         }
+                        {
+                            Tab === 'intro' && (
+                                <div className="intro-page">
+                                    <RepoIntro repo={Repo} owner={Owner.owner} branch={DefaultBranch} head={HeadCommit} />
+                                </div>
+                            )
+                        }
                     </>
                 )
             }

src/style/repo.css

@@ -124,4 +124,55 @@
         flex-direction: column;
         gap: 1rem;
     }
+}
+
+.repo-intro {
+    display: flex;
+    .repo-readme {
+        width: auto;
+    }
+    .repo-intro-card {
+        @media screen and (max-width: 1500px) {
+            display: none;
+        }
+        border: 1px #dddddd solid;
+        border-top: none;
+        min-width: 360px;
+        max-height: 60vh;
+        .clone-url {
+            padding: 0.25rem;
+        }
+        .repo-intro-card-title {
+            padding: 1rem;
+            h1 {
+                font-size: 1.5rem;
+            }
+            span {
+                font-size: 1rem;
+            }
+        }
+       .repo-intro-card-list {
+           display: flex;
+           flex-direction: column;
+           gap: 0.25rem;
+           justify-content: flex-start;
+           padding: 0.5rem 0.25rem;
+           max-width: 45%;
+        }
+
+        .repo-intro-card-list-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .repo-intro-card-list-item a {
+            color: #0087ed;
+            cursor: pointer;
+        }
+
+        .repo-intro-card-list-item span {
+            font-size: 1rem;
+        }
+    }
 }