MickSlash
/
lordfrontend
forked from Enri1196/lordfrontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: MickSlash:7c725a62fafa3fb0d425c8dcd941ceb0fd7a6930
Branches Tags
MickSlash:master
Enri1196:master
..
compare: MickSlash:22154d195317748132d58130817930245dfc6c1e
Branches Tags
MickSlash:master
Enri1196:master

4 Commits
7c725a62fa ... 22154d1953

Author SHA1 Message Date
enrico 22154d1953 FIX: routing, links, nav buttons, dynamic title 2020-01-13 21:48:51 +01:00
Enri1196 dc57b6b096 Merge pull request 'creazione routing notfound e About' (#3) from lordcommander/master into master 
Ottime modifiche, verranno accettate con onore!! 👍
 2020-01-12 17:18:07 +00:00
Enri1196 4645211658 Merge pull request 'Aggiornato Titolo index.html' (#2) from MickSlash/master into master 
Accettata con onore
 2020-01-12 17:15:32 +00:00
lordcommander 07e5183266 creazione routing notfound e About 2020-01-12 18:08:48 +01:00
7 changed files with 59 additions and 22 deletions
Show Stats Expand all files Collapse all files

2
public/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1" /> <meta name="viewport" content="initial-scale=1" />
<title>LORDNABBO</title> <title>LORD//CHANNEL</title>
</head> </head>
<body style="background-color: #343a40;"> <body style="background-color: #343a40;">
<div id="root"></div> <div id="root"></div>

9
src/App.js
View File

@ -1,8 +1,10 @@
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react'; import React, { Suspense, lazy } from 'react';
const Home = lazy(() => import('./Home')); const Home = lazy(() => import('./routes/Home'));
//const About = lazy(() => import('./About')); const Anime = lazy(() => import('./routes/Anime'));
const Notfound = lazy(() => import('./routes/notfound'));
class App extends React.Component { class App extends React.Component {
render() { render() {
@ -11,6 +13,9 @@ class App extends React.Component {
<Suspense fallback={<div>Loading...</div>}> <Suspense fallback={<div>Loading...</div>}>
<Switch> <Switch>
<Route exact path="/" component={Home}/> <Route exact path="/" component={Home}/>
<Route path="/Anime" component={Anime}/>
<Route component={Notfound} />
</Switch> </Switch>
</Suspense> </Suspense>
</Router> </Router>

15
src/Buttons.js
View File

@ -1,22 +1,17 @@
import React from 'react' import React from 'react';
import {Link} from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js'; import 'bootstrap/dist/js/bootstrap.min.js';
import './Buttons.css'; import './Buttons.css';
export default class NavButton extends React.Component { class NavButton extends React.Component {
render() { render() {
return ( return (
<li className="nav-item"> <li className="nav-item">
<Button name={this.props.name} /> <Link to={this.props.lhref}><button className="btn1">{this.props.name}</button></Link>
</li> </li>
); );
} }
} }
export class Button extends React.Component { export default NavButton;
render() {
return (
<button className="btn1">{this.props.name}</button>
);
}
}

18
src/Navbar.js
View File

@ -1,4 +1,5 @@
import React from 'react'; import React from 'react';
import {Link} from 'react-router-dom';
import NavButton from './Buttons'; import NavButton from './Buttons';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js'; import 'bootstrap/dist/js/bootstrap.min.js';
@ -8,17 +9,24 @@ class Navbar extends React.Component {
render() { render() {
return ( return (
<nav className="navbar navbar-expand-lg navbar-dark bg-dark"> <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<span className="navbar-brand">{this.props.brand}</span> <Link to="/"><span className="navbar-brand">LORD//{this.props.brand}</span></Link>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navButtons" aria-controls="navButtons" aria-expanded="false" aria-label="Toggle navigation"> <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navButtons" aria-controls="navButtons" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span> <span className="navbar-toggler-icon"></span>
</button> </button>
<div className="collapse navbar-collapse flex" id="navButtons"> <div className="collapse navbar-collapse flex" id="navButtons">
<ul className="navbar-nav nav-mod"> <ul className="navbar-nav nav-mod">
<NavButton name="Home" /> <NavButton name="Film" lhref="/Film" />
<NavButton name="Film" /> <NavButton name="Anime" lhref="/Anime" />
<NavButton name="Series" /> <NavButton name="Serie TV" lhref="/Serietv" />
<NavButton name="About" /> <NavButton name="Immagini" lhref="/Immagini" />
<NavButton name="Musica" lhref="/Musica" />
<NavButton name="Giochi" lhref="/Giochi" />
<NavButton name="Programmi" lhref="/Programmi" />
</ul> </ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
<button class="btn1" type="submit">Search</button>
</form>
</div> </div>
</nav> </nav>
); );

14
src/routes/Anime.js Normal file
View File

@ -0,0 +1,14 @@
import React from 'react';
import Navbar from '../Navbar';
class Anime extends React.Component {
render() {
return (
<>
<Navbar brand="ANIME" />
</>
);
}
}
export default Anime;

8
src/Home.js → src/routes/Home.js
View File

@ -1,13 +1,13 @@
import React from 'react'; import React from 'react';
import Navbar from './Navbar'; import Navbar from '../Navbar';
import Parallax from './Parallax'; import Parallax from '../Parallax';
import CardContainer from './CardContainer'; import CardContainer from '../CardContainer';
class Home extends React.Component { class Home extends React.Component {
render() { render() {
return ( return (
<> <>
<Navbar brand="LORDNABBO" /> <Navbar brand="CHANNEL" />
<Parallax /> <Parallax />
<CardContainer sectionTitle="Latest Uploads" /> <CardContainer sectionTitle="Latest Uploads" />
<CardContainer sectionTitle="Random" /> <CardContainer sectionTitle="Random" />

15
src/routes/notfound.js Normal file
View File

@ -0,0 +1,15 @@
import React from 'react';
import Navbar from '../Navbar';
class NotFound extends React.Component {
render() {
return (
<>
<Navbar brand="404" />
<div><h1>I MEME 404</h1></div>
</>
);
}
}
export default NotFound;