Skip to content

Commit 9dd7af1

Browse files
feraranasferaranas
feraranas
authored and
feraranas
committed
final touches & tailwind styles
1 parent 2447ab7 commit 9dd7af1

File tree

10 files changed

+27
-18
lines changed

10 files changed

+27
-18
lines changed

‎public/favicon.ico

-3.78 KB
Binary file not shown.

‎public/index.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
5+
<link rel="icon" href="%PUBLIC_URL%/smile.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<meta name="theme-color" content="#000000" />
88
<meta
99
name="description"
10-
content="Web site created using create-react-app"
10+
content="Web site created with love"
1111
/>
12-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
12+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/smile.png" />
1313
<!--
1414
manifest.json provides metadata used when your web app is installed on a
1515
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,7 +24,7 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>React App</title>
27+
<title>People love cats</title>
2828
</head>
2929
<body>
3030
<noscript>You need to enable JavaScript to run this app.</noscript>

‎public/logo192.png

-5.22 KB
Binary file not shown.

‎public/logo512.png

-9.44 KB
Binary file not shown.

‎public/manifest.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@
33
"name": "Create React App Sample",
44
"icons": [
55
{
6-
"src": "favicon.ico",
6+
"src": "smile.ico",
77
"sizes": "64x64 32x32 24x24 16x16",
88
"type": "image/x-icon"
99
},
1010
{
11-
"src": "logo192.png",
11+
"src": "smile.png",
1212
"type": "image/png",
1313
"sizes": "192x192"
1414
},
1515
{
16-
"src": "logo512.png",
16+
"src": "smile.png",
1717
"type": "image/png",
1818
"sizes": "512x512"
1919
}

‎public/smile.ico

13 KB
Binary file not shown.

‎public/smile.png

24.6 KB
Loading

‎src/components/CatOwnersList.tsx

+19-9
Original file line numberDiff line numberDiff line change
@@ -49,27 +49,37 @@ const CatOwnersList = () => {
4949
});
5050

5151

52-
if (isLoading) return <div>Loading...</div>;
53-
if (error) return <div>Error loading data</div>;
52+
if (isLoading) return <div className="fixed top-0 left-0 right-0 bottom-0 bg-slate-950 flex items-center justify-center font-mono text-white">
53+
Loading...
54+
</div>
55+
56+
if (error) return <div className="fixed top-0 left-0 right-0 bottom-0 bg-slate-950 flex items-center justify-center font-mono text-white">
57+
Loading...
58+
</div>
59+
5460

5561
return (
56-
<div className="p-4 bg-slate-900 font-mono">
57-
<h1 className="text-2xl font-bold mb-4">Cat Owner List</h1>
62+
<div className="items-center p-4 bg-slate-950 font-mono">
63+
<div className="flex justify-center ">
64+
<h1 className="text-4xl items-center font-bold text-gray-400 mb-4">😻</h1>
65+
<div className="flex items-center justify-center w-8 h-8 text-xs font-medium text-white bg-gray-700 border-2 border-white rounded-full hover:bg-gray-600 dark:border-gray-800">+99</div>
66+
</div>
5867

5968
<InfiniteScroll
6069
dataLength={paginatedData?.pages.flatMap(page => page.data).length || 0}
6170
next={fetchNextPage}
6271
hasMore={hasNextPage}
63-
loader={<h4>Loading more...</h4>}
72+
loader={<h4 className='m-auto p-5 text-center text-slate-200 text-2xl p-10 w-full bg-slate-500 rounded-lg'>Loading more cat lovers...</h4>}
6473
endMessage={<p>No more data</p>}
6574
>
6675
<ul className="space-y-4">
6776
{paginatedData?.pages.flatMap(page => page.data).map((owner, index) => (
68-
<li key={index} className="flex items-center space-x-4 border p-4 rounded-lg shadow">
69-
<img src={owner.ownerPicture} alt="Owner" className="w-16 h-16 rounded-full" />
77+
<li key={index}
78+
className="flex items-center m-auto space-x-4 w-3/5 border-2 border-neutral-900 p-4 rounded-lg shadow bg-slate-800 hover:bg-gray-900">
79+
<img src={owner.ownerPicture} alt="Owner" className="w-16 h-16 border-2 border-neutral-800 rounded-3xl " />
7080
<div>
71-
<p className="text-xl font-semibold">{owner.ownerName}</p>
72-
<p className="text-gray-600">{owner.catFact}</p>
81+
<p className="text-xl font-semibold text-slate-400">{owner.ownerName}</p>
82+
<p className="text-slate-500 font-light">{owner.catFact}</p>
7383
</div>
7484
</li>
7585
))}

‎src/utils/getCats.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,4 @@ export const getCats = async (pageNum: number | undefined): Promise<CatApiRespon
2121

2222
// return data.data.map((e: any) => e.fact);
2323
return data
24-
}
24+
}

‎tailwind.config.js

-1
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,3 @@ module.exports = {
99
},
1010
plugins: [],
1111
}
12-

0 commit comments

Comments
 (0)