xfy/DefectingCat.github.io
1
0
Fork 0
mirror of https://github.com/DefectingCat/DefectingCat.github.io synced 2025-07-16 01:01:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add gists page

Browse Source
This commit is contained in:
DefectingCat
2023-03-22 15:32:33 +08:00
parent 45209b7a5c
commit b47519256f
4 changed files with 52 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/gists/file-content.tsx
View File

@ -5,10 +5,10 @@ import { GistData } from 'lib/fetcher';
import dynamic from 'next/dynamic';
import Link from 'next/link';
import { memo, Suspense } from 'react';
import GistsCode from './gists-code';
import relativeTime from 'dayjs/plugin/relativeTime';
const GistsCode = dynamic(() => import('components/gists/gists-code'), {
suspense: true,
});
dayjs.extend(relativeTime);
type Props = {
gists: GistData[];
@ -38,9 +38,7 @@ const FileContent = ({ gists }: Props) => {
{/* Description */}
<p className="text-gray-500">{g.description}</p>
<Suspense fallback={<Loading className="h-[300px]" />}>
<GistsCode file={g.files[f]} />
</Suspense>
<GistsCode file={g.files[f]} />
</div>
))}
</div>

83
components/gists/user-info.tsx
View File

@ -1,83 +0,0 @@
import clsx from 'clsx';
import { GetUser } from 'lib/fetcher';
import Image from 'next/image';
import avatar from 'public/images/img/avatar.svg';
import { memo } from 'react';
import { FiLink, FiMail, FiTwitter } from 'react-icons/fi';
type Props = {
user: GetUser;
};
const UserInfo = ({ user }: Props) => {
return (
<>
<div
className={clsx(
'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={clsx(
'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>
{user.blog && (
<div className="flex items-center mb-1">
<FiLink className="mr-2" />
<a href={user.blog} target="_blank" rel="noreferrer">
{user.blog}
</a>
</div>
)}
{user.twitter_username && (
<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 memo(UserInfo);