75 lines
2.4 KiB
JavaScript
75 lines
2.4 KiB
JavaScript
import React, {Component} from 'react'
|
|
import './Home.css'
|
|
import {searchRules} from '../engine/rules.js'
|
|
import {Link} from 'react-router'
|
|
import '../components/Rule.css'
|
|
|
|
export default class Home extends Component {
|
|
state = {
|
|
userSearch: '',
|
|
};
|
|
render() {
|
|
return (
|
|
<div id="home">
|
|
<section id="brand">
|
|
<img src={require('../images/logo.png')} />
|
|
<span id="name">
|
|
Système <br />
|
|
Social
|
|
</span>
|
|
<span id="version">alpha</span>
|
|
</section>
|
|
<section id="description">
|
|
<p>
|
|
Les règles des taxes et cotisations sur le travail{' '}
|
|
<span className="insist">lisibles</span>
|
|
{' '}par un humain et{' '}
|
|
<span className="insist">interprétables</span>
|
|
{' '}par un programme.{' '}
|
|
<Link id="aboutLink" to="/a-propos">En savoir plus</Link>
|
|
</p>
|
|
</section>
|
|
<section id="roads">
|
|
|
|
<section id="exploration">
|
|
<h1><i className="fa fa-search" aria-hidden="true"></i>Explorez la base</h1>
|
|
<input
|
|
placeholder="Chercher par ex. retraite"
|
|
onChange={e => this.setState({userSearch: e.target.value})}
|
|
/>
|
|
|
|
<section id="search-results">
|
|
<ul>
|
|
{this.state.userSearch != null &&
|
|
searchRules(this.state.userSearch).map(({type, name}) => (
|
|
<li key={name}>
|
|
<span className="rule-type">
|
|
{type}
|
|
</span>
|
|
<span className="rule-name">
|
|
<Link to={`/regle/${name}`}>{name}</Link>
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
</section>
|
|
<section id="simulation">
|
|
<h1><i className="fa fa-calculator" aria-hidden="true"></i>Simulez vos droits et obligations</h1>
|
|
<ul>
|
|
<li key="cdd">
|
|
<span className="simulateur">Surcoût du CDD</span>
|
|
<Link to="/cdd-intro"><button>Essayer</button></Link>
|
|
</li>
|
|
<li key="embauche">
|
|
<span className="simulateur">Prix global de l'embauche</span>
|
|
<Link><button className="disabled">Bientôt disponible</button></Link>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|
|
}
|