[home]开源官网初始化

home/src/theme/card.jsx

@@ -0,0 +1,54 @@
+import React from 'react'
+
+function TwitterLink ({ url }) {
+    if (!url) {
+        return null
+    }
+
+    return (
+        <a href={ url } className="twitterProfile">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 273.5 222.3" className="octicon"><path d="M273.5 26.3a109.77 109.77 0 0 1-32.2 8.8 56.07 56.07 0 0 0 24.7-31 113.39 113.39 0 0 1-35.7 13.6 56.1 56.1 0 0 0-97 38.4 54 54 0 0 0 1.5 12.8A159.68 159.68 0 0 1 19.1 10.3a56.12 56.12 0 0 0 17.4 74.9 56.06 56.06 0 0 1-25.4-7v.7a56.11 56.11 0 0 0 45 55 55.65 55.65 0 0 1-14.8 2 62.39 62.39 0 0 1-10.6-1 56.24 56.24 0 0 0 52.4 39 112.87 112.87 0 0 1-69.7 24 119 119 0 0 1-13.4-.8 158.83 158.83 0 0 0 86 25.2c103.2 0 159.6-85.5 159.6-159.6 0-2.4-.1-4.9-.2-7.3a114.25 114.25 0 0 0 28.1-29.1" fill="currentColor"></path></svg>
+        </a>
+    )
+}
+
+function GitHubLink ({ url }) {
+    if (!url) {
+        return null
+    }
+
+    return (
+        <a href={url}
+            className="githubProfile"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="GitHub profile"
+        >
+        </a>
+    )
+}
+
+export default function Card ({
+    name,
+    avatar,
+    github,
+    twitter,
+    children
+}) {
+    return (
+        <div className="avatar teamProfile">
+            <img
+                className="avatar__photo avatar__photo--lg"
+                src={ avatar }
+            />
+            <div className="avatar__intro">
+                <h4 className="avatar__name">
+                    { name }
+                    <GitHubLink url={github && `https://github.com/${github}`} />
+                    <TwitterLink url={twitter && `https://twitter.com/${twitter}`} />
+                </h4>
+                <small className="avatar__subtitle">{ children }</small>
+            </div>
+        </div>
+    )
+}