slide pagination(not done yet)

frontend/src/Pages/picpagination.tsx

@@ -15,13 +15,13 @@ export default function Pagination ({total, page, setPage} : num) {
                 <
             </button>
 
-            {Array(numPages)
+            {/* {Array(numPages)
                 .fill(1)
                 .map((_, i) => (
                     <button key={i + 1} onClick={() => setPage(i + 1)}>
                         {i + 1}
                     </button>
-                ))}
+                ))} */}
 
             <button onClick={() => setPage(page + 1)} disabled={page === numPages}>
                 &gt;

frontend/src/home/body.tsx

@@ -53,11 +53,11 @@ export default function Body() {
       <Theme handleClick={themeHandleClick} />
       <div className="flex flex-col md:flex-row py-10 ">
         <Citylist handleClick={cityHandleClick} />
-        <div className="flex-row md:mr-10 md:basis-4/5 grid grid-rows-3 grid-cols-5">
+        <div className=" md:mr-10 md:basis-4/5 grid grid-rows-3 grid-cols-5">
           {Idpics.slice(offset, offset + limit).map((pic, index: number) => (
             <div
               className="m-1 shrink-0 bg-gray-200 rounded overflow-hidden shadow-md"
-              key={index}
+              key={index} 
             >
               <img
                 src={pic.url}
@@ -65,10 +65,11 @@ export default function Body() {
               />
               <p className="text-center text-xs">{pic.name}</p>
             </div>
-          ))}
-          <Pagination total={Idpics.length} page={page} setPage={setPage} />
+          ))} 
+        <Pagination total={Idpics.length} page={page} setPage={setPage} />
         </div>
       </div>
+      
       <Outlet />
     </div>
     // Body Page

frontend/tailwind.config.js

@@ -2,7 +2,20 @@
 module.exports = {
   content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      keyframes: {
+        wave: {
+          '0%': { left: '100' },
+          '4%': { left: '0' },
+          '33.33%': { left: '0' },
+          '37.33%': { left: '-100' },
+          '100%': { left: '-100' },
+        }
+      },
+      animation: {
+        wave : 'wave 10s ease-in-out'
+      }
+    },
   },
   plugins: [],
 };