From d5d052455d58d7458b8730d843396b5907cd247d Mon Sep 17 00:00:00 2001
From: Yuriy Ivanenko <yuriy.ivanenko@powerhrg.com>
Date: Wed, 12 Jun 2024 10:45:29 -0400
Subject: [PATCH 1/9] Render pigs to the screen in tiles

---
 src/components/App.js     |  2 ++
 src/components/HogTile.js | 20 ++++++++++++++++++++
 src/index.css             |  7 +++----
 3 files changed, 25 insertions(+), 4 deletions(-)
 create mode 100644 src/components/HogTile.js

diff --git a/src/components/App.js b/src/components/App.js
index 344d48d4..719e292e 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,5 +1,6 @@
 import React from "react";
 import Nav from "./Nav";
+import HogTile from "./HogTile";
 
 import hogs from "../porkers_data";
 
@@ -7,6 +8,7 @@ function App() {
 	return (
 		<div className="App">
 			<Nav />
+			<HogTile hogs={hogs} />
 		</div>
 	);
 }
diff --git a/src/components/HogTile.js b/src/components/HogTile.js
new file mode 100644
index 00000000..cfcb2580
--- /dev/null
+++ b/src/components/HogTile.js
@@ -0,0 +1,20 @@
+import React from "react";
+
+const HogTile = ({ hogs }) => {
+	return (
+		<div className="ui grid container">
+				<div className="ui eight wide column">
+					{hogs.map(hog => {
+						return (
+							<div key={hog.name} className="pigTile">
+								<p className="hoggyText">{hog.name}</p>
+								<img style={{width: '500px'}} src={hog.image}/>
+							</div>
+						)
+					})}
+				</div>
+			</div>
+	)
+}
+
+export default HogTile;
diff --git a/src/index.css b/src/index.css
index a89ad3a1..53b896db 100644
--- a/src/index.css
+++ b/src/index.css
@@ -114,14 +114,13 @@ ul {
 
 .minPigTile {
   width: 250px;
-  height: 250px;
   background-size: cover;
 }
 
 .maxPigTile {
   background-size: cover;
-  width: 500px;
-  height: 500px;
+  width: 100px;
+  height: 100px;
 }
 
 .pigTile:hover {
@@ -149,4 +148,4 @@ ul {
   to {
     transform: rotate(360deg);
   }
-}
\ No newline at end of file
+}

From 51ea6ac48f45b50e0b854c3c9dcd3739c28be65f Mon Sep 17 00:00:00 2001
From: Yuriy Ivanenko <yuriy.ivanenko@powerhrg.com>
Date: Wed, 12 Jun 2024 10:59:44 -0400
Subject: [PATCH 2/9] Show hog details when tile is clicked

---
 src/components/App.js     |  4 ++--
 src/components/HogList.js | 16 ++++++++++++++++
 src/components/HogTile.js | 31 +++++++++++++++++--------------
 3 files changed, 35 insertions(+), 16 deletions(-)
 create mode 100644 src/components/HogList.js

diff --git a/src/components/App.js b/src/components/App.js
index 719e292e..ec313d69 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,6 +1,6 @@
 import React from "react";
 import Nav from "./Nav";
-import HogTile from "./HogTile";
+import HogList from "./HogList";
 
 import hogs from "../porkers_data";
 
@@ -8,7 +8,7 @@ function App() {
 	return (
 		<div className="App">
 			<Nav />
-			<HogTile hogs={hogs} />
+			<HogList hogs={hogs} />
 		</div>
 	);
 }
diff --git a/src/components/HogList.js b/src/components/HogList.js
new file mode 100644
index 00000000..9d343602
--- /dev/null
+++ b/src/components/HogList.js
@@ -0,0 +1,16 @@
+import React from "react";
+import HogTile from "./HogTile";
+
+const HogList = ({ hogs }) => {
+	return (
+		<div className="ui grid container">
+			<div className="ui eight wide column">
+				{hogs.map(hog => {
+					return <HogTile key={hog.name} hog={hog} />
+				})}
+			</div>
+		</div>
+	)
+}
+
+export default HogList;
diff --git a/src/components/HogTile.js b/src/components/HogTile.js
index cfcb2580..8e3457af 100644
--- a/src/components/HogTile.js
+++ b/src/components/HogTile.js
@@ -1,19 +1,22 @@
-import React from "react";
+import React, { useState } from "react";
 
-const HogTile = ({ hogs }) => {
+const HogTile = ({ hog }) => {
+	const [showDetails, setShowDetails] = useState(false)
+	const handleShowDetails = () => setShowDetails(!showDetails)	
+	
 	return (
-		<div className="ui grid container">
-				<div className="ui eight wide column">
-					{hogs.map(hog => {
-						return (
-							<div key={hog.name} className="pigTile">
-								<p className="hoggyText">{hog.name}</p>
-								<img style={{width: '500px'}} src={hog.image}/>
-							</div>
-						)
-					})}
-				</div>
-			</div>
+		<div key={hog.name} className="pigTile" onClick={handleShowDetails}>
+			<p className="hoggyText">{hog.name}</p>
+			{showDetails ? 
+				<>
+					<p>{hog.specialty}</p>
+					<p>{hog.weight}</p> 
+					<p>{hog.greased}</p> 
+					<p>{hog["highest medal achieved"]}</p>
+				</>  
+			: null}
+			<img style={{width: '500px'}} src={hog.image}/>
+		</div>
 	)
 }
 

From 069c5aaf9434caf1554eed3ae2416b8fbf78b54d Mon Sep 17 00:00:00 2001
From: Yuriy Ivanenko <yuriy.ivanenko@powerhrg.com>
Date: Wed, 12 Jun 2024 11:40:04 -0400
Subject: [PATCH 3/9] Allow users to filter for greased pigs

---
 src/components/App.js     |  2 ++
 src/components/HogList.js | 59 +++++++++++++++++++++++++++++++++++----
 src/components/HogTile.js |  2 +-
 3 files changed, 56 insertions(+), 7 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index ec313d69..abb5c020 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -5,6 +5,8 @@ import HogList from "./HogList";
 import hogs from "../porkers_data";
 
 function App() {
+	
+
 	return (
 		<div className="App">
 			<Nav />
diff --git a/src/components/HogList.js b/src/components/HogList.js
index 9d343602..de40135b 100644
--- a/src/components/HogList.js
+++ b/src/components/HogList.js
@@ -1,15 +1,62 @@
-import React from "react";
+import React, { useState } from "react";
 import HogTile from "./HogTile";
 
 const HogList = ({ hogs }) => {
+	const [showGreased, setShowGreased] = useState(false)
+	const [hogList, setHogList] = useState(hogs.map(hog => {
+		return {
+			...hog,
+			display: true
+		}
+	}))
+	
+	const handleFilterGreased = () => {
+		setShowGreased(showGreased => {
+			const newState = !showGreased
+			if(newState){
+				displayGreasedHogs()
+			} else {
+				displayAllHogs()
+			}
+			return newState
+		})
+	}
+
+	const displayAllHogs = () => {
+		setHogList(hogList.map(hog => {
+			return {
+				...hog,
+				display: true
+			}
+		}))
+	}
+
+	const displayGreasedHogs = () => {
+		setHogList(hogList.map(hog => {
+			if(hog.greased === false){
+				return {
+					...hog,
+					display: false
+				}
+			} else {
+				return hog
+			}
+		}))
+	}
+	
 	return (
-		<div className="ui grid container">
-			<div className="ui eight wide column">
-				{hogs.map(hog => {
-					return <HogTile key={hog.name} hog={hog} />
-				})}
+		<>
+			<div>
+			<button onClick={handleFilterGreased}>Filter Greased Hogs</button>
 			</div>
+			<div className="ui grid container">
+				<div className="ui eight wide column">
+					{hogList.map(hog => {
+						{return hog.display ? <HogTile key={hog.name} hog={hog} /> : null}
+					})}
+				</div>
 		</div>
+		</>
 	)
 }
 
diff --git a/src/components/HogTile.js b/src/components/HogTile.js
index 8e3457af..dac9fb94 100644
--- a/src/components/HogTile.js
+++ b/src/components/HogTile.js
@@ -11,7 +11,7 @@ const HogTile = ({ hog }) => {
 				<>
 					<p>{hog.specialty}</p>
 					<p>{hog.weight}</p> 
-					<p>{hog.greased}</p> 
+					<p>{hog.greased ? 'Greased' : 'Not Greased'}</p> 
 					<p>{hog["highest medal achieved"]}</p>
 				</>  
 			: null}

From e269e94458c27f7c496922c4128c565a7b1bd093 Mon Sep 17 00:00:00 2001
From: Yuriy Ivanenko <yuriy.ivanenko@powerhrg.com>
Date: Wed, 12 Jun 2024 13:21:43 -0400
Subject: [PATCH 4/9] Refactor filter fucntionality

---
 src/components/HogList.js | 44 ++++-----------------------------------
 1 file changed, 4 insertions(+), 40 deletions(-)

diff --git a/src/components/HogList.js b/src/components/HogList.js
index de40135b..2620d098 100644
--- a/src/components/HogList.js
+++ b/src/components/HogList.js
@@ -3,46 +3,10 @@ import HogTile from "./HogTile";
 
 const HogList = ({ hogs }) => {
 	const [showGreased, setShowGreased] = useState(false)
-	const [hogList, setHogList] = useState(hogs.map(hog => {
-		return {
-			...hog,
-			display: true
-		}
-	}))
 	
-	const handleFilterGreased = () => {
-		setShowGreased(showGreased => {
-			const newState = !showGreased
-			if(newState){
-				displayGreasedHogs()
-			} else {
-				displayAllHogs()
-			}
-			return newState
-		})
-	}
+	const handleFilterGreased = () => setShowGreased(showGreased => !showGreased)
 
-	const displayAllHogs = () => {
-		setHogList(hogList.map(hog => {
-			return {
-				...hog,
-				display: true
-			}
-		}))
-	}
-
-	const displayGreasedHogs = () => {
-		setHogList(hogList.map(hog => {
-			if(hog.greased === false){
-				return {
-					...hog,
-					display: false
-				}
-			} else {
-				return hog
-			}
-		}))
-	}
+	const filteredList = showGreased ? hogs.filter(hog => hog.greased) : hogs
 	
 	return (
 		<>
@@ -51,8 +15,8 @@ const HogList = ({ hogs }) => {
 			</div>
 			<div className="ui grid container">
 				<div className="ui eight wide column">
-					{hogList.map(hog => {
-						{return hog.display ? <HogTile key={hog.name} hog={hog} /> : null}
+					{filteredList.map(hog => {
+						return <HogTile key={hog.name} hog={hog} />
 					})}
 				</div>
 		</div>

From 65c89cfb49a35af3cd698e8e0c680217e2f7d02c Mon Sep 17 00:00:00 2001
From: Yuriy Ivanenko <yuriy.ivanenko@powerhrg.com>
Date: Wed, 12 Jun 2024 14:00:24 -0400
Subject: [PATCH 5/9] Add sort functionality to app

---
 src/components/HogList.js      | 17 ++++++++++++++---
 src/components/SortDropdown.js | 15 +++++++++++++++
 2 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 src/components/SortDropdown.js

diff --git a/src/components/HogList.js b/src/components/HogList.js
index 2620d098..7d414438 100644
--- a/src/components/HogList.js
+++ b/src/components/HogList.js
@@ -1,25 +1,36 @@
 import React, { useState } from "react";
+import SortDropdown from "./SortDropdown";
 import HogTile from "./HogTile";
 
 const HogList = ({ hogs }) => {
 	const [showGreased, setShowGreased] = useState(false)
+	const [sortValue, setSortValue] = useState('')
 	
 	const handleFilterGreased = () => setShowGreased(showGreased => !showGreased)
+	const handleSort = (sortValue) => setSortValue(sortValue)
 
-	const filteredList = showGreased ? hogs.filter(hog => hog.greased) : hogs
+	const sortedList = [...hogs].sort((a, b) => {
+		if(sortValue === 'name'){
+			return a.name.localeCompare(b.name)
+		} else if(sortValue === 'weight') {
+			return a.weight - b.weight
+		}
+	})
+	const filteredList = showGreased ? sortedList.filter(hog => hog.greased) : sortedList
 	
 	return (
 		<>
 			<div>
-			<button onClick={handleFilterGreased}>Filter Greased Hogs</button>
+				<button onClick={handleFilterGreased}>Filter Greased Hogs</button>
 			</div>
+			<SortDropdown handleSort={handleSort} />
 			<div className="ui grid container">
 				<div className="ui eight wide column">
 					{filteredList.map(hog => {
 						return <HogTile key={hog.name} hog={hog} />
 					})}
 				</div>
-		</div>
+			</div>
 		</>
 	)
 }
diff --git a/src/components/SortDropdown.js b/src/components/SortDropdown.js
new file mode 100644
index 00000000..a6295d29
--- /dev/null
+++ b/src/components/SortDropdown.js
@@ -0,0 +1,15 @@
+import React from "react";
+
+const SortDropdown = ({ handleSort }) => {
+	const handleChange = (e) => handleSort(e.target.value)
+
+	return (
+		<select name="sort" onChange={handleChange}>
+			<option value="">Sort</option>
+			<option value="name">Name</option>
+			<option value="weight">Weight</option>
+		</select>
+	)
+}
+
+export default SortDropdown;

From 0168076849354a03ed0281e0a8a0d33329df73ed Mon Sep 17 00:00:00 2001
From: Yuriy Ivanenko <yuriy.ivanenko@powerhrg.com>
Date: Wed, 12 Jun 2024 14:28:15 -0400
Subject: [PATCH 6/9] Add ability to hide hogs and show them

---
 src/components/HogList.js | 21 ++++++++++++++++++---
 src/components/HogTile.js |  7 ++++---
 src/index.css             |  4 ++++
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/components/HogList.js b/src/components/HogList.js
index 7d414438..4887dcde 100644
--- a/src/components/HogList.js
+++ b/src/components/HogList.js
@@ -5,29 +5,44 @@ import HogTile from "./HogTile";
 const HogList = ({ hogs }) => {
 	const [showGreased, setShowGreased] = useState(false)
 	const [sortValue, setSortValue] = useState('')
+	const [nonHiddenList, setNonHiddenList] = useState(hogs)
 	
 	const handleFilterGreased = () => setShowGreased(showGreased => !showGreased)
 	const handleSort = (sortValue) => setSortValue(sortValue)
 
-	const sortedList = [...hogs].sort((a, b) => {
+	const handleHideHog = (hogToHide) => {
+		setNonHiddenList(nonHiddenList.filter(hog => hog.name !== hogToHide))	
+	}
+
+	const handleShowAllHogs = () => setNonHiddenList(hogs)
+
+	const sortedList = [...nonHiddenList].sort((a, b) => {
 		if(sortValue === 'name'){
 			return a.name.localeCompare(b.name)
 		} else if(sortValue === 'weight') {
 			return a.weight - b.weight
 		}
 	})
+
 	const filteredList = showGreased ? sortedList.filter(hog => hog.greased) : sortedList
 	
 	return (
 		<>
 			<div>
-				<button onClick={handleFilterGreased}>Filter Greased Hogs</button>
+				<button 
+					style={showGreased ? {backgroundColor: 'lightblue'} : null} 
+					onClick={handleFilterGreased}>Filter Greased Hogs
+				</button>
+				<button 
+					style={{marginLeft: '20px', marginBottom: '20px'}} 
+					onClick={handleShowAllHogs}>Show All Hogs
+				</button>
 			</div>
 			<SortDropdown handleSort={handleSort} />
 			<div className="ui grid container">
 				<div className="ui eight wide column">
 					{filteredList.map(hog => {
-						return <HogTile key={hog.name} hog={hog} />
+						return <HogTile key={hog.name} hog={hog} handleHideHog={handleHideHog} />
 					})}
 				</div>
 			</div>
diff --git a/src/components/HogTile.js b/src/components/HogTile.js
index dac9fb94..48de2fc1 100644
--- a/src/components/HogTile.js
+++ b/src/components/HogTile.js
@@ -1,11 +1,11 @@
 import React, { useState } from "react";
 
-const HogTile = ({ hog }) => {
+const HogTile = ({ hog, handleHideHog }) => {
 	const [showDetails, setShowDetails] = useState(false)
 	const handleShowDetails = () => setShowDetails(!showDetails)	
 	
 	return (
-		<div key={hog.name} className="pigTile" onClick={handleShowDetails}>
+		<div key={hog.name} className="pigTile" >
 			<p className="hoggyText">{hog.name}</p>
 			{showDetails ? 
 				<>
@@ -15,7 +15,8 @@ const HogTile = ({ hog }) => {
 					<p>{hog["highest medal achieved"]}</p>
 				</>  
 			: null}
-			<img style={{width: '500px'}} src={hog.image}/>
+			<img onClick={handleShowDetails} style={{width: '500px'}} src={hog.image}/>
+			<button onClick={() => handleHideHog(hog.name)}>Hide This Hog!</button>
 		</div>
 	)
 }
diff --git a/src/index.css b/src/index.css
index 53b896db..943f890f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -112,6 +112,10 @@ ul {
   color: #FBB;
 }
 
+img:hover{
+  cursor: pointer;
+}
+
 .minPigTile {
   width: 250px;
   background-size: cover;

From 5254a501810fb881b9adacba88e6d34f38804da8 Mon Sep 17 00:00:00 2001
From: Yuriy Ivanenko <yuriy.ivanenko@powerhrg.com>
Date: Wed, 12 Jun 2024 15:46:06 -0400
Subject: [PATCH 7/9] Add form to add new pigs to list

---
 src/components/AddHogForm.js | 92 ++++++++++++++++++++++++++++++++++++
 src/components/App.js        | 11 +++--
 src/components/HogList.js    | 10 ++--
 src/components/HogTile.js    |  2 +-
 4 files changed, 106 insertions(+), 9 deletions(-)
 create mode 100644 src/components/AddHogForm.js

diff --git a/src/components/AddHogForm.js b/src/components/AddHogForm.js
new file mode 100644
index 00000000..6336c533
--- /dev/null
+++ b/src/components/AddHogForm.js
@@ -0,0 +1,92 @@
+import React, { useState } from "react";
+
+const AddHogForm = ({ handleNewHog }) => {
+	const [formData, setFormData] = useState({
+    name: '',
+    specialty: '',
+    greased: false,
+    weight: '',
+    medal: 'none',
+    image: ''
+  })
+
+  const handleChange = (e) => {
+    const { name, value, type, checked } = e.target
+    setFormData({
+      ...formData,
+      [name]: type === 'checkbox' ? checked : value
+    })
+  }
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    handleNewHog(formData)
+  }
+
+	return (
+    <form className="ui form"  style={{maxWidth:'400px'}} onSubmit={handleSubmit}>
+      <div className="field">
+        <label>Name</label>
+        <input
+          type="text"
+          name="name"
+          value={formData.name}
+          onChange={handleChange}
+        />
+      </div>
+      <div className="field">
+        <label>Specialty</label>
+        <input
+          type="text"
+          name="specialty"
+          value={formData.specialty}
+          onChange={handleChange}
+        />
+      </div>
+      <div className="field">
+        <label>Greased</label>
+        <input
+          type="checkbox"
+          name="greased"
+          checked={formData.greased}
+          onChange={handleChange}
+        />
+      </div>
+      <div className="field">
+        <label>Weight</label>
+        <input
+          type="number"
+          name="weight"
+          value={formData.weight}
+          onChange={handleChange}
+        />
+      </div>
+      <div className="field">
+        <label>Medal</label>
+        <select
+          name="medal"
+          value={formData.medal}
+          onChange={handleChange}
+        >
+          <option value="none">None</option>
+					<option value="wood">Wood</option>
+					<option value="bronze">Bronze</option>
+          <option value="silver">Silver</option>
+          <option value="gold">Gold</option>
+					<option value="diamond">Diamond</option>
+					<option value="platinum">Platinum</option>
+        </select>
+      </div>
+      <div className="field">
+        <label>Image Source</label>
+        <input
+          type="text"
+          name="image"
+          value={formData.image}          onChange={handleChange}        />
+      </div>
+      <button className="ui button" type="submit">Submit</button>
+    </form>
+  );
+};
+
+export default AddHogForm;
diff --git a/src/components/App.js b/src/components/App.js
index abb5c020..3041bad4 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,18 +1,21 @@
-import React from "react";
+import React, { useState } from "react";
 import Nav from "./Nav";
 import HogList from "./HogList";
+import AddHogForm from "./AddHogForm";
 
 import hogs from "../porkers_data";
 
 function App() {
-	
+	const [hogsList, setHogsList] = useState(hogs)
+	const handleNewHog = (newHog) => setHogsList([...hogs, newHog])
 
 	return (
 		<div className="App">
 			<Nav />
-			<HogList hogs={hogs} />
+			<AddHogForm handleNewHog={handleNewHog} />
+			<HogList hogs={hogsList} />
 		</div>
-	);
+	)
 }
 
 export default App;
diff --git a/src/components/HogList.js b/src/components/HogList.js
index 4887dcde..b4b9d513 100644
--- a/src/components/HogList.js
+++ b/src/components/HogList.js
@@ -29,13 +29,15 @@ const HogList = ({ hogs }) => {
 	return (
 		<>
 			<div>
-				<button 
+				<button className="ui button"
 					style={showGreased ? {backgroundColor: 'lightblue'} : null} 
-					onClick={handleFilterGreased}>Filter Greased Hogs
+					onClick={handleFilterGreased}>
+						Filter Greased Hogs
 				</button>
-				<button 
+				<button className="ui button"
 					style={{marginLeft: '20px', marginBottom: '20px'}} 
-					onClick={handleShowAllHogs}>Show All Hogs
+					onClick={handleShowAllHogs}>
+						Show All Hogs
 				</button>
 			</div>
 			<SortDropdown handleSort={handleSort} />
diff --git a/src/components/HogTile.js b/src/components/HogTile.js
index 48de2fc1..784bee00 100644
--- a/src/components/HogTile.js
+++ b/src/components/HogTile.js
@@ -16,7 +16,7 @@ const HogTile = ({ hog, handleHideHog }) => {
 				</>  
 			: null}
 			<img onClick={handleShowDetails} style={{width: '500px'}} src={hog.image}/>
-			<button onClick={() => handleHideHog(hog.name)}>Hide This Hog!</button>
+			<button className="ui button" onClick={() => handleHideHog(hog.name)}>Hide This Hog!</button>
 		</div>
 	)
 }

From aaf424cede72ab50e0c5ed0a573ac0860c875a91 Mon Sep 17 00:00:00 2001
From: Yuriy Ivanenko <yuriy.ivanenko@powerhrg.com>
Date: Thu, 13 Jun 2024 08:29:45 -0400
Subject: [PATCH 8/9] Clean up code

---
 src/components/AddHogForm.js |  4 +++-
 src/components/App.js        | 12 +++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/AddHogForm.js b/src/components/AddHogForm.js
index 6336c533..a2cbf5a3 100644
--- a/src/components/AddHogForm.js
+++ b/src/components/AddHogForm.js
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 
 const AddHogForm = ({ handleNewHog }) => {
+
 	const [formData, setFormData] = useState({
     name: '',
     specialty: '',
@@ -82,7 +83,8 @@ const AddHogForm = ({ handleNewHog }) => {
         <input
           type="text"
           name="image"
-          value={formData.image}          onChange={handleChange}        />
+          value={formData.image} onChange={handleChange} 
+        />
       </div>
       <button className="ui button" type="submit">Submit</button>
     </form>
diff --git a/src/components/App.js b/src/components/App.js
index 3041bad4..5606e3c6 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,9 +1,11 @@
-import React, { useState } from "react";
-import Nav from "./Nav";
-import HogList from "./HogList";
-import AddHogForm from "./AddHogForm";
+import React, { useState } from "react"
+
+import hogs from "../porkers_data"
+
+import Nav from "./Nav"
+import HogList from "./HogList"
+import AddHogForm from "./AddHogForm"
 
-import hogs from "../porkers_data";
 
 function App() {
 	const [hogsList, setHogsList] = useState(hogs)

From b1f18cd124bcc087e44ae52e166d9e9319b731d9 Mon Sep 17 00:00:00 2001
From: Yuriy Ivanenko <yuriy.ivanenko@powerhrg.com>
Date: Thu, 13 Jun 2024 09:08:27 -0400
Subject: [PATCH 9/9] Change styling for cards using semantic ui

---
 src/components/AddHogForm.js |  1 +
 src/components/HogTile.js    | 31 +++++++++++++++++++------------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/components/AddHogForm.js b/src/components/AddHogForm.js
index a2cbf5a3..c2ee4a24 100644
--- a/src/components/AddHogForm.js
+++ b/src/components/AddHogForm.js
@@ -65,6 +65,7 @@ const AddHogForm = ({ handleNewHog }) => {
       <div className="field">
         <label>Medal</label>
         <select
+        className="ui dropdown"
           name="medal"
           value={formData.medal}
           onChange={handleChange}
diff --git a/src/components/HogTile.js b/src/components/HogTile.js
index 784bee00..a9c9865f 100644
--- a/src/components/HogTile.js
+++ b/src/components/HogTile.js
@@ -5,18 +5,25 @@ const HogTile = ({ hog, handleHideHog }) => {
 	const handleShowDetails = () => setShowDetails(!showDetails)	
 	
 	return (
-		<div key={hog.name} className="pigTile" >
-			<p className="hoggyText">{hog.name}</p>
-			{showDetails ? 
-				<>
-					<p>{hog.specialty}</p>
-					<p>{hog.weight}</p> 
-					<p>{hog.greased ? 'Greased' : 'Not Greased'}</p> 
-					<p>{hog["highest medal achieved"]}</p>
-				</>  
-			: null}
-			<img onClick={handleShowDetails} style={{width: '500px'}} src={hog.image}/>
-			<button className="ui button" onClick={() => handleHideHog(hog.name)}>Hide This Hog!</button>
+		<div key={hog.name} className="ui card" >
+			<div className="image">
+				<img onClick={handleShowDetails} src={hog.image}/>
+			</div>
+			<div className="content">
+				<p className="header">{hog.name}</p>
+				{showDetails ? 
+					<div className="meta">
+						<span>Specialty: {hog.specialty}</span><br/>
+						<span>Weight: {hog.weight}</span><br/> 
+						<span>{hog.greased ? 'Greased' : 'Not Greased'}</span><br/> 
+						<span>
+							<i className="certificate icon"></i>
+							{hog["highest medal achieved"]}
+						</span>
+					</div>  
+				: null}
+				<button className="ui button" onClick={() => handleHideHog(hog.name)}>Hide This Hog!</button>
+			</div>
 		</div>
 	)
 }