From 85cc2801414d89e7e572df3ff6db1866d43b602d Mon Sep 17 00:00:00 2001
From: im6h <tzero1898@gmail.com>
Date: Tue, 15 Feb 2022 00:35:48 +0700
Subject: [PATCH 1/2] feat: add list all authors

---
 components/Header/index.tsx    |  5 +++
 pages/author/Author.module.css | 42 +++++++++++++++++++++
 pages/author/index.tsx         | 68 ++++++++++++++++++++++++++++++++++
 3 files changed, 115 insertions(+)
 create mode 100644 pages/author/index.tsx

diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index cd8cade..ad4c0cd 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -30,6 +30,11 @@ const Header = () => {
           <Link href="/page/random" passHref>
             <Button>Đọc ngẫu nhiên</Button>
           </Link>
+
+          <Link href="/author" passHref>
+            <Button>Authors</Button>
+          </Link>
+
           <Button
             onClick={onToggleTheme}
             icon={theme === 'light' ? HiOutlineMoon : HiOutlineSun}
diff --git a/pages/author/Author.module.css b/pages/author/Author.module.css
index 2c391a4..9fd434c 100644
--- a/pages/author/Author.module.css
+++ b/pages/author/Author.module.css
@@ -22,6 +22,48 @@
   box-shadow: var(--shadow-1);
 }
 
+.blogPage h3 {
+  color: var(--text-normal);
+  margin-bottom: 40px;
+}
+
+.blogPage {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.blogAuthors {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 20px 0px;
+}
+
+.blogAuthor {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: var(--spacing-base);
+}
+
+.blogAvatar {
+  width: 60px;
+  height: 60px;
+  border: 1px solid var(--gray-1);
+  border-radius: 50%;
+  margin-right: 10px;
+  overflow: hidden;
+}
+
+.blogInfo a {
+  font-size: 14px;
+  font-weight: 300;
+}
+
 .profileDetails {
   color: var(--text-normal);
   display: flex;
diff --git a/pages/author/index.tsx b/pages/author/index.tsx
new file mode 100644
index 0000000..3f904fc
--- /dev/null
+++ b/pages/author/index.tsx
@@ -0,0 +1,68 @@
+import channelsData from '@/channels.json';
+import Layout from '@/components/Layout';
+import { Author } from '@/types/sharedTypes';
+import { getAvatarUrl, getHostName } from '@/utils/url';
+import { GetStaticProps } from 'next';
+import Image from 'next/image';
+import Link from 'next/link';
+import styles from './Author.module.css';
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  return {
+    props: {
+      authors: channelsData.channels
+    }
+  };
+};
+
+interface AuthorProps {
+  authors: Author[];
+}
+
+const AuthorPage = ({ authors }: AuthorProps) => {
+  const renderAuthor = (author: Author) => {
+    const { name, avatar_url, url } = author;
+    const hostName = getHostName(url);
+    const blogUrl = `https://${hostName}`;
+
+    return (
+      <div className={styles.blogAuthor}>
+        <div className={styles.blogAvatar}>
+          <Image
+            alt={name}
+            src={getAvatarUrl(avatar_url)}
+            width={60}
+            height={60}
+          />
+        </div>
+        <div className={styles.blogInfo}>
+          <Link href={blogUrl} passHref>
+            <a>{name}</a>
+          </Link>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <Layout>
+      <div className={styles.blogPage}>
+        <h3>Thanks to contributed</h3>
+        <div className={styles.blogAuthors}>
+          {authors.map((author, idx) => (
+            <div
+              key={idx}
+              style={{
+                width: '20%'
+              }}
+            >
+              {renderAuthor(author)}
+            </div>
+          ))}
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default AuthorPage;

From bd7ddf1a8eba6ba582d7b9bc3090bc055d47eb8a Mon Sep 17 00:00:00 2001
From: im6h <tzero1898@gmail.com>
Date: Thu, 17 Feb 2022 22:25:19 +0700
Subject: [PATCH 2/2] fix: fix ui page

---
 components/Header/index.tsx | 2 +-
 pages/author/index.tsx      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index ad4c0cd..619b466 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -32,7 +32,7 @@ const Header = () => {
           </Link>
 
           <Link href="/author" passHref>
-            <Button>Authors</Button>
+            <Button>Về chúng tôi</Button>
           </Link>
 
           <Button
diff --git a/pages/author/index.tsx b/pages/author/index.tsx
index 3f904fc..b507427 100644
--- a/pages/author/index.tsx
+++ b/pages/author/index.tsx
@@ -47,7 +47,7 @@ const AuthorPage = ({ authors }: AuthorProps) => {
   return (
     <Layout>
       <div className={styles.blogPage}>
-        <h3>Thanks to contributed</h3>
+        <h3>Xin cảm ơn sự đóng góp của các tác giả</h3>
         <div className={styles.blogAuthors}>
           {authors.map((author, idx) => (
             <div