tools/src/components/Wheels/explain.js

import React, { Component } from 'react';
import {
  Row, Col, Alert,
} from 'reactstrap';

import '../../App.css';

class Explain extends Component {
  render() {
    return (
      <Row>
        <Col cs="12">
          <h1>
Informations utiles
          </h1>
          <Row>
            <Col xs="12">
              <h2>
La jante
              </h2>
              <Row>
                <Col xs="12" sm="3">
                  <figure id="figure-A">
                    <img src="jante-face.png" className="img-fluid center-block" alt="Jante vue de face" />
                    <figcaption>
              Figure A
                    </figcaption>
                  </figure>
                  <figure id="figure-B">
                    <img src="jante-profil.png" className="img-fluid center-block" alt="Jante vue de profil" />
                    <figcaption>
              Figure B
                    </figcaption>
                  </figure>
                </Col>
                <Col xs="12" sm="9">
                  <p>
                        Sur une jante il y a 6 paramètres à prendre en compte :
                  </p>
                  <ul>
                    <li>
          Diamètre
                    </li>
                    <li>
          Largeur
                    </li>
                    <li>
          Déport
                    </li>
                    <li>
          Alésage
                    </li>
                    <li>
          Entraxe
                    </li>
                    <li>
          Date de fabrication
                    </li>
                  </ul>
                  <h3>
          Diamètre
                  </h3>
                  <p>
                            Ce paramètre sera à rattacher avec votre pneu. En effet, sur une jante de 15&quot; par exemple
                            vous ne pourrez monter que des pneus en 15&quot; également.
                    <br />
                            Le diamètre de la jante est exprimé en pouce (&quot;). Un pouce est égal à 2&#44;54cm.
                  </p>
                  <h3>
          Largeur
                  </h3>
                  <p>
                            La largeur d&#39;une jante est elle aussi exprimée en pouce.
                  </p>
                  <p>
                            La largeur d&#39;une jante influera sur la largeur du pneu que vous choissirez.
                    <br />
                            En effet, si vous prenez un pneu trop large par rapport à la largeur de votre jante celui-ci
                            aura tendace à s&#39;écraser/se déformer.
                    <br />
                            Au contraire, si vous montez un pneu pas assez large celui-ci aura du mal à coller à la
                            jante. Ce montage se fait de plus en plus, cette technique est appelée "flanc tendu".
                            Elle est de plus en plus utilisée dans le milieu de "german look".
                  </p>
                  <Alert color="info">
                    <h4>
          Information
                    </h4>
                    <p>
          La largeur est schématisée sur la
                      {' '}
                      <a href="#figure-B">
          figure B
                      </a>
          .
                    </p>
                  </Alert>
                  <h3>
          Déport
                  </h3>
                  <p>
                            Le déport, plus communément appélé ET, est la distance entre le plan médian de la jante
                            et le plan de fixation de celle-ci sur le moyeu. Il est exprimé en millimètres.
                    <br />
                            Plus celui-ci sera élevé et plus votre jante sera "rentrée" dans votre aile.
                  </p>
                  <Alert color="info">
                    <h4>
          Information
                    </h4>
                    <p>
          L&#39;ET est schématisé sur la
                      {' '}
                      <a href="#figure-B">
          figure B
                      </a>
          .
                    </p>
                  </Alert>
                  <h3>
          Alésage
                  </h3>
                  <p>
                            L&#39;alésage est exprimée en millimètres est correspond au trou au centre de la jante. Il
                            permet à la jante de prendre appuie sur votre pivot et ainsi éviter le cisaillement de
                            vos vis de roues.
                    <br />
                            Si l&#39;alésage de votre jante est plus grand que celui de votre moyeu vous devrez utiliser
                            des bagues d&#39;adaptation.
                    <br />
                  </p>
                  <Alert color="info">
                    <h4>
          Information
                    </h4>
                    <p>
          Il s&#39;agit du cercle rouge sur la
                      {' '}
                      <a href="#figure-A">
          figure A
                      </a>
          .
                    </p>
                  </Alert>
                  <p>
                            Quelques alésages :
                  </p>
                  <ul>
                    <li>
          Renault (4x100) : 60.1
                    </li>
                    <li>
          Volkswagen/Audi (4x100) : 57
                    </li>
                  </ul>
                  <h3>
          Entraxe
                  </h3>
                  <p>
                            L'entraxe désigne le cercle par lequel les centres des vis d'une roue passent. Il est
                            généralement exprimé en mm et est précédé du nombre de vis pour cette jante.
                    <br />
                            Prenons le cas d'une jante pour Renault Clio, l'entraxe sera alors 4x100, nous obtenons alors :
                  </p>
                  <ul>
                    <li>
          4 : nombre de vis pour maintenir la jante en place
                    </li>
                    <li>
          100 : circonférence du cercle sur lequel sont placés les vis
                    </li>
                  </ul>
                  <p>
                            L&#39;espacement entre chaque vis est égal.
                    <br />
                  </p>
                  <Alert color="info">
                    <h4>
                Information
                    </h4>
                    <p>
                Il s&#39;agit du cercle bleu sur la
                      {' '}
                      <a href="#figure-A">
                figure A
                      </a>
                .
                    </p>
                  </Alert>
                  <h3>
          Date de fabrication
                  </h3>
                  <p>
                            La date de fabrication (DOT) est un inscrite sur votre pneu via un système de codage à 3 ou 4 chiffres.
                    <br />
                            Il est représente par 3 chiffres pour les pneus produits avant le 01/01/2000.
                  </p>
                  <h4>
          Ancienne nomenclature
                  </h4>
                  <p>
                            Définie par 3 chiffres.
                    <br />
                            Le 2 premiers représentent la semaine de fabrication, le dernier représente l&#39;année.
                    <br />
                            Exemple : 259
                    <br />
                            Ce pneu a donc été fabriqué la 25
                    <em>
          ième
                    </em>
                    {' '}
          semaine de 1999.
                  </p>
                  <h4>
          Nouvelle nomenclature
                  </h4>
                  <p>
                            Définie par 4 chiffres.
                    <br />
                            Les 2 premiers représente la semaine de fabrication, les 2 dernièrs l&#39;année.
                    <br />
                            Exemple : 0515
                    <br />
                            Ce pneu a donc été fabriqué la 5
                    <em>
          ième
                    </em>
                    {' '}
          semaine de 2015.
                  </p>
                  <h3>
          Cas concret
                  </h3>
                  <p>
                            Prenons par exemple le cas de la jante suivante :
                    {' '}
                    <em>
          7x15&quot; ET42 4x100
                    </em>
          .
                  </p>
                  <ul>
                    <li>
          La jante fait 7&quot; de large,
                    </li>
                    <li>
          pour un diamètre de 15&quot;
                    </li>
                    <li>
          avec un ET de 42
                    </li>
                    <li>
          et 4 trous sur un diamètre de 100 ( Renault Clio, Golf 1... par exemple)
                    </li>
                  </ul>
                  <p>
                            En revanche il nous manque une info... l&#39;alésage. Et oui, celui-ci est rarement détaillé
                            sur une jante, il faut le mesurer à la main.
                  </p>


                </Col>
              </Row>
            </Col>
            <Col xs="12">
              <h2>
Le pneu
              </h2>
              <Row>
                <Col>
                  <p>
                        Un pneu est décrit par 5 paramètres :
                  </p>
                  <ul>
                    <li>
  Largeur
                    </li>
                    <li>
  Hauteur
                    </li>
                    <li>
  Diamètre
                    </li>
                    <li>
  L&#39;indice de charge
                    </li>
                    <li>
  L&#39;indice de vitesse
                    </li>
                  </ul>
                  <h3>
    Largeur
                  </h3>
                  <p>
                          Contrairement à une jante la largeur est exprimée en millimètres.
                  </p>
                  <h3>
    Hauteur
                  </h3>
                  <p>
                          La hauteur d&#39;un pneu est un pourcentage de la largeur.
                  </p>
                  <h3>
    Diamètre
                  </h3>
                  <p>
                          Tout comme pour une jante celui-ci est exprimée en pouce et représente le diamètre interne
                          du pneu.
                  </p>
                  <h3>
                L&#39;indice de charge
                  </h3>
                  <p>
                          L&#39;indice de charge est un code numérique correspondant à la charge maximale en kilo qu&#39;un
                          pneu peut supporter.
                    <br />
                          La charge du pneu multipliée par le nombre de roue d&#39;un essieu doit être supérieure à la
                          charge totale de l&#39;essieu de votre véhicule.
                  </p>
                  <table className="table table-condensed table-bordered table-centered">
                    <thead>
                      <tr>
                        <th>
                Indice de charge
                        </th>
                        <th>
                Poids en kg
                        </th>

                        <th />

                        <th>
                Indice de charge
                        </th>
                        <th>
                Poids en kg
                        </th>

                        <th />

                        <th>
                Indice de charge
                        </th>
                        <th>
                Poids en kg
                        </th>

                        <th />

                        <th>
                Indice de charge
                        </th>
                        <th>
                Poids en kg
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>
                20
                        </td>
                        <td>
                80
                        </td>
                        <td />
                        <td>
                55
                        </td>
                        <td>
                218
                        </td>
                        <td />
                        <td>
                79
                        </td>
                        <td>
                437
                        </td>
                        <td />
                        <td>
                101
                        </td>
                        <td>
                825
                        </td>
                      </tr>

                      <tr>
                        <td>
                22
                        </td>
                        <td>
                85
                        </td>
                        <td />
                        <td>
                58
                        </td>
                        <td>
                236
                        </td>
                        <td />
                        <td>
                80
                        </td>
                        <td>
                450
                        </td>
                        <td />
                        <td>
                102
                        </td>
                        <td>
                850
                        </td>
                      </tr>

                      <tr>
                        <td>
                24
                        </td>
                        <td>
                85
                        </td>
                        <td />
                        <td>
                59
                        </td>
                        <td>
                243
                        </td>
                        <td />
                        <td>
                81
                        </td>
                        <td>
                462
                        </td>
                        <td />
                        <td>
                103
                        </td>
                        <td>
                875
                        </td>
                      </tr>

                      <tr>
                        <td>
                26
                        </td>
                        <td>
                90
                        </td>
                        <td />
                        <td>
                60
                        </td>
                        <td>
                250
                        </td>
                        <td />
                        <td>
                82
                        </td>
                        <td>
                475
                        </td>
                        <td />
                        <td>
                104
                        </td>
                        <td>
                900
                        </td>
                      </tr>

                      <tr>
                        <td>
                28
                        </td>
                        <td>
                100
                        </td>
                        <td />
                        <td>
                61
                        </td>
                        <td>
                257
                        </td>
                        <td />
                        <td>
                83
                        </td>
                        <td>
                487
                        </td>
                        <td />
                        <td>
                105
                        </td>
                        <td>
                925
                        </td>
                      </tr>

                      <tr>
                        <td>
                30
                        </td>
                        <td>
                106
                        </td>
                        <td />
                        <td>
                62
                        </td>
                        <td>
                265
                        </td>
                        <td />
                        <td>
                84
                        </td>
                        <td>
                500
                        </td>
                        <td />
                        <td>
                106
                        </td>
                        <td>
                950
                        </td>
                      </tr>

                      <tr>
                        <td>
                31
                        </td>
                        <td>
                109
                        </td>
                        <td />
                        <td>
                63
                        </td>
                        <td>
                272
                        </td>
                        <td />
                        <td>
                85
                        </td>
                        <td>
                515
                        </td>
                        <td />
                        <td>
                107
                        </td>
                        <td>
                975
                        </td>
                      </tr>

                      <tr>
                        <td>
                33
                        </td>
                        <td>
                115
                        </td>
                        <td />
                        <td>
                64
                        </td>
                        <td>
                280
                        </td>
                        <td />
                        <td>
                86
                        </td>
                        <td>
                530
                        </td>
                        <td />
                        <td>
                108
                        </td>
                        <td>
                1000
                        </td>
                      </tr>

                      <tr>
                        <td>
                35
                        </td>
                        <td>
                121
                        </td>
                        <td />
                        <td>
                65
                        </td>
                        <td>
                290
                        </td>
                        <td />
                        <td>
                87
                        </td>
                        <td>
                545
                        </td>
                        <td />
                        <td>
                109
                        </td>
                        <td>
                1030
                        </td>
                      </tr>

                      <tr>
                        <td>
                37
                        </td>
                        <td>
                128
                        </td>
                        <td />
                        <td>
                66
                        </td>
                        <td>
                300
                        </td>
                        <td />
                        <td>
                88
                        </td>
                        <td>
                560
                        </td>
                        <td />
                        <td>
                110
                        </td>
                        <td>
                1060
                        </td>
                      </tr>

                      <tr>
                        <td>
                40
                        </td>
                        <td>
                136
                        </td>
                        <td />
                        <td>
                67
                        </td>
                        <td>
                307
                        </td>
                        <td />
                        <td>
                89
                        </td>
                        <td>
                580
                        </td>
                        <td />
                        <td>
                111
                        </td>
                        <td>
                1090
                        </td>
                      </tr>

                      <tr>
                        <td>
                41
                        </td>
                        <td>
                145
                        </td>
                        <td />
                        <td>
                68
                        </td>
                        <td>
                315
                        </td>
                        <td />
                        <td>
                90
                        </td>
                        <td>
                600
                        </td>
                        <td />
                        <td>
                112
                        </td>
                        <td>
                1120
                        </td>
                      </tr>

                      <tr>
                        <td>
                42
                        </td>
                        <td>
                150
                        </td>
                        <td />
                        <td>
                69
                        </td>
                        <td>
                325
                        </td>
                        <td />
                        <td>
                91
                        </td>
                        <td>
                615
                        </td>
                        <td />
                        <td>
                113
                        </td>
                        <td>
                1150
                        </td>
                      </tr>

                      <tr>
                        <td>
                44
                        </td>
                        <td>
                160
                        </td>
                        <td />
                        <td>
                70
                        </td>
                        <td>
                335
                        </td>
                        <td />
                        <td>
                92
                        </td>
                        <td>
                630
                        </td>
                        <td />
                        <td>
                114
                        </td>
                        <td>
                1180
                        </td>
                      </tr>

                      <tr>
                        <td>
                46
                        </td>
                        <td>
                170
                        </td>
                        <td />
                        <td>
                71
                        </td>
                        <td>
                345
                        </td>
                        <td />
                        <td>
                93
                        </td>
                        <td>
                650
                        </td>
                        <td />
                        <td>
                115
                        </td>
                        <td>
                1215
                        </td>
                      </tr>

                      <tr>
                        <td>
                47
                        </td>
                        <td>
                175
                        </td>
                        <td />
                        <td>
                72
                        </td>
                        <td>
                355
                        </td>
                        <td />
                        <td>
                94
                        </td>
                        <td>
                670
                        </td>
                        <td />
                        <td>
                116
                        </td>
                        <td>
                1250
                        </td>
                      </tr>

                      <tr>
                        <td>
                48
                        </td>
                        <td>
                180
                        </td>
                        <td />
                        <td>
                73
                        </td>
                        <td>
                365
                        </td>
                        <td />
                        <td>
                95
                        </td>
                        <td>
                690
                        </td>
                        <td />
                        <td>
                117
                        </td>
                        <td>
                1285
                        </td>
                      </tr>

                      <tr>
                        <td>
                50
                        </td>
                        <td>
                190
                        </td>
                        <td />
                        <td>
                74
                        </td>
                        <td>
                375
                        </td>
                        <td />
                        <td>
                96
                        </td>
                        <td>
                710
                        </td>
                        <td />
                        <td>
                118
                        </td>
                        <td>
                1320
                        </td>
                      </tr>

                      <tr>
                        <td>
                51
                        </td>
                        <td>
                195
                        </td>
                        <td />
                        <td>
                75
                        </td>
                        <td>
                387
                        </td>
                        <td />
                        <td>
                97
                        </td>
                        <td>
                730
                        </td>
                        <td />
                        <td>
                119
                        </td>
                        <td>
                1360
                        </td>
                      </tr>

                      <tr>
                        <td>
                52
                        </td>
                        <td>
                200
                        </td>
                        <td />
                        <td>
                76
                        </td>
                        <td>
                400
                        </td>
                        <td />
                        <td>
                98
                        </td>
                        <td>
                750
                        </td>
                        <td />
                        <td>
                120
                        </td>
                        <td>
                1400
                        </td>
                      </tr>

                      <tr>
                        <td>
                53
                        </td>
                        <td>
                206
                        </td>
                        <td />
                        <td>
                77
                        </td>
                        <td>
                412
                        </td>
                        <td />
                        <td>
                99
                        </td>
                        <td>
                775
                        </td>
                        <td />
                        <td />
                        <td />
                      </tr>

                      <tr>
                        <td>
                54
                        </td>
                        <td>
                212
                        </td>
                        <td />
                        <td>
                78
                        </td>
                        <td>
                425
                        </td>
                        <td />
                        <td>
                100
                        </td>
                        <td>
                800
                        </td>
                        <td />
                        <td />
                        <td />
                      </tr>
                    </tbody>
                  </table>
                  <h3>
              L&#39;indice de vitesse
                  </h3>
                  <p>
                          Tout comme l&#39;indice de charge, l&#39;indice de charge est un code alphanumérique cette fois-ci
                          correspondant à la vitesse maximale à laquelle le pneu pour rouler.
                  </p>
                  <table className="table table-condensed table-bordered table-centered">
                    <thead>
                      <tr>
                        <th>
    Indice de vitesse
                        </th>
                        <th>
    Vitesse en km/h
                        </th>

                        <th />

                        <th>
    Indice de vitesse
                        </th>
                        <th>
    Vitesse en km/h
                        </th>

                        <th />

                        <th>
    Indice de vitesse
                        </th>
                        <th>
    Vitesse en km/h
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>
      A1
                        </td>
                        <td>
      5
                        </td>
                        <td />
                        <td>
      D
                        </td>
                        <td>
      65
                        </td>
                        <td />
                        <td>
      Q
                        </td>
                        <td>
      160
                        </td>
                      </tr>
                      <tr>
                        <td>
      A2
                        </td>
                        <td>
      10
                        </td>
                        <td />
                        <td>
      E
                        </td>
                        <td>
      70
                        </td>
                        <td />
                        <td>
      R
                        </td>
                        <td>
      170
                        </td>
                      </tr>
                      <tr>
                        <td>
      A3
                        </td>
                        <td>
      15
                        </td>
                        <td />
                        <td>
      F
                        </td>
                        <td>
      80
                        </td>
                        <td />
                        <td>
      S
                        </td>
                        <td>
      180
                        </td>
                      </tr>
                      <tr>
                        <td>
      A4
                        </td>
                        <td>
      20
                        </td>
                        <td />
                        <td>
      G
                        </td>
                        <td>
      90
                        </td>
                        <td />
                        <td>
      T
                        </td>
                        <td>
      190
                        </td>
                      </tr>
                      <tr>
                        <td>
      A5
                        </td>
                        <td>
      25
                        </td>
                        <td />
                        <td>
      J
                        </td>
                        <td>
      100
                        </td>
                        <td />
                        <td>
      U
                        </td>
                        <td>
      200
                        </td>
                      </tr>
                      <tr>
                        <td>
      A6
                        </td>
                        <td>
      30
                        </td>
                        <td />
                        <td>
      K
                        </td>
                        <td>
      110
                        </td>
                        <td />
                        <td>
      H
                        </td>
                        <td>
      210
                        </td>
                      </tr>
                      <tr>
                        <td>
      A7
                        </td>
                        <td>
      35
                        </td>
                        <td />
                        <td>
      L
                        </td>
                        <td>
      120
                        </td>
                        <td />
                        <td>
      V
                        </td>
                        <td>
      240
                        </td>
                      </tr>
                      <tr>
                        <td>
      A8
                        </td>
                        <td>
      40
                        </td>
                        <td />
                        <td>
      M
                        </td>
                        <td>
      130
                        </td>
                        <td />
                        <td>
      ZR
                        </td>
                        <td>
      &gt;240
                        </td>
                      </tr>
                      <tr>
                        <td>
      B
                        </td>
                        <td>
      50
                        </td>
                        <td />
                        <td>
      N
                        </td>
                        <td>
      140
                        </td>
                        <td />
                        <td>
      W
                        </td>
                        <td>
      270
                        </td>
                      </tr>
                      <tr>
                        <td>
      C
                        </td>
                        <td>
      60
                        </td>
                        <td />
                        <td>
      P
                        </td>
                        <td>
      150
                        </td>
                        <td />
                        <td>
      Y
                        </td>
                        <td>
      300
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <h3>
              Cas concret
                  </h3>
                  <p>
                          Comme pour le cas de la jante prenons un cas concrèt avec un pneu. En l&#39;occurence ceux de ma
                          Clio : 195/45/R15 78V.
                  </p>
                  <ul>
                    <li>
              Le pneu fait 195mm de large,
                    </li>
                    <li>
              pour une hauteur de flanc de 45% de 195 soit 87,75mm,
                    </li>
                    <li>
              il sera monté sur une jante de 15&quot;,
                    </li>
                    <li>
              la charge max sur le pneu sera 425kg,
                    </li>
                    <li>
              et enfin le véhicule ne pourra pas rouler à plus de 240km/h.
                    </li>
                  </ul>
                </Col>
              </Row>
            </Col>
            <Col xs="12">
              <h2>
          Annexes
              </h2>
              <ul>
                <li>
                  <span className="glyphicon glyphicon-link" aria-hidden="true" />
                  {' '}
                  <a href="http://www.tnpf.fr/dimensions/dimensions.php" rel="noopener noreferrer" target="_blank">
tables d’équivalence dimensionnelle théorique
                  </a>
                  {' '}
- tnpf.fr
                </li>
                <li>
                  <span className="glyphicon glyphicon-link" aria-hidden="true" />
                  {' '}
                  <a href="http://www.allopneus.com/conseils-pneus/auto/choix-produit/lire-un-pneumatique.php" rel="noopener noreferrer" target="_blank">
Comment lire un pneumatique ?
                  </a>
                  {' '}
- allopneus.com
                </li>
                <li>
                  <span className="glyphicon glyphicon-link" aria-hidden="true" />
                  {' '}
                  <a href="http://www.centralepneus.fr/conseils-pneus/deport-jante" rel="noopener noreferrer" target="_blank">
Qu'est-ce que le déport d'une jante ?
                  </a>
                  {' '}
- centralepneus.fr
                </li>
                <li>
                  <span className="glyphicon glyphicon-link" aria-hidden="true" />
                  {' '}
                  <a href="http://tyrestretch.com/" rel="noopener noreferrer" target="_blank">
Base de données sur les pneus
                  </a>
                  {' '}
- tyrestretch.com
                </li>
                <li>
                  <span className="glyphicon glyphicon-link" aria-hidden="true" />
                  {' '}
                  <a href="http://www.entraxes.fr" rel="noopener noreferrer" target="_blank">
Base de données sur les entraxes
                  </a>
                  {' '}
- entraxes.fr
                </li>
              </ul>
            </Col>
          </Row>
        </Col>
      </Row>
    );
  }
}

export default Explain;