From 2235aab1cc1a47ad188a980fa5a3c040ab36ad03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CJim=E2=80=9D?= <“jimkernicky@gmail.com”>
Date: Tue, 9 Aug 2022 16:10:05 -0400
Subject: [PATCH] Some image fixes

---
 src/data/AllConfigs.js | 90 ++++++++++++++++++++++++++----------------
 src/pages/Configs.js   | 35 +++-------------
 2 files changed, 60 insertions(+), 65 deletions(-)

diff --git a/src/data/AllConfigs.js b/src/data/AllConfigs.js
index e100bad..45fc004 100644
--- a/src/data/AllConfigs.js
+++ b/src/data/AllConfigs.js
@@ -1,10 +1,30 @@
-const configObjects = [
+import ltfold0 from "../assets/images/FoldLT.png";
+import ltfold1 from "../assets/images/FoldFRLT50.png";
+import ltfold2 from "../assets/images/FoldFRLT33.png";
+import ltfold3 from "../assets/images/FoldFRLT25.png";
+import ltfold4 from "../assets/images/FoldFRCFly.png";
+import ltfold5 from "../assets/images/FoldBWLT25.png";
+import ltfold6 from "../assets/images/FoldBWLT33.png";
+import ltfold7 from "../assets/images/FoldBWFRLT25.png";
+import ltfold8 from "../assets/images/FoldBWFRLT33.png";
+import swaf25 from "../assets/images/FoldSWAF25.png";
+import swaf33 from "../assets/images/FoldSWAF33.png";
+import diamond from "../assets/images/FoldDiaPP.png";
+import adirondack from "../assets/images/FoldAdir.png";
+import hexd from "../assets/images/FoldHexD.png";
+import arrowhead from "../assets/images/FoldArrow.png";
+import swlt from "../assets/images/FoldSWLT.png";
+import holden from "../assets/images/FoldHolden.png";
+import miners from "../assets/images/FoldMiners.png";
+import bakers from "../assets/images/FoldBakers.png";
+
+const AllConfigs = [
   [
     {
       id: 1,
       name: "Lean-To",
       notes: "Stake C & D to the ground, tie A & B on the ridgeline.",
-      imgUrl: "../assets/images/Fold_LT.png",
+      imgUrl: ltfold0,
       tarps: "All",
       angles: [30, 50],
       ridgelines: 1,
@@ -21,7 +41,7 @@ const configObjects = [
       id: 2,
       name: "Flat Roof LT 50",
       notes: "Stake C & D, tie poles to E & F, tie A & B to the ridgeline.",
-      imgUrl: "abc",
+      imgUrl: ltfold1,
       tarps: "All",
       angles: [30, 50],
       ridgelines: 1,
@@ -38,7 +58,7 @@ const configObjects = [
       id: 3,
       name: "Flat Roof LT 33",
       notes: "Stake C & D, tie poles to E & F, tie A & B to the ridgeline.",
-      imgUrl: "../assets/images/Fold_LT.png",
+      imgUrl: ltfold2,
       tarps: "All",
       angles: [30, 50],
       ridgelines: 1,
@@ -55,7 +75,7 @@ const configObjects = [
       id: 4,
       name: "Flat Roof LT 25",
       notes: "Stake C & D, tie poles to E & F, tie A & B to the ridgeline.",
-      imgUrl: "../assets/images/Fold_LT.png",
+      imgUrl: ltfold3,
       tarps: "All",
       angles: [30, 50],
       ridgelines: 1,
@@ -72,7 +92,7 @@ const configObjects = [
       id: 5,
       name: "Flat-Roof C-Fly",
       notes: "Stake C, D, G & H, tie poles to A & B, tie E & F to the ridgeline.",
-      imgUrl: "../assets/images/Fold_LT.png",
+      imgUrl: ltfold4,
       tarps: "Rectangle",
       angles: 60,
       ridgelines: 1,
@@ -89,7 +109,7 @@ const configObjects = [
       id: 6,
       name: "Back-Wall LT 25",
       notes: "Stake C & D, tie poles to E & F, tie A & B to the ridgeline.",
-      imgUrl: "../assets/images/Fold_LT.png",
+      imgUrl: ltfold5,
       tarps: "All",
       angles: [30, 50],
       ridgelines: 1,
@@ -106,7 +126,7 @@ const configObjects = [
       id: 7,
       name: "Back-Wall LT 33",
       notes: "Stake C & D, tie poles to E & F, tie A & B to the ridgeline.",
-      imgUrl: "../assets/images/Fold_LT.png",
+      imgUrl: ltfold6,
       tarps: "All",
       angles: [30, 50],
       ridgelines: 1,
@@ -123,7 +143,7 @@ const configObjects = [
       id: 8,
       name: "Back Wall Flat Roof LT 25",
       notes: "Stake C & D, tie poles to G & H for back wall and E & F for flat roof, tie A & B to the ridgeline.",
-      imgUrl: "../assets/images/Fold_LT.png",
+      imgUrl: ltfold7,
       tarps: "All",
       angles: [30, 50],
       ridgelines: 1,
@@ -140,7 +160,7 @@ const configObjects = [
       id: 9,
       name: "Back Wall Flat Roof LT 33",
       notes: "Stake C & D, tie poles to G & H for back wall and E & F for flat roof, tie A & B to the ridgeline.",
-      imgUrl: "../assets/images/Fold_LT.png",
+      imgUrl: ltfold8,
       tarps: "All",
       angles: [30, 50],
       ridgelines: 1,
@@ -159,7 +179,7 @@ const configObjects = [
       id: 10,
       name: "A-Frame",
       notes: "Stake A, B, C & D to the ground, tie E & F on the ridgeline.",
-      imgUrl: "",
+      imgUrl: ltfold1,
       tarps: "All",
       angles: [37, 75],
       ridgelines: 1,
@@ -176,7 +196,7 @@ const configObjects = [
       id: 11,
       name: "A-Frame LT 33",
       notes: "Stake C & D to the ground, tie E & F on the ridgeline, tie guylines at A & B.",
-      imgUrl: "",
+      imgUrl: ltfold2,
       tarps: "All",
       angles: [30, 50],
       ridgelines: 1,
@@ -193,7 +213,7 @@ const configObjects = [
       id: 12,
       name: "A-Frame LT 25",
       notes: "Stake C & D to the ground, tie E & F on the ridgeline, tie guylines at A & B.",
-      imgUrl: "",
+      imgUrl: ltfold3,
       tarps: "All",
       angles: [30, 50],
       ridgelines: 1,
@@ -210,7 +230,7 @@ const configObjects = [
       id: 13,
       name: "Side-Wall AF 25",
       notes: "Stake A, B, C & D, tie G & H to center ridgeline, use poles and guylines for E, F, I & J.",
-      imgUrl: "",
+      imgUrl: swaf25,
       tarps: "All",
       angles: [37, 75],
       ridgelines: 1,
@@ -227,7 +247,7 @@ const configObjects = [
       id: 14,
       name: "Side-Wall AF 33",
       notes: "Stake A, B, C & D, tie G & H to center ridgeline, use poles and guylines for E, F, I & J.",
-      imgUrl: "",
+      imgUrl: swaf33,
       tarps: "Rectangle",
       angles: [37, 75],
       ridgelines: 1,
@@ -244,7 +264,7 @@ const configObjects = [
       id: 15,
       name: "Tube tent",
       notes: "Stake G & H, tie E & F to the ridgeline, stake A & C together as well as and B & D to the ground.",
-      imgUrl: "",
+      imgUrl: ltfold4,
       tarps: "Rectangle 1:2",
       angles: 60,
       ridgelines: 1,
@@ -261,7 +281,7 @@ const configObjects = [
       id: 16,
       name: "AF C-Fly",
       notes: "Stake C, D, G & H, tie E & F to ridgeline, use guylines at A & B. ",
-      imgUrl: "",
+      imgUrl: ltfold4,
       tarps: "Rectangle",
       angles: [75, 30],
       ridgelines: 1,
@@ -278,7 +298,7 @@ const configObjects = [
       id: 17,
       name: "Open Stall",
       notes: "Stake C & D, use poles and guylines for G, H, A & B, tie E & F to ridgeline.",
-      imgUrl: "",
+      imgUrl: ltfold4,
       tarps: "All",
       angles: [30, 50],
       ridgelines: 1,
@@ -297,7 +317,7 @@ const configObjects = [
       id: 18,
       name: "Diamond",
       notes: "Stake B & C to the ground, tie A & D to the ridgeline.",
-      imgUrl: "",
+      imgUrl: diamond,
       tarps: "Square",
       angles: [45, 75],
       ridgelines: 1,
@@ -314,7 +334,7 @@ const configObjects = [
       id: 19,
       name: "Plow Point",
       notes: "Stake A, B and C, tie D to a pole guyline or along A-D ridgeline.",
-      imgUrl: "",
+      imgUrl: diamond,
       tarps: "Square",
       angles: 33,
       ridgelines: 1,
@@ -331,7 +351,7 @@ const configObjects = [
       id: 20,
       name: "Adirondack",
       notes: "Stake G & F then side wall points B & C, tie E & H to ridgeline, attach A to guyline or pole.",
-      imgUrl: "",
+      imgUrl: adirondack,
       tarps: "Square",
       angles: 45,
       ridgelines: 1,
@@ -348,7 +368,7 @@ const configObjects = [
       id: 21,
       name: "Hex Diamond",
       notes: "Stake G & H and E & F, tie A & D to the ridgeline.",
-      imgUrl: "",
+      imgUrl: hexd,
       tarps: "Square",
       angles: [45, 60],
       ridgelines: 1,
@@ -365,7 +385,7 @@ const configObjects = [
       id: 22,
       name: "Arrowhead Wedge",
       notes: "Stake B, D & C, tie E & F to ridgeline, tie A to guyline or pole.",
-      imgUrl: "",
+      imgUrl: arrowhead,
       tarps: "Square",
       angles: 30,
       ridgelines: 1,
@@ -384,7 +404,7 @@ const configObjects = [
       id: 23,
       name: "Side Wall LT 1:2",
       notes: "Stake A & B and C & D on each side, tie E & F to ridgeline.",
-      imgUrl: "",
+      imgUrl: swlt,
       tarps: "Rectangle 1:2",
       angles: [60, 33.3],
       ridgelines: 1,
@@ -401,7 +421,7 @@ const configObjects = [
       id: 24,
       name: "Side Wall LT 3:5",
       notes: "Stake A & B and C & D on each side, tie E & F to ridgeline.",
-      imgUrl: "",
+      imgUrl: swlt,
       tarps: "Rectangle 3:5",
       angles: [55, 29],
       ridgelines: 1,
@@ -418,7 +438,7 @@ const configObjects = [
       id: 25,
       name: "Side Wall LT 2:3",
       notes: "Stake A & B and C & D on each side, tie E & F to ridgeline.",
-      imgUrl: "",
+      imgUrl: swlt,
       tarps: "Rectangle 2:3",
       angles: [58, 27],
       ridgelines: 1,
@@ -435,7 +455,7 @@ const configObjects = [
       id: 26,
       name: "Holden Tent 1:2",
       notes: "Stake A & B and C & D on each side, tie E to pole.",
-      imgUrl: "",
+      imgUrl: holden,
       tarps: "Rectangle 1:2",
       angles: [50, 45],
       ridgelines: 0,
@@ -452,7 +472,7 @@ const configObjects = [
       id: 27,
       name: "Holden Tent 3:5",
       notes: "Stake A & B and C & D on each side, tie E & F to ridgeline.",
-      imgUrl: "",
+      imgUrl: holden,
       tarps: "Rectangle 3:5",
       angles: [45, 40],
       ridgelines: 0,
@@ -469,7 +489,7 @@ const configObjects = [
       id: 28,
       name: "Holden Tent 2:3",
       notes: "Stake A & B and C & D on each side, tie E & F to ridgeline.",
-      imgUrl: "",
+      imgUrl: holden,
       tarps: "Rectangle 2:3",
       angles: [56, 38],
       ridgelines: 0,
@@ -486,7 +506,7 @@ const configObjects = [
       id: 29,
       name: "Holden Tent 3:4",
       notes: "Stake A & B and C & D on each side, tie E & F to ridgeline.",
-      imgUrl: "",
+      imgUrl: holden,
       tarps: "Rectangle 3:4",
       angles: [55, 33],
       ridgelines: 0,
@@ -503,7 +523,7 @@ const configObjects = [
       id: 30,
       name: "Holden Tent 4:5",
       notes: "Stake A & B and C & D on each side, tie E & F to ridgeline.",
-      imgUrl: "",
+      imgUrl: holden,
       tarps: "Rectangle 4:5",
       angles: [58, 30],
       ridgelines: 0,
@@ -520,7 +540,7 @@ const configObjects = [
       id: 31,
       name: "Miners Tent",
       notes: "Stake B, C, E, I, H and G, attach E to pole.",
-      imgUrl: "",
+      imgUrl: miners,
       tarps: "Rectangle 1:2",
       angles: 67.5,
       ridgelines: 0,
@@ -537,7 +557,7 @@ const configObjects = [
       id: 32,
       name: "Bakers Wind Shed",
       notes: "Stake B, D, G & H, tie E and F to ridgeline.",
-      imgUrl: "",
+      imgUrl: bakers,
       tarps: "Rectangle 1:2",
       angles: 27.5,
       ridgelines: 1,
@@ -554,7 +574,7 @@ const configObjects = [
       id: 33,
       name: "Lavvu",
       notes: "Stake A, E, G and C, tie D to ridgepole, alow B, F & H to hang.",
-      imgUrl: "",
+      imgUrl: ltfold4,
       tarps: "Rectangle 1:2",
       angles: 60,
       ridgelines: 0,
@@ -570,4 +590,4 @@ const configObjects = [
   ]
 ];
 
-export default configObjects;
+export default AllConfigs;
diff --git a/src/pages/Configs.js b/src/pages/Configs.js
index aa31a2d..9466b03 100644
--- a/src/pages/Configs.js
+++ b/src/pages/Configs.js
@@ -2,31 +2,6 @@ import AllConfigs from "../data/AllConfigs";
 import ConfigTypes from "../data/ConfigTypes";
 import ScrollToTop from "../components/ScrollToTop";
 
-import ltfold0 from "../assets/images/FoldLT.png";
-import ltfold1 from "../assets/images/FoldFRLT50.png";
-import ltfold2 from "../assets/images/FoldFRLT33.png";
-import ltfold3 from "../assets/images/FoldFRLT25.png";
-import ltfold4 from "../assets/images/FoldFRCFly.png";
-import ltfold5 from "../assets/images/FoldBWLT25.png";
-import ltfold6 from "../assets/images/FoldBWLT33.png";
-import ltfold7 from "../assets/images/FoldBWFRLT25.png";
-import ltfold8 from "../assets/images/FoldBWFRLT33.png";
-import swaf25 from "../assets/images/FoldSWAF25.png";
-import swaf33 from "../assets/images/FoldSWAF33.png";
-import diamond from "../assets/images/FoldDiaPP.png";
-import adirondack from "../assets/images/FoldAdir.png";
-import hexd from "../assets/images/FoldHexD.png";
-import arrowhead from "../assets/images/FoldArrow.png";
-import swlt from "../assets/images/FoldSWLT.png";
-import holden from "../assets/images/FoldHolden.png";
-import miners from "../assets/images/FoldMiners.png";
-import bakers from "../assets/images/FoldBakers.png";
-
-const leantoimages = [ltfold0, ltfold1, ltfold2, ltfold3, ltfold4, ltfold5, ltfold6, ltfold7, ltfold8];
-const aframeimages = [ltfold1, ltfold2, ltfold3, swaf25, swaf33, ltfold4, ltfold4, ltfold4];
-const diagonalimages = [diamond, diamond, adirondack, hexd, arrowhead];
-const tentimages = [swlt, swlt, swlt, holden, holden, holden, holden, holden, miners, bakers, ltfold4];
-
 function Configs() {
   const categories = ["Lean-To", " A-Frame", " Diagonal", " Tent"];
 
@@ -151,8 +126,8 @@ function Configs() {
         {AllConfigs[0].map((config, i) => (
           <div key={i} className="flex flex-col justify-center items-center border border-solid border-slate-400 bg-slate-100 p-4 shadow-md shadow-slate-500 md:flex-row xl:items-start">
             <div className="w-3/4 sm:w-5/8 xl:w-1/2 self-center mb-8 xl:mb-0 xl:self-start">
-              {/* <img src={config.imgUrl} alt={config.name} /> */}
-              <img src={leantoimages[i]} alt={config.name} className="w-full m-0 p-0" />
+              <img src={config.imgUrl} alt={config.name} className="w-full m-0 p-0" />
+              {/* <img src={leantoimages[i]} alt={config.name} className="w-full m-0 p-0" /> */}
             </div>
             <div className="w-full px-4 ml-4 xl:w-1/2 border-l border-gray-400">
               <h4 id="lean-to" className="text-2xl font-semibold mt-0 mb-2 text-teal-600">
@@ -210,7 +185,7 @@ function Configs() {
         {AllConfigs[1].map((config, i) => (
           <div key={i} className="flex flex-col justify-center items-center border border-solid border-slate-400 bg-slate-100 p-4 shadow-md shadow-slate-500 md:flex-row xl:items-start">
             <div className="w-3/4 sm:w-5/8 xl:w-1/2 mb-8 xl:mb-0 xl:self-start">
-              <img src={aframeimages[i]} alt={config.name} className="w-full m-0 p-0" />
+              <img src={config.imgUrl} alt={config.name} className="w-full m-0 p-0" />
             </div>
             <div className="w-full px-4 ml-4 xl:w-1/2 border-l border-gray-400">
               <h4 id="a-frame" className="text-2xl font-semibold mt-0 mb-2 text-teal-600">
@@ -261,7 +236,7 @@ function Configs() {
         {AllConfigs[2].map((config, i) => (
           <div key={i} className="flex flex-col justify-center items-center border border-solid border-slate-400 bg-slate-100 p-4 shadow-md shadow-slate-500 md:flex-row xl:items-start">
             <div className="w-3/4 sm:w-5/8 xl:w-1/2 self-center mb-8 xl:mb-0 xl:self-start">
-              <img src={diagonalimages[i]} alt={config.name} className="w-full m-0 p-0 " />
+              <img src={config.imgUrl} alt={config.name} className="w-full m-0 p-0" />
             </div>
             <div className="w-full px-4 ml-4 xl:w-1/2 border-l border-gray-400">
               <h4 id="lean-to" className="text-2xl font-semibold mt-0 mb-2 text-teal-600">
@@ -309,7 +284,7 @@ function Configs() {
         {AllConfigs[3].map((config, i) => (
           <div key={i} className="flex flex-col justify-center items-center border border-solid border-slate-400 bg-slate-100 p-4 shadow-md shadow-slate-500 md:flex-row xl:items-start">
             <div className="w-3/4 sm:w-5/8 xl:w-1/2 self-center mb-8 xl:mb-0 xl:self-start">
-              <img src={tentimages[i]} alt={config.name} className="w-full m-0 p-0 " />
+              <img src={config.imgUrl} alt={config.name} className="w-full m-0 p-0" />
             </div>
             <div className="w-full px-4 ml-4 xl:w-1/2 border-l border-gray-400">
               <h4 id="lean-to" className="text-2xl font-semibold mt-0 mb-2 text-teal-600">