Commit 7c259f47 authored by 백승민's avatar 백승민
Browse files

slide pagination(not done yet)

parent 81cba2c9
...@@ -15,13 +15,13 @@ export default function Pagination ({total, page, setPage} : num) { ...@@ -15,13 +15,13 @@ export default function Pagination ({total, page, setPage} : num) {
< <
</button> </button>
{Array(numPages) {/* {Array(numPages)
.fill(1) .fill(1)
.map((_, i) => ( .map((_, i) => (
<button key={i + 1} onClick={() => setPage(i + 1)}> <button key={i + 1} onClick={() => setPage(i + 1)}>
{i + 1} {i + 1}
</button> </button>
))} ))} */}
<button onClick={() => setPage(page + 1)} disabled={page === numPages}> <button onClick={() => setPage(page + 1)} disabled={page === numPages}>
&gt; &gt;
......
...@@ -53,7 +53,7 @@ export default function Body() { ...@@ -53,7 +53,7 @@ export default function Body() {
<Theme handleClick={themeHandleClick} /> <Theme handleClick={themeHandleClick} />
<div className="flex flex-col md:flex-row py-10 "> <div className="flex flex-col md:flex-row py-10 ">
<Citylist handleClick={cityHandleClick} /> <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) => ( {Idpics.slice(offset, offset + limit).map((pic, index: number) => (
<div <div
className="m-1 shrink-0 bg-gray-200 rounded overflow-hidden shadow-md" className="m-1 shrink-0 bg-gray-200 rounded overflow-hidden shadow-md"
...@@ -69,6 +69,7 @@ export default function Body() { ...@@ -69,6 +69,7 @@ export default function Body() {
<Pagination total={Idpics.length} page={page} setPage={setPage} /> <Pagination total={Idpics.length} page={page} setPage={setPage} />
</div> </div>
</div> </div>
<Outlet /> <Outlet />
</div> </div>
// Body Page // Body Page
......
...@@ -2,7 +2,20 @@ ...@@ -2,7 +2,20 @@
module.exports = { module.exports = {
content: ["./src/**/*.{html,js,jsx,ts,tsx}"], content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
theme: { 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: [], plugins: [],
}; };
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment