jdcn config

2018-09-20 18:29:45 +10:00
parent 4daeaeb86b
commit 830797c145
2 changed files with 11 additions and 6 deletions
@@ -0,0 +1,47 @@
+const preact = require('preact');
+
+// components all the way down
+const Icon = name => (
+    <span>
+        {name}
+        <svg width="80" height="80" data-jdenticon-value={name} />
+    </span>
+);
+
+// the css attribute name `class` is reserved in js
+// so in react you have to call it `className`
+function Navbar() {
+    const NAMES = ['Mashy', 'ntr'];
+
+    return (
+        <div>
+            <nav className="navbar">
+                <div className="navbar-end">
+                    <a href="/somewhere" className="navbar-item is-active">
+                        Home
+                    </a>
+                    <a href="/somewhere" className="navbar-item">
+                        Store
+                    </a>
+                    <a href="/somewhere" className="navbar-item">
+                        FAQ
+                    </a>
+                    <span className="navbar-item">
+                        <a href="/somewhere" className="button is-info is-inverted">
+                            <span className="icon">
+                                <svg width="80" height="80" data-jdenticon-value="Blog" />
+                            </span>
+                            <span>Blog</span>
+                        </a>
+                    </span>
+                </div>
+            </nav>
+            {NAMES.map(Icon)}
+        </div>
+    );
+    // map is a function that is called on every element of an array
+    // so in this ^^ case it calls Icon('Mashy') which returns some jsx
+    // that gets put into the dom
+}
+
+module.exports = Navbar;