48 lines
1.5 KiB
JavaScript
48 lines
1.5 KiB
JavaScript
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;
|