+ fetchImages(0)}
+ />
+ ) : (
+ <>
+
+ {breed.description}
+ + {status === 'loading' && images.length === 0 ? ( +
+ {images.map((image) => (
+ handleImageClick(image)}
+ showBreedName={false}
+ />
+ ))}
+
+
+ {images.length === 0 && (
+ No images found for this breed.
+ )} + + {hasMore && ( +
+
+
+ )}
+
+ )}
+ {breed.name}
+
+
+ )}
+
+ {/* Error state */}
+ {isError && !isLoading && (
+
+
+ )}
+
+ {/* Content state - only show when we have an image and no errors/loading */}
+ {!isLoading && !isError && image && (
+
+ {/* Image */}
+
+ )}
+
+
+
+ {/* Details */}
+
+ 
+
+
+ {/* Breed information if available */}
+ {breed ? (
+
+
+
+ ) : (
+ About {breed.name}
+{breed.description}
+ +
+
+
+ {breed.wikipedia_url && (
+
+ Learn more on Wikipedia
+
+
+ )}
+
+ Origin: {breed.origin}
+
+
+ Life Span: {breed.life_span} years
+
+
+ Temperament: {breed.temperament}
+
+
+ Weight: {breed.weight.metric} kg
+
+ No breed information available for this cat.
+ )} + + {/* Favorite actions */} +
+ {actionError && (
+
+
+
+ )}
+
+ {isImageFavorite ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+ {/* Mobile menu */}
+
+
+
+
+
+ {/* Desktop navigation */}
+
+ Cat Lovers App
+
+ {/* Mobile menu button */}
+
+
+
+ {children}
+
+ );
+};
+
+/**
+ * Card.Image component
+ * For displaying images within a card
+ */
+Card.Image = function CardImage({
+ src,
+ alt = '',
+ className = '',
+ aspectRatio = 'auto',
+ onLoad,
+ onError
+}: CardImageProps) {
+ const [isLoading, setIsLoading] = useState(true);
+ const [hasError, setHasError] = useState(false);
+
+ // Combined classes using CSS classes from index.css
+ const aspectRatioClass = aspectRatio !== 'auto' ? `card-image-aspect-${aspectRatio}` : '';
+ const combinedClasses = `card-image ${aspectRatioClass} ${className}`;
+
+ // Handle image load
+ const handleImageLoad = () => {
+ setIsLoading(false);
+ onLoad?.();
+ };
+
+ // Handle image error
+ const handleImageError = () => {
+ setIsLoading(false);
+ setHasError(true);
+ onError?.();
+ };
+
+ return (
+
+ {/* Loading state */}
+ {isLoading && (
+ 
+
+ );
+};
+
+/**
+ * Card.Content component
+ * For displaying content within a card
+ */
+Card.Content = function CardContent({
+ children,
+ className = '',
+ padding = 'normal'
+}: CardContentProps) {
+ // Combined classes using CSS classes from index.css
+ const paddingClass = `card-content-${padding}`;
+ const combinedClasses = `${paddingClass} ${className}`;
+
+ return (
+
+
+
+ )}
+
+ {/* Error state */}
+ {hasError && (
+
+
+ )}
+
+ {/* Image */}
+
+
+
+ Failed to load image
+
+ {children}
+
+ );
+};
+
+/**
+ * Card.Title component
+ * For displaying a title within a card
+ */
+Card.Title = function CardTitle({
+ children,
+ className = '',
+ as = 'h3'
+}: CardTitleProps) {
+ const Component = as;
+
+ return (
+ + {children} +
+ ); +}; + +/** + * Card.Footer component + * For displaying a footer within a card + */ +Card.Footer = function CardFooter({ + children, + className = '' +}: CardFooterProps) { + return ( +
+ {children}
+
+ );
+};
+
+/**
+ * Card.Badge component
+ * For displaying a badge within a card
+ */
+Card.Badge = function CardBadge({
+ children,
+ className = '',
+ color = 'primary'
+}: CardBadgeProps) {
+ // Combined classes using CSS classes from index.css
+ const colorClass = `card-badge-${color}`;
+ const combinedClasses = `card-badge ${colorClass} ${className}`;
+
+ return (
+
+ {children}
+
+ );
+};
+
+export default Card;
diff --git a/src/components/ui/Error.tsx b/src/components/ui/Error.tsx
new file mode 100644
index 00000000..24963d84
--- /dev/null
+++ b/src/components/ui/Error.tsx
@@ -0,0 +1,270 @@
+import React from 'react';
+import { ExclamationTriangleIcon, ExclamationCircleIcon, XCircleIcon, InformationCircleIcon } from '@heroicons/react/24/outline';
+import Button from './Button';
+
+interface ErrorProps {
+ title?: string;
+ message: string;
+ onRetry?: () => void;
+ className?: string;
+ variant?: 'error' | 'warning' | 'info';
+ actions?: React.ReactNode;
+}
+
+interface ErrorComponent extends React.FC
+
+ );
+};
+
+/**
+ * Error.FullPage component
+ * Displays a full page error message with retry button
+ */
+Error.FullPage = function ErrorFullPage({
+ title = 'Something went wrong',
+ message = 'We encountered an error while loading the page. Please try again.',
+ onRetry,
+ className = '',
+ variant = 'error',
+ actions,
+}: ErrorProps) {
+ // Icon based on variant
+ const getIcon = () => {
+ switch (variant) {
+ case 'error':
+ return ;
+ case 'warning':
+ return ;
+ case 'info':
+ return ;
+ default:
+ return ;
+ }
+ };
+
+ return (
+
+
+
+ {getIcon()}
+
+
+
+ {title}
+
+
+ {(onRetry || actions) && (
+ {message}
+
+ {onRetry && (
+
+ )}
+ {actions}
+
+ )}
+
+
+ );
+};
+
+/**
+ * Error.Banner component
+ * Displays a banner error message at the top of the page
+ */
+Error.Banner = function ErrorBanner({
+ title,
+ message,
+ onRetry,
+ className = '',
+ variant = 'error',
+ actions,
+}: ErrorProps) {
+ // Using CSS classes from index.css
+ const bannerClass = `error-banner-${variant}`;
+
+ // Icon based on variant
+ const getIcon = () => {
+ switch (variant) {
+ case 'error':
+ return ;
+ case 'warning':
+ return ;
+ case 'info':
+ return ;
+ default:
+ return ;
+ }
+ };
+
+ return (
+
+ {getIcon()}
+
+ {title}
+{message}
+
+ {onRetry && (
+
+ )}
+ {actions}
+
+
+
+ );
+};
+
+/**
+ * Error.Toast component
+ * Displays a toast error message
+ */
+Error.Toast = function ErrorToast({
+ title,
+ message,
+ onRetry,
+ onClose,
+ className = '',
+ variant = 'error',
+}: ErrorProps & { onClose?: () => void }) {
+ // Using CSS classes from index.css
+ const toastClass = `error-toast-${variant}`;
+ const iconClass = `error-icon-${variant}`;
+ const titleClass = `error-title-${variant}`;
+ const messageClass = `error-message-${variant}`;
+
+ // Icon based on variant
+ const getIcon = () => {
+ switch (variant) {
+ case 'error':
+ return ;
+ case 'warning':
+ return ;
+ case 'info':
+ return ;
+ default:
+ return ;
+ }
+ };
+
+ return (
+
+
+
+
+
+
+ {getIcon()}
+
+
+ {(onRetry || actions) && (
+ + {title && {title}} + {title ? `${title}: ` : ''}{message} + {!title && message} +
+
+
+ )}
+
+ {onRetry && (
+
+ )}
+ {actions}
+
+
+
+ );
+};
+
+export default Error;
diff --git a/src/components/ui/Loading.tsx b/src/components/ui/Loading.tsx
new file mode 100644
index 00000000..857b19e7
--- /dev/null
+++ b/src/components/ui/Loading.tsx
@@ -0,0 +1,175 @@
+import React from 'react';
+
+interface LoadingProps {
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+ className?: string;
+ text?: string;
+ color?: 'primary' | 'secondary' | 'white';
+ variant?: 'spinner' | 'dots' | 'pulse';
+}
+
+interface LoadingOverlayProps {
+ text?: string;
+ className?: string;
+ blur?: boolean;
+}
+
+interface LoadingSectionProps {
+ text?: string;
+ height?: string;
+ className?: string;
+ variant?: 'spinner' | 'dots' | 'pulse';
+}
+
+interface LoadingSkeletonProps {
+ className?: string;
+ variant?: 'line' | 'circle' | 'rectangle';
+ height?: string;
+ width?: string;
+ count?: number;
+}
+
+interface LoadingComponent extends React.FC
+
+
+ {getIcon()}
+
+
+ {title &&
+ {onClose && (
+ {title}
} +
+
+ {onRetry && (
+ {message}
+
+
+
+ )}
+
+
+
+ )}
+
+
+ {text &&
+ );
+ }
+
+ // Render dots variant
+ if (variant === 'dots') {
+ return (
+ {text}
} +
+
+ );
+ }
+
+ // Render pulse variant
+ if (variant === 'pulse') {
+ return (
+
+
+
+
+
+ {text && {text}
} +
+
+ {text &&
+ );
+ }
+
+ return null;
+};
+
+/**
+ * LoadingOverlay component
+ * Displays a full-screen loading overlay
+ */
+Loading.Overlay = function LoadingOverlay({
+ text = 'Loading...',
+ className = '',
+ blur = true
+}: LoadingOverlayProps) {
+ const backdropClass = blur ? 'loading-overlay-blur' : 'loading-overlay-no-blur';
+
+ return (
+ {text}
} +
+
+ );
+};
+
+/**
+ * LoadingSection component
+ * Displays a loading indicator for a section of the page
+ */
+Loading.Section = function LoadingSection({
+ text = 'Loading...',
+ height = 'h-40',
+ className = '',
+ variant = 'spinner'
+}: LoadingSectionProps) {
+ return (
+
+
+ );
+};
+
+/**
+ * LoadingSkeleton component
+ * Displays a skeleton loading placeholder
+ */
+Loading.Skeleton = function LoadingSkeleton({
+ className = '',
+ variant = 'line',
+ height = 'h-4',
+ width = 'w-full',
+ count = 1
+}: LoadingSkeletonProps) {
+ // Using CSS classes from index.css
+ let skeletonClass = 'loading-skeleton';
+
+ if (variant === 'circle') {
+ skeletonClass += ' loading-skeleton-circle';
+ }
+
+ const combinedClasses = `${skeletonClass} ${height} ${width} ${className}`;
+
+ return (
+
+ {[...Array(count)].map((_, i) => (
+
+ ))}
+
+ );
+};
+
+export default Loading;
diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
new file mode 100644
index 00000000..3051c846
--- /dev/null
+++ b/src/components/ui/Modal.tsx
@@ -0,0 +1,113 @@
+import React, { Fragment } from 'react';
+import { Dialog, Transition } from '@headlessui/react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+
+interface ModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ title?: string;
+ description?: string;
+ children: React.ReactNode;
+ maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | 'full';
+ hideCloseButton?: boolean;
+ position?: 'center' | 'top';
+ footerContent?: React.ReactNode;
+}
+
+/**
+ * Modal component
+ * A dialog component for displaying content in a modal overlay
+ */
+const Modal: React.FC
+
+
+
+ }>
+
+ refetch()}
+ variant="error"
+ className="mb-6"
+ />
+ )}
+
+ {/* Loading state */}
+ {isLoading && (
+
+ );
+};
+
+export default Breeds;
diff --git a/src/pages/Favorites.tsx b/src/pages/Favorites.tsx
new file mode 100644
index 00000000..ac03260f
--- /dev/null
+++ b/src/pages/Favorites.tsx
@@ -0,0 +1,177 @@
+import React, { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { getFavorites, getCatImage } from '../api/catService';
+import type { CatImage as CatImageType } from '../types';
+import { Button, Loading, Error, Card } from '../components/ui';
+import { CatImageModal, SEO } from '../components';
+import { HeartIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
+import { createCollectionPageJsonLd } from '../utils/seoUtils';
+
+/**
+ * Interface for favorite item from API
+ */
+interface FavoriteItem {
+ id: number;
+ image_id: string;
+ image: CatImageType;
+}
+
+/**
+ * Favorites page component
+ * Displays a list of the user's favorite cat images
+ */
+const Favorites: React.FC = () => {
+ const [selectedImageId, setSelectedImageId] = useState
+
+
+ {/* Error state */}
+ {isError && (
+ Cat Breeds
+Explore different cat breeds and learn about their characteristics
+
+
+ )}
+
+ {/* Breeds grid */}
+ {breeds && breeds.length > 0 && (
+
+ {breeds.map((breed) => (
+ handleBreedClick(breed)}
+ >
+
+ {breed.name}
+ {breed.origin}
+
+ {breed.description && breed.description.length > 150
+ ? `${breed.description.substring(0, 150)}...`
+ : breed.description}
+
+
+
+
+
+ ))}
+
+ )}
+
+ {/* Empty state */}
+ {!isLoading && (!breeds || breeds.length === 0) && !isError && (
+
+ Temperament: {breed.temperament?.split(', ')[0]}
+ View details
+
+
+
+ )}
+
+ {/* Breed modal */}
+ {selectedBreed && (
+
+
+
+ No breeds found
+Try refreshing the page or check back later.
+
+
+
+
+ 0 ? favorites[0].image.url : undefined}
+ jsonLd={jsonLd}
+ />
+ refetch()}
+ variant="error"
+ className="mb-6"
+ />
+ )}
+
+ {/* Loading state */}
+ {isLoading && (
+
+ );
+};
+
+export default Favorites;
diff --git a/src/pages/NetworkErrorPage.tsx b/src/pages/NetworkErrorPage.tsx
new file mode 100644
index 00000000..318324d0
--- /dev/null
+++ b/src/pages/NetworkErrorPage.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import {Button, Error} from '../components/ui';
+import { SEO } from '../components';
+import {HomeIcon} from "@heroicons/react/24/outline";
+
+interface NetworkErrorPageProps {
+ message?: string;
+ onRetry?: () => void;
+}
+
+interface LocationState {
+ message?: string;
+ from?: string;
+}
+
+/**
+ * NetworkErrorPage component
+ * Displays an error page when there's a network error
+ */
+const NetworkErrorPage: React.FC
+
+
+ {/* Error state */}
+ {isError && (
+ Your Favorite Cats
+A collection of cat images you've saved as favorites
+
+
+ )}
+
+ {/* Favorites grid */}
+ {favorites && favorites.length > 0 && (
+
+ {favorites.map((favorite: FavoriteItem) => (
+ handleCatClick(favorite.image, favorite.id)}
+ >
+
+ View details
+
+
+ ))}
+
+ )}
+
+ {/* Empty state */}
+ {!isLoading && (!favorites || favorites.length === 0) && !isError && (
+
+
+ )}
+
+ {/* Cat image modal - show whenever selectedImageId is set */}
+ {selectedImageId && (
+
+
+ No favorites yet
+You haven't added any cats to your favorites yet.
+
+
+
+
+ 0 ? cats[0].url : undefined}
+ jsonLd={jsonLd}
+ />
+ refetch()}
+ variant="error"
+ className="mb-6"
+ />
+ )}
+
+ {/* Loading state for initial load */}
+ {isLoading && cats.length === 0 && (
+
+ );
+};
+
+export default RandomCats;
diff --git a/src/store/favoriteStore.ts b/src/store/favoriteStore.ts
new file mode 100644
index 00000000..1a26b026
--- /dev/null
+++ b/src/store/favoriteStore.ts
@@ -0,0 +1,36 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type { FavoritesState } from '../types';
+
+/**
+ * Create a Zustand store for managing favorite cats
+ * Uses the persist middleware to save favorites to localStorage
+ */
+const useFavoriteStore = create
+
+
+ {/* Error state */}
+ {isError && cats.length === 0 && (
+ Random Cats
+Discover adorable cat photos from our collection
+
+
+ )}
+
+ {/* Cat images grid */}
+ {cats.length > 0 && (
+
+ {cats.map((cat) => (
+ handleCatClick(cat.id)}
+ >
+
+ View details
+
+
+ ))}
+
+ )}
+
+ {/* Empty state */}
+ {!isLoading && cats.length === 0 && !isError && (
+
+
+ )}
+
+ {/* Load more button */}
+ {cats.length > 0 && (
+
+
+
+ No cats found
+Try refreshing the page or check back later.
+
+
+
+
+
+
+ )}
+
+ {/* Cat image modal - show whenever selectedImageId is set */}
+ {selectedImageId && (
+