+
+
+ {Array.from({ length: 5 }).map((_, index) => (
+
+
+ );
+ } else if (isError || !data || data.length === 0) {
+ content = (
+
+ Something went wrong. No images were returned.
+
+ );
+ } else {
+ content = (
+ <>
+
+ {data.map((image) => {
+ const isActive = image.id === selectedImage?.id;
+ return (
+
+ );
+ })}
+
+
+ );
+ }
+
+ return (
+
+
+ );
+ } else if (isError || !data) {
+ content = (
+
+
+ );
+ } else {
+ const breed = data.breeds?.[0];
+ content = (
+ <>
+ Could not load image
+
+ 
+
+ {breed && (
+
+
+
+
+ )}
+
+ );
+ }
+
+ return (
+ {breed.name}
+{breed.temperament}
+
+
+ );
+
+ if (isError) {
+ return (
+
+
+ );
+};
+
+export default NotFoundPage;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
new file mode 100644
index 00000000..e10c507a
--- /dev/null
+++ b/src/pages/index.tsx
@@ -0,0 +1,8 @@
+import { lazy } from 'react';
+
+const CatsPage = lazy(() => import('./CatsPage'));
+const BreedsPage = lazy(() => import('./BreedsPage'));
+const FavouritesPage = lazy(() => import('./FavouritesPage'));
+const NotFoundPage = lazy(() => import('./NotFoundPage'));
+
+export { CatsPage, BreedsPage, FavouritesPage, NotFoundPage };
diff --git a/src/providers/QueryClientProvider.tsx b/src/providers/QueryClientProvider.tsx
new file mode 100644
index 00000000..43d781c7
--- /dev/null
+++ b/src/providers/QueryClientProvider.tsx
@@ -0,0 +1,22 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import React from 'react';
+
+const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ refetchOnWindowFocus: false,
+ retry: 0,
+ staleTime: 5 * 60 * 1000,
+ },
+ },
+});
+
+interface Props {
+ children: React.ReactNode;
+}
+
+export function ClientProvider({ children }: Props) {
+ return (
+
+
+
+ Page Not Found
+ ++ Looks like the page wandered off… just like a curious cat. +
+ + + Back to Cats + +
+
+
+ );
+};
+
+export default ActionButton;
diff --git a/src/shared/components/Card.tsx b/src/shared/components/Card.tsx
new file mode 100644
index 00000000..e3f45215
--- /dev/null
+++ b/src/shared/components/Card.tsx
@@ -0,0 +1,57 @@
+import { CheckIcon } from '@/components/icons';
+import clsx from 'clsx';
+
+interface CardProps {
+ catId: string;
+ imageUrl: string;
+ onClick: (id: string) => void;
+ alt?: string;
+ isSelectable?: boolean;
+ isSelected?: boolean;
+}
+
+const Card = ({
+ catId,
+ imageUrl,
+ onClick,
+ alt,
+ isSelectable,
+ isSelected,
+}: CardProps) => {
+ return (
+ onClick(catId)}
+ className={clsx(
+ 'cursor-pointer',
+ 'rounded-lg',
+ 'overflow-hidden',
+ 'bg-gray-800',
+ 'hover:bg-gray-700',
+ 'transition',
+ 'shadow-md',
+ 'relative',
+ isSelected && 'ring-2 ring-indigo-600'
+ )}
+ >
+ {isSelectable && (
+ 
+
+ );
+};
+
+export default Card;
diff --git a/src/shared/components/CatGrid.tsx b/src/shared/components/CatGrid.tsx
new file mode 100644
index 00000000..70c3f981
--- /dev/null
+++ b/src/shared/components/CatGrid.tsx
@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+import clsx from 'clsx';
+
+interface CatGridProps {
+ children: ReactNode;
+}
+
+const CatGrid = ({ children }: CatGridProps) => {
+ return (
+
+ {isSelected ?
+ )}
+
+ {children}
+
+ );
+};
+export default CatGrid;
diff --git a/src/shared/components/CatGridSkeleton.tsx b/src/shared/components/CatGridSkeleton.tsx
new file mode 100644
index 00000000..76dc24bb
--- /dev/null
+++ b/src/shared/components/CatGridSkeleton.tsx
@@ -0,0 +1,22 @@
+import CatGrid from './CatGrid';
+import Skeleton from './Skeleton';
+
+export interface CatGridSkeletonProps {
+ count?: number;
+}
+
+const CatGridSkeleton = ({ count = 10 }: CatGridSkeletonProps) => {
+ return (
+
+
+ );
+ }
+
+ return this.props.children;
+ }
+}
diff --git a/src/shared/components/ErrorFallback.tsx b/src/shared/components/ErrorFallback.tsx
new file mode 100644
index 00000000..176e4f63
--- /dev/null
+++ b/src/shared/components/ErrorFallback.tsx
@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+import { useNotification } from '@/shared/utils/useNotification';
+
+interface ErrorFallbackProps {
+ message?: string;
+}
+
+export const ErrorFallback = ({
+ message = 'Failed to load content.',
+}: ErrorFallbackProps) => {
+ const { error: notifyError } = useNotification();
+
+ useEffect(() => {
+ notifyError(message);
+ }, [notifyError, message]);
+
+ return Oops! Something went wrong.
+We're sorry for the inconvenience. Please try again later.
+ {/* Optionally show error details in development */} + {import.meta.env.VITE_NODE_ENV === 'development' && + this.state.error && ( +
+ {this.state.error.message}
+
+ {this.state.error.stack} +
+ )}
+ + {this.state.error.stack} +
{message}
;
+};
diff --git a/src/shared/components/Layout.tsx b/src/shared/components/Layout.tsx
new file mode 100644
index 00000000..940dbe47
--- /dev/null
+++ b/src/shared/components/Layout.tsx
@@ -0,0 +1,56 @@
+import { Outlet, NavLink } from 'react-router-dom';
+import clsx from 'clsx';
+import { Toaster } from 'sonner';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { ErrorBoundary } from '@shared/components';
+import { ErrorFallback } from '@/shared/components/ErrorFallback';
+
+const navLinks = [
+ { to: '/cats', label: 'Cats' },
+ { to: '/breeds', label: 'Breeds' },
+ { to: '/favourites', label: 'Favourites' },
+];
+
+const Layout = () => {
+ return (
+
+
+
+
+
+
+ );
+};
+export default Layout;
diff --git a/src/shared/components/Loader.tsx b/src/shared/components/Loader.tsx
new file mode 100644
index 00000000..7b0c07e9
--- /dev/null
+++ b/src/shared/components/Loader.tsx
@@ -0,0 +1,24 @@
+const Loader = () => {
+ return (
+
+
+
+
+
+ Loading...
+
+ );
+};
+export default Loader;
diff --git a/src/shared/components/Modal.tsx b/src/shared/components/Modal.tsx
new file mode 100644
index 00000000..298e97ef
--- /dev/null
+++ b/src/shared/components/Modal.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import {
+ Dialog,
+ DialogClose,
+ DialogContent,
+ DialogDescription,
+ DialogTitle,
+} from '@/components/ui/dialog';
+import { TriangleAlertIcon } from '@/components/icons';
+import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
+import { ErrorBoundary } from './ErrorBoundary';
+import clsx from 'clsx';
+
+export interface ModalProps {
+ isOpen: boolean;
+ hasCloseBtn?: boolean;
+ onClose?: () => void;
+ children: React.ReactNode;
+ fallbackMessage: string;
+}
+
+const Modal = ({
+ isOpen,
+ hasCloseBtn = true,
+ onClose,
+ children,
+ fallbackMessage,
+}: ModalProps) => {
+ const handleClose = () => {
+ onClose?.();
+ };
+
+ return (
+
+ );
+};
+
+export default Modal;
diff --git a/src/shared/components/Skeleton.tsx b/src/shared/components/Skeleton.tsx
new file mode 100644
index 00000000..2d9af730
--- /dev/null
+++ b/src/shared/components/Skeleton.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export interface SkeletonProps extends React.HTMLAttributes