repl.it
@mcuringa/

SpellBookv2

React

No description

fork
loading
Files
  • src
    • App.js
    • data
    • res
    • Collections.js
    • Credits.js
    • Home.js
    • Icons.css
    • Icons.js
    • index.css
    • index.js
    • Spells.js
  • Packager files
  • package.json
src/App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import React from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import d20 from "./res/d20.svg";


import Collections from "./Collections";
import { SpellTable, SpellDetail } from "./Spells";
import Credits from "./Credits";
import Home from "./Home";

function App() {
  return (
    <Router>
      <div className="App container">
        <Header />
        <Route exact path="/" component={Home} />
        <Route exact path="/collections" component={Collections} />
        <Route path="/collections/:id" component={Collections} />
        <Route exact path="/spells" component={SpellTable} />
        <Route exact path="/spells/detail" component={SpellDetail} />
        <Route exact path="/credits" component={Credits} />
      </div>
    </Router>
  );
}

function Header(props) {
  return (
    <header>
      <TopNav />
    </header>
  )
}

function TopNav(props) {
  return (
    <nav className="navbar navbar-expand-lg navbar-light bg-light">

      <Link className="navbar-brand text-primary" to="/">
        <img src={d20} width="30" height="30" className="d-inline-block align-top pr-2" alt="20 sided die" />
        SpellCaster
      </Link>

      <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span className="navbar-toggler-icon"></span>
      </button>

      <div className="collapse navbar-collapse" id="navbarNav">
        <ul className="navbar-nav">
          <li className="nav-item">
            <Link className="nav-link" to="/">Home</Link>
          </li>
          <li className="nav-item">
            <Link className="nav-link" to="/collections">Collections</Link>
          </li>
          <li className="nav-item">
            <Link className="nav-link" to="/spells">Spells</Link>
          </li>
          <li className="nav-item">
            <Link className="nav-link" to="/credits">Credits</Link>
          </li>
        </ul>
      </div>
    </nav>
  )
}

export default App;
Fetching token
?