From 9bb74df73496711f0fa253b5c120ae9f88a9e070 Mon Sep 17 00:00:00 2001
From: Nilstrieb <niltrieb@gmail.com>
Date: Sat, 13 Feb 2021 18:43:35 +0100
Subject: [PATCH] hugo

---
 {src => public}/img/f22.png     | Bin
 {src => public}/img/harrier.jpg | Bin
 src/Home.js                     |   5 ++---
 src/Militaer.js                 |   7 +++----
 src/Plane.css                   |   8 ++++++--
 src/Plane.js                    |   7 +++----
 6 files changed, 14 insertions(+), 13 deletions(-)
 rename {src => public}/img/f22.png (100%)
 rename {src => public}/img/harrier.jpg (100%)

diff --git a/src/img/f22.png b/public/img/f22.png
similarity index 100%
rename from src/img/f22.png
rename to public/img/f22.png
diff --git a/src/img/harrier.jpg b/public/img/harrier.jpg
similarity index 100%
rename from src/img/harrier.jpg
rename to public/img/harrier.jpg
diff --git a/src/Home.js b/src/Home.js
index 275fe2a..75b25ad 100644
--- a/src/Home.js
+++ b/src/Home.js
@@ -1,15 +1,14 @@
 import React, {Component} from "react";
 import ModelImage from "./Plane";
-import f22 from './img/f22.png'
 
 class Home extends Component {
     render() {
         return (
             <div>
                 <h1>Hugos Favoriten</h1>
-                <ModelImage img={f22} name="F-22 Raptor"/>
+                <ModelImage src="f22.png" name="F-22 Raptor"/>
             </div>
-        )
+        );
     }
 }
 
diff --git a/src/Militaer.js b/src/Militaer.js
index 3148ca4..c39fdb5 100644
--- a/src/Militaer.js
+++ b/src/Militaer.js
@@ -1,17 +1,16 @@
 import React from 'react';
 import ModelImage from './Plane'
-import f22 from './img/f22.png'
-import harrier from './img/harrier.jpg'
+
 
 class Modern extends React.Component {
     render() {
         const items = Array(100).fill(1).map((x, y) => x + y)
-            .map(x => <ModelImage img={f22} name={'F' + (20 + x) + ' Raptor'}/>);
+            .map(x => <ModelImage src="f22.png" name={'F' + (20 + x) + ' Raptor'}/>);
 
         return (
             <div>
                 {items}
-                <ModelImage img={harrier} name="AV-8B Harrier"/>
+                <ModelImage src="harrier.jpg" name="AV-8B Harrier"/>
             </div>
         )
     }
diff --git a/src/Plane.css b/src/Plane.css
index 631e4c2..d9bb85e 100644
--- a/src/Plane.css
+++ b/src/Plane.css
@@ -1,3 +1,7 @@
+:root {
+    --model-image-height: 200px;
+}
+
 .model {
     position: relative;
     text-align: center;
@@ -26,7 +30,7 @@
     left: 50%;
     transform: translate(-50%, -50%);
 
-    line-height: 200px;
+    line-height: var(--model-image-height);
 }
 
 .model:hover .model-info {
@@ -35,7 +39,7 @@
 }
 
 .model img {
-    height: 200px;
+    height: var(--model-image-height);
 }
 
 
diff --git a/src/Plane.js b/src/Plane.js
index 0be2ab1..db65076 100644
--- a/src/Plane.js
+++ b/src/Plane.js
@@ -6,20 +6,19 @@ class ModelImage extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            img: '',
             name: '',
+            src: '',
         }
     }
 
     static getDerivedStateFromProps(props) {
-        return {img: props.img, name: props.name};
+        return {name: props.name, src: props.src};
     }
 
     render() {
-        //const style = {backgroundImage: `url('/img/${this.state.img}')`};
         return (
             <a href="" className="model">
-                <img src={this.state.img} alt={this.state.name}/>
+                <img src={process.env.PUBLIC_URL + '/img/' + this.state.src} alt={this.state.name}/>
                 <div className="model-info">
                     <span className="model-info-text">{this.state.name}</span>
                 </div>