Implement a directory page to show authors

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>Về chúng tôi</Button>
+          </Link>
+
           <Button
             onClick={onToggleTheme}
             icon={theme === 'light' ? HiOutlineMoon : HiOutlineSun}

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;

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>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
+              key={idx}
+              style={{
+                width: '20%'
+              }}
+            >
+              {renderAuthor(author)}
+            </div>
+          ))}
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default AuthorPage;