add edit button to cat list

Author: stevelw

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>
 	);

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>
-			)}
 		</>
 	);
 }