From 741350ff890efbed9dbc150874a26d4570d74b50 Mon Sep 17 00:00:00 2001
From: stevelw <steve@stevelw.co.uk>
Date: Fri, 6 Dec 2024 20:31:09 +0000
Subject: [PATCH 1/4] Add selected cat state to clowder list

---
 src/Components/CatCard.tsx   | 1 +
 src/Components/MyClowder.tsx | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/Components/CatCard.tsx b/src/Components/CatCard.tsx
index ebeda55..a9739ae 100644
--- a/src/Components/CatCard.tsx
+++ b/src/Components/CatCard.tsx
@@ -4,6 +4,7 @@ import Card from './Styling/Card';
 
 interface Props {
 	cat: CatFromAxios;
+	setSelectedCat: React.Dispatch<React.SetStateAction<CatFromAxios | null>>;
 }
 
 export default function CatCard({ cat }: Props) {
diff --git a/src/Components/MyClowder.tsx b/src/Components/MyClowder.tsx
index 2a63989..5891982 100644
--- a/src/Components/MyClowder.tsx
+++ b/src/Components/MyClowder.tsx
@@ -10,6 +10,7 @@ import CatCard from './CatCard';
 export default function MyClowder() {
 	const { userId } = useContext(UserContext);
 	const [myCats, setMyCats] = useState<CatFromAxios[]>([]);
+	const [selectedCat, setSelectedCat] = useState<CatFromAxios | null>(null);
 
 	useEffect(() => {
 		if (userId) {
@@ -27,11 +28,11 @@ export default function MyClowder() {
 			<ul>
 				{myCats.map((cat) => (
 					<li key={cat.id}>
-						<CatCard cat={cat}></CatCard>
+						<CatCard cat={cat} setSelectedCat={setSelectedCat} />
 					</li>
 				))}
 			</ul>
-			{false && (
+			{selectedCat && (
 				<ModalPopover>
 					<CatProfile></CatProfile>
 				</ModalPopover>

From 0f35dfb36db117c413b53764b50eb86b17262f63 Mon Sep 17 00:00:00 2001
From: stevelw <steve@stevelw.co.uk>
Date: Fri, 6 Dec 2024 20:52:32 +0000
Subject: [PATCH 2/4] add edit button to cat list

---
 src/Components/CatCard.tsx   | 19 ++++++++++++++++---
 src/Components/MyClowder.tsx | 11 +++++------
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/Components/CatCard.tsx b/src/Components/CatCard.tsx
index a9739ae..5f76bcf 100644
--- a/src/Components/CatCard.tsx
+++ b/src/Components/CatCard.tsx
@@ -1,22 +1,35 @@
 import React from 'react';
 import CatFromAxios from '../Interfaces/CatFromAxios';
 import Card from './Styling/Card';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPenToSquare } from '@fortawesome/free-solid-svg-icons';
 
 interface Props {
 	cat: CatFromAxios;
 	setSelectedCat: React.Dispatch<React.SetStateAction<CatFromAxios | null>>;
 }
 
-export default function CatCard({ cat }: Props) {
+export default function CatCard({ cat, setSelectedCat }: Props) {
 	return (
 		<Card heading={cat.name}>
-			<div className="flex justify-between">
-				<img src={cat.picture_url ?? ''} alt={cat.name} className="w-20" />
+			<div className="flex justify-between h-10 sm:h-32">
+				<img
+					src={cat.picture_url ?? ''}
+					alt={cat.name}
+					className="w-10 h-10 sm:w-32 sm:h-32"
+				/>
 				<div>
 					<p>Level: {cat.battle_profile.level.toString()}</p>
 					<p>XP: {cat.battle_profile.xp.toString()}</p>
 				</div>
 				<p>{cat.description ?? 'A good kitty'}</p>
+				<FontAwesomeIcon
+					className="h-full"
+					icon={faPenToSquare}
+					onClick={() => {
+						setSelectedCat(cat);
+					}}
+				/>
 			</div>
 		</Card>
 	);
diff --git a/src/Components/MyClowder.tsx b/src/Components/MyClowder.tsx
index 5891982..6cfc8e7 100644
--- a/src/Components/MyClowder.tsx
+++ b/src/Components/MyClowder.tsx
@@ -22,7 +22,11 @@ export default function MyClowder() {
 		}
 	}, [userId]);
 
-	return (
+	return selectedCat ? (
+		<ModalPopover>
+			<CatProfile></CatProfile>
+		</ModalPopover>
+	) : (
 		<>
 			<H2>My Clowder</H2>
 			<ul>
@@ -32,11 +36,6 @@ export default function MyClowder() {
 					</li>
 				))}
 			</ul>
-			{selectedCat && (
-				<ModalPopover>
-					<CatProfile></CatProfile>
-				</ModalPopover>
-			)}
 		</>
 	);
 }

From 3b359785e3e932940808ac11a2b1e0e5779aefac Mon Sep 17 00:00:00 2001
From: stevelw <steve@stevelw.co.uk>
Date: Thu, 19 Dec 2024 14:32:18 +0000
Subject: [PATCH 3/4] Improve responsive sizing

---
 src/Components/CatCard.tsx    | 4 ++--
 src/Components/Styling/H3.tsx | 6 +++++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/Components/CatCard.tsx b/src/Components/CatCard.tsx
index 5f76bcf..171507d 100644
--- a/src/Components/CatCard.tsx
+++ b/src/Components/CatCard.tsx
@@ -12,11 +12,11 @@ interface Props {
 export default function CatCard({ cat, setSelectedCat }: Props) {
 	return (
 		<Card heading={cat.name}>
-			<div className="flex justify-between h-10 sm:h-32">
+			<div className="flex justify-between h-10 sm:h-16">
 				<img
 					src={cat.picture_url ?? ''}
 					alt={cat.name}
-					className="w-10 h-10 sm:w-32 sm:h-32"
+					className="w-10 h-10 sm:w-16 sm:h-16"
 				/>
 				<div>
 					<p>Level: {cat.battle_profile.level.toString()}</p>
diff --git a/src/Components/Styling/H3.tsx b/src/Components/Styling/H3.tsx
index 737b3a5..240ad28 100644
--- a/src/Components/Styling/H3.tsx
+++ b/src/Components/Styling/H3.tsx
@@ -5,5 +5,9 @@ interface Props {
 }
 
 export default function H3({ children }: Props) {
-	return <h3 className="text-2xl font-bold mb-5">{children}</h3>;
+	return (
+		<h3 className="text-xl sm:text-2xl lg:text-3xl xl:text-4xl font-bold mb-5">
+			{children}
+		</h3>
+	);
 }

From e9535ba9ab5893efbea4e9399d6d021533c93ab1 Mon Sep 17 00:00:00 2001
From: stevelw <steve@stevelw.co.uk>
Date: Thu, 19 Dec 2024 14:35:41 +0000
Subject: [PATCH 4/4] Make CatProfile self-closing

---
 src/Components/MyClowder.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/MyClowder.tsx b/src/Components/MyClowder.tsx
index 6cfc8e7..5756760 100644
--- a/src/Components/MyClowder.tsx
+++ b/src/Components/MyClowder.tsx
@@ -24,7 +24,7 @@ export default function MyClowder() {
 
 	return selectedCat ? (
 		<ModalPopover>
-			<CatProfile></CatProfile>
+			<CatProfile />
 		</ModalPopover>
 	) : (
 		<>