Add Email card

src/components/Card.jsx

@@ -2,26 +2,23 @@ import React from 'react';
 import useFetchData from '../hooks/useFetchData';
 
 
-export default function Card({ href, thumb, apis, data: staticData }) {
-
-    const link = (typeof href === "string") ? href : null;
-    const clickHandler = (typeof href === "function") ? href : null;
-    const data = useFetchData({ apis, staticData });
-
-    return data === null ? (<div className="card"><h1>Loading...</h1></div>) : (
-        <div>
-            <a href={ link } onClick={ clickHandler } className="card">
-                <div className="thumb" style={{backgroundImage: `url(${thumb})`}}/>
-                { data !== false ?
-                    <article>
-                        <h1>{data.major}</h1>
-                        <span>{data.minor}</span>
-                        <p>{data.content}</p>
-                    </article>
-                    :
-                    <article><h1>No data!</h1></article>
-                }
-            </a>
-        </div>
-    );
+export default function Card({ href, thumb, major, minor, content, isLoading }) {
+
+    return <div className="card" onClick={ () => window.location = href }>
+
+        { isLoading &&
+        <h1>Loading...</h1> }
+
+        <div className="thumb" style={ { backgroundImage: `url(${ thumb })` } }/>
+
+        { ! isLoading && <>
+        <article>
+            <h1>{ major }</h1>
+            <span>{ minor }</span>
+            <p>{ content }</p>
+        </article>
+
+        </> }
+    </div>
+
 }

src/components/Cards/Bio.jsx

@@ -1,16 +1,10 @@
-export default function Bio() {
-
-    return <div className="card">
-
-        <div className="thumb" style={ { backgroundImage: 'url(userpic.gif)' } }/>
+import Card from '../Card';
 
-        <article>
-            <h1>Maksim Korinets</h1>
 
-            <span>freelance software engineer</span>
-
-            <p>Embrace simplicity: there is hard work behind it (most of the time).</p>
-        </article>
+export default function Bio() {
 
-    </div>
+    return <Card thumb="userpic.gif"
+                 major="Maksim Korinets"
+                 minor="freelance software engineer"
+                 content="Embrace simplicity: there is hard work behind it (most of the time)." />
 }

src/components/Cards/Email.jsx

@@ -0,0 +1,8 @@
+import Card from '../Card';
+
+
+export default function Email() {
+
+    return <Card thumb="gmail.gif" major="mkorinets@gmail.com" minor="hangouts on" href="mailto:mkorinets@gmail.com"
+                 content="Its a good way to start communication with an introductory email or message. Respect the working vibe." />
+}

src/components/Cards/GitHub.jsx

@@ -1,34 +1,15 @@
 import useGithub from '../../hooks/useGithub';
+import Card from '../Card';
 
 
 export default function GitHub() {
 
     const { yentsun, lastEvent } = useGithub();
 
-    return <div className="card" onClick={ () => window.location = 'https://github.com/yentsun' }>
-
-        { ! yentsun &&
-        <h1>Loading...</h1> }
-
-        <div className="thumb" style={{ backgroundImage: 'url(github.gif)' }}/>
-
-        <article>
-            { yentsun && <>
-
-            <h1>repos: { yentsun.public_repos }</h1>
-
-            <span>followers: { yentsun.followers }</span>
-
-            { lastEvent &&
-            <p>
-                { lastEvent.name }:
-                [{ lastEvent.type }] { lastEvent.text }
-                ({ lastEvent.createdAgo } ago)
-            </p> }
-
-            </> }
-
-        </article>
-
-    </div>
+    return <Card isLoading={ ! yentsun } thumb="github.gif"
+                 major={`repos: ${yentsun?.public_repos}` }
+                 minor={ `followers: ${yentsun.followers}` }
+                 content={ lastEvent
+                     ? `${lastEvent.name}: [${lastEvent.type}] ${lastEvent.text} (${lastEvent.createdAgo} ago)`
+                     : null } />
 }

src/components/Cards/GitLab.jsx

@@ -0,0 +1,34 @@
+import useGithub from '../../hooks/useGithub';
+
+
+export default function GitHub() {
+
+    const { yentsun, lastEvent } = useGithub();
+
+    return <div className="card" onClick={ () => window.location = 'https://github.com/yentsun' }>
+
+        { ! yentsun &&
+        <h1>Loading...</h1> }
+
+        <div className="thumb" style={{ backgroundImage: 'url(github.gif)' }}/>
+
+        <article>
+            { yentsun && <>
+
+            <h1>repos: { yentsun.public_repos }</h1>
+
+            <span>followers: { yentsun.followers }</span>
+
+            { lastEvent &&
+            <p>
+                { lastEvent.name }:
+                [{ lastEvent.type }] { lastEvent.text }
+                ({ lastEvent.createdAgo } ago)
+            </p> }
+
+            </> }
+
+        </article>
+
+    </div>
+}

src/components/Root.jsx

@@ -2,12 +2,14 @@ import React from 'react';
 import '../index.css';
 import GitHub from './Cards/GitHub';
 import Bio from './Cards/Bio';
+import Email from './Cards/Email';
 
 
 export default function Root() {
 
     return <div className="band">
         <Bio />
         <GitHub />
+        <Email />
     </div>
 }