+
+
+
+
+
+
+
+ Cat Gallery
+ + +
+ {title &&
+ );
+};
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
new file mode 100644
index 00000000..b1fb9fd9
--- /dev/null
+++ b/src/components/Button.tsx
@@ -0,0 +1,32 @@
+import type React from "react";
+
+type ButtonVariant = "primary" | "secondary" | "danger";
+
+interface ButtonProps extends React.ButtonHTMLAttributes{title}
} + {isLoading &&
+
+
+
+ );
+};
diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx
new file mode 100644
index 00000000..6cb2f20e
--- /dev/null
+++ b/src/components/ErrorMessage.tsx
@@ -0,0 +1,16 @@
+type ErrorMessageProps = {
+ message?: string;
+};
+
+export const ErrorMessage = ({
+ message = "An error occured. Please reload the page.",
+}: ErrorMessageProps) => {
+ return (
+
+
+ {children}
+
+
+ );
+};
diff --git a/src/components/LoadingSpinner.tsx b/src/components/LoadingSpinner.tsx
new file mode 100644
index 00000000..678cea6d
--- /dev/null
+++ b/src/components/LoadingSpinner.tsx
@@ -0,0 +1,7 @@
+export const LoadingSpinner = () => {
+ return (
+
+ Error!
+ {message}
+
+
+
+ );
+};
diff --git a/src/components/LoadingText.tsx b/src/components/LoadingText.tsx
new file mode 100644
index 00000000..772e5ce3
--- /dev/null
+++ b/src/components/LoadingText.tsx
@@ -0,0 +1,11 @@
+type LoadingTextProps = {
+ text?: string;
+};
+
+export const LoadingText = ({ text = "Loading..." }: LoadingTextProps) => {
+ return (
+ πΊ
+
+
+ );
+};
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
new file mode 100644
index 00000000..a3e23fc4
--- /dev/null
+++ b/src/components/Modal.tsx
@@ -0,0 +1,69 @@
+import React, { useEffect, useRef } from "react";
+import { HiX } from "react-icons/hi";
+import { Button } from "./Button";
+
+type ModalProps = {
+ isOpen: boolean;
+ onClose: () => void;
+ children?: React.ReactNode;
+};
+
+export const Modal = ({ isOpen, onClose, children }: ModalProps) => {
+ const modalRef = useRef{text}
+
+
+
+
+ );
+};
+
+export default Modal;
diff --git a/src/components/NavItem.tsx b/src/components/NavItem.tsx
new file mode 100644
index 00000000..d7ea2293
--- /dev/null
+++ b/src/components/NavItem.tsx
@@ -0,0 +1,20 @@
+import { NavLink } from "react-router-dom";
+
+export const NavItem = ({
+ to,
+ children,
+}: {
+ to: string;
+ children: React.ReactNode;
+}) => (
+
+ {children}
+
+
+
+ {label}:
+
+ );
+};
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 00000000..4af66936
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1,9 @@
+export * from "./ErrorMessage";
+export * from "./Button";
+export * from "./Modal";
+export * from "./LoadingSpinner";
+export * from "./LoadingText";
+export * from "./Rating";
+export * from "./Collapsible";
+export * from "./NavItem";
+export * from "./AsyncContainer";
diff --git a/src/features/breeds/BreedDetails.tsx b/src/features/breeds/BreedDetails.tsx
new file mode 100644
index 00000000..b06384a4
--- /dev/null
+++ b/src/features/breeds/BreedDetails.tsx
@@ -0,0 +1,37 @@
+import { ErrorMessage, LoadingSpinner } from "../../components";
+import { Cats } from "../cats";
+import type { Breed } from "../types";
+import { useBreeds } from "./api";
+
+type BreedDetailsProps = {
+ selectedBreed?: Breed;
+};
+
+export const BreedDetails = ({ selectedBreed }: BreedDetailsProps) => {
+ const { isLoading } = useBreeds();
+
+ if (isLoading) {
+ return
+ {Array.from({ length: maxValue }).map((_, i) => (
+
+ ))}
+
+
+
+ );
+};
diff --git a/src/features/breeds/BreedFilters.tsx b/src/features/breeds/BreedFilters.tsx
new file mode 100644
index 00000000..49cb0f15
--- /dev/null
+++ b/src/features/breeds/BreedFilters.tsx
@@ -0,0 +1,75 @@
+import Select from "react-select";
+import { Button, Collapsible } from "../../components";
+import { BREED_CHARACTERISTICS } from "../constants";
+import { capitalizeWords } from "../../utils";
+
+export type FilterValues = Record
+
+
+ {selectedBreed.name}
+{selectedBreed.description}
+
+
+
+ {BREED_CHARACTERISTICS.map((key) => (
+
+
+ {Object.keys(filters).length > 0 && (
+
+
+
+ ))}
+
+
+
+ )}
+
+
+ {filteredBreeds && (
+ <>
+
+
+
+
+
+ );
+};
diff --git a/src/features/breeds/api.ts b/src/features/breeds/api.ts
new file mode 100644
index 00000000..0001f368
--- /dev/null
+++ b/src/features/breeds/api.ts
@@ -0,0 +1,10 @@
+import { useQuery } from "@tanstack/react-query";
+import { fetchData } from "../../api";
+import type { Breed } from "../types";
+
+export const useBreeds = () => {
+ return useQuery({
+ queryKey: ["breeds", "list"],
+ queryFn: () => fetchDataCat Breeds
+ +
+
+
+ + Showing {filteredBreeds.length} of {breeds?.length} breeds +
+
+ {filteredBreeds.map((breed) => (
+
+
+ )}
+ handleBreedClick(breed.id)}
+ className="p-4 transition-colors duration-200 border rounded-lg cursor-pointer hover:bg-gray-50"
+ >
+ {breed.image && (
+ 
+ )}
+
+ ))}
+
+ )}
+ {breed.name}
++ {breed.description} +
+
+ {showCatDetails ? (
+
+
+
+ ) : (
+
+
+ );
+};
diff --git a/src/features/cats/CatGrid.tsx b/src/features/cats/CatGrid.tsx
new file mode 100644
index 00000000..67f80b6c
--- /dev/null
+++ b/src/features/cats/CatGrid.tsx
@@ -0,0 +1,41 @@
+import { Modal } from "../../components";
+import { CatDetails } from "./CatDetails";
+import { useCatSelection } from "./useCatSelection";
+
+import type { Cat } from "../types";
+
+type CatGridProps = {
+ cats: Cat[];
+};
+
+export const CatGrid = ({ cats }: CatGridProps) => {
+ const { selectedCat, isModalOpen, handleCatClick, handleCloseModal } =
+ useCatSelection(cats);
+
+ return (
+ <>
+
+
+
+ 
+ {!isFavouriteCatsLoading &&
+ (favouriteId ? (
+
+ ) : (
+
+ ))}
+
+
+
+
+ Cat Details
+ + {catDetails?.breeds?.length > 0 ? ( +
+ {catDetails.breeds.map((breed) => (
+
+ ) : (
+ handleBreedClick(breed.id)}
+ >
+
+ ))}
+
+
+
+ {breed.wikipedia_url && (
+ + {breed.name} +
+ + {breed.description && ( +{breed.description}
+ )} + +
+ {breed.origin && (
+
+
+ + Origin:{" "} + {breed.origin} +
+ )} + {breed.temperament && ( ++ Temperament:{" "} + {breed.temperament} +
+ )} +
+ {BREED_CHARACTERISTICS.map(
+ (key) =>
+ breed[key] && (
+
+ + Learn more: + + Wikipedia + +
+ )} +
+ No breed information available for this cat.
+
+ )}
+
+ {cats.map((cat) => (
+
+
+
+
+ ))}
+ handleCatClick(cat.id)}
+ >
+ 
+
+
+
+
+
+
+ )}
+
+ )}
+