Create card component

components/github-profile.tsx

@@ -0,0 +1,48 @@
+import Image from 'next/image';
+import { parse as URIparse } from 'uri-js';
+import date from '../util/date';
+import style from '../styles/github-profile.module.css';
+
+function CardRow({label, children}: {label: string, children: JSX.Element | string}) {
+    return !children? <></> : (
+        <div className={style.cardRow}>
+            <span className={style.cardLabel}>{label}</span>
+            <span className={style.cardValue}>{children}</span>
+        </div>
+    );
+}
+function GitHubProfile({user}: any) {
+return (<>
+    <div className={style.card}>
+        <div className={style.avatarContainer}>
+            <Image 
+                layout='fixed' 
+                width={256} 
+                height={256} 
+                src={user.avatar_url} 
+                alt={`${user.login}'s GitHub profile avatar`} 
+                />
+        </div> 
+        <div className={style.cardTable}>
+            <CardRow label='Name'>{user.name}</CardRow>
+            <CardRow label='Username'>{user.login}</CardRow>
+            <CardRow label='URL'><a href={user.html_url}>{user.html_url}</a></CardRow>
+            {user.blog && <CardRow label='Blog'>
+                <a href={ !URIparse(user.blog).scheme ? `//${user.blog}`: user.blog}>{user.blog}</a>
+            </CardRow>}
+            <CardRow label='Location'>{user.location}</CardRow>
+            <CardRow label='About'>{user.bio}</CardRow>
+            <CardRow label='Created'>{user.created_at ? date.prettyPrint(user.created_at) : ''}</CardRow>
+            {user.updated_at && <CardRow label='Last Updated'>{user.updated_at ? date.prettyPrint(user.updated_at) : ''}</CardRow>}
+            {user.twitter_username && <CardRow label='Twitter'>                
+                <a className='link extern blue button' 
+                    href={`https://twitter.com/${user.twitter_username}`}>
+                        @{user.twitter_username}
+                </a>
+            </CardRow>}
+        </div>
+    </div>
+    </>);
+}
+
+export default GitHubProfile;