CL-139-Add-edit-button-to-clowder-cards

src/Components/CatCard.tsx

@@ -1,21 +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-16">
+				<img
+					src={cat.picture_url ?? ''}
+					alt={cat.name}
+					className="w-10 h-10 sm:w-16 sm:h-16"
+				/>
 				<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

@@ -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) {
@@ -21,21 +22,20 @@ export default function MyClowder() {
 		}
 	}, [userId]);
 
-	return (
+	return selectedCat ? (
+		<ModalPopover>
+			<CatProfile />
+		</ModalPopover>
+	) : (
 		<>
 			<H2>My Clowder</H2>
 			<ul>
 				{myCats.map((cat) => (
 					<li key={cat.id}>
-						<CatCard cat={cat}></CatCard>
+						<CatCard cat={cat} setSelectedCat={setSelectedCat} />
 					</li>
 				))}
 			</ul>
-			{false && (
-				<ModalPopover>
-					<CatProfile></CatProfile>
-				</ModalPopover>
-			)}
 		</>
 	);
 }

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