🐛 Fix gists styles

fix #48
fix #49

components/gists/FileContent.tsx

@@ -0,0 +1,48 @@
+import Anchor from 'components/mdx/Anchor';
+import Loading from 'components/RUA/loading/RUALoading';
+import dayjs from 'dayjs';
+import dynamic from 'next/dynamic';
+import Link from 'next/link';
+import { Gist } from 'types';
+
+const GistsCode = dynamic(() => import('components/gists/GistsCode'), {
+  loading: () => <Loading classNames="h-[300px]" />,
+});
+
+type Props = {
+  gists: Gist[];
+};
+
+const FileContent = ({ gists }: Props) => {
+  return (
+    <>
+      <div className="flex-1 py-4 overflow-hidden md:pl-8">
+        {gists.map((g) => (
+          <div key={g.id}>
+            {Object.keys(g.files).map((f) => (
+              <div key={g.files[f].raw_url} className="pb-4 ">
+                {/* Username and file name */}
+                <h1 className="md:text-lg">
+                  {g.owner.login} /
+                  <Link href={`/g/${g.id}`} passHref>
+                    <Anchor external={false}>{g.files[f].filename}</Anchor>
+                  </Link>
+                </h1>
+                {/* Time */}
+                <p className="text-gray-400">
+                  Last active: {dayjs(g.updated_at).fromNow()}
+                </p>
+                {/* Description */}
+                <p className="text-gray-500">{g.description}</p>
+
+                <GistsCode file={g.files[f]} />
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default FileContent;

components/gists/GistsCode.tsx

@@ -59,7 +59,8 @@ const GistsCode = ({ file, showFileName = false }: Props) => {
               className={classNames(
                 'px-4 bg-white',
                 'leading-[30px]',
-                'dark:bg-[hsl(220,13%,18%)] dark:border-b dark:border-b-[rgb(128,203,196)]'
+                'dark:bg-[hsl(220,13%,18%)] dark:border-b dark:border-b-[rgb(128,203,196)]',
+                'overflow-hidden whitespace-nowrap overflow-ellipsis'
               )}
             >
               {file.filename}

components/gists/UserInfo.tsx

@@ -0,0 +1,78 @@
+import classNames from 'classnames';
+import Image from 'next/image';
+import avatar from 'public/images/img/avatar.svg';
+import { FiLink, FiMail, FiTwitter } from 'react-icons/fi';
+import { GithubUser } from 'types';
+
+type Props = {
+  user: GithubUser;
+};
+
+const UserInfo = ({ user }: Props) => {
+  return (
+    <>
+      <div
+        className={classNames(
+          'flex md:items-center flex-1',
+          'max-w-[280px] md:block',
+          'mb-4 flex-col md:flex-row'
+        )}
+      >
+        <div className="flex md:flex-col">
+          <div
+            className={classNames(
+              'w-16 h-16 mr-4 overflow-hidden',
+              'md:w-auto h-auto'
+            )}
+          >
+            <Image
+              src={avatar}
+              alt="Avatar"
+              priority
+              className="rounded-full"
+            />
+          </div>
+
+          <div>
+            <h1 className="text-xl font-bold font-Barlow md:text-2xl">
+              {user.name}
+            </h1>
+
+            <h2 className="text-xl text-gray-400 font-Barlow md:text-2xl">
+              {user.login}
+            </h2>
+          </div>
+        </div>
+
+        <div className="my-4">{user.bio}</div>
+
+        <div>
+          <div className="flex items-center mb-1">
+            <FiMail className="mr-2" />
+            <span>
+              <a href={`mailto:${user.email}`}>{user.email}</a>
+            </span>
+          </div>
+          <div className="flex items-center mb-1">
+            <FiLink className="mr-2" />
+            <a href={user.blog} target="_blank" rel="noreferrer">
+              {user.blog}
+            </a>
+          </div>
+          <div className="flex items-center mb-1">
+            <FiTwitter className="mr-2" />
+            <a
+              rel="noreferrer"
+              target="_blank"
+              href={`https://twitter.com/${user.twitter_username}`}
+            >
+              @{user.twitter_username}
+            </a>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default UserInfo;