Commit ab7595dd authored by 백승민's avatar 백승민
Browse files

slide pagination (not done)

parent 18cf7518
import React from "react";
type num = {
total: number,
// total: number,
page: number,
setPage: Function
}
export default function Pagination ({total, page, setPage} : num) {
const numPages = Math.ceil(total / 15);
// export function PaginationLeft ({total, page, setPage} : num) {
// const numPages = Math.ceil(total / 15);
export function PaginationLeft ({ page, setPage} : num) {
const numPages = 3
return (
<div>
<button onClick={() => setPage(page - 1)} disabled={page === 1}>
......@@ -22,7 +23,16 @@ export default function Pagination ({total, page, setPage} : num) {
{i + 1}
</button>
))} */}
</div>
);
};
// export function PaginationRight ({total, page, setPage} : num) {
// const numPages = Math.ceil(total / 15);
export function PaginationRight ({ page, setPage} : num) {
const numPages = 3;
return (
<div>
<button onClick={() => setPage(page + 1)} disabled={page === numPages}>
&gt;
</button>
......
......@@ -3,7 +3,7 @@ import { Outlet, useSearchParams } from "react-router-dom";
import Theme from "./theme";
import Citylist from "../Pages/citylist";
import { getPicure } from "../Pages/pic";
import Pagination from "../Pages/picpagination";
import { PaginationLeft ,PaginationRight} from "../Pages/picpagination";
const initSearchParams = { theme: "", city: "" };
......@@ -12,7 +12,7 @@ export default function Body() {
const [searchParams, setSearchParams] = useSearchParams(initSearchParams);
const [page, setPage] = useState(1);
const offset = (page - 1) * limit;
const [selected, setSelected] = useState(1);
let getPics = getPicure();
useEffect(() => {
......@@ -48,13 +48,45 @@ export default function Body() {
);
});
const pre = () =>{
setSelected(selected -1)
};
const next = () =>{
setSelected(selected + 1)
};
return (
<div className="flex flex-col px-1 py-1">
<Theme handleClick={themeHandleClick} />
<div className="flex flex-col md:flex-row py-10 ">
<div className="w-50">
<Citylist handleClick={cityHandleClick} />
<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>
<div className="flex flex-col">
<div>
<button onClick={pre} disabled={selected === 1}>&lt;{selected}</button>
<button onClick={next} disabled={selected === 3}>&gt;</button>
</div>
<div >
<div className=" md:mr-10 md:basis-4/5 overflow-hidden">
<div className=" flex flex-row transition duration-500 relative" style={{"transform": 'translate(-' + (selected-1)*100 + '%)'}}>
<img className = "border-2"src="https://t1.daumcdn.net/cfile/tistory/9947E0365C31C1BF0E"/>
<img className = "border-2"src="https://t1.daumcdn.net/cfile/tistory/9947E0365C31C1BF0E"/>
<img className = "border-2"src="https://t1.daumcdn.net/cfile/tistory/9947E0365C31C1BF0E"/>
</div>
</div>
</div>
</div>
</div>
<Outlet />
</div>
// Body Page
);
}
{/* <div className=" md:mr-10 md:basis-4/5 grid grid-rows-3 grid-cols-5"></div> */}
{/* {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}
......@@ -65,13 +97,6 @@ export default function Body() {
/>
<p className="text-center text-xs">{pic.name}</p>
</div>
))}
<Pagination total={Idpics.length} page={page} setPage={setPage} />
</div>
</div>
<Outlet />
</div>
// Body Page
);
}
))} */}
{/* <PaginationLeft total={Idpics.length} page={page} setPage={setPage} /> */}
{/* <PaginationRight total={Idpics.length} page={page} setPage={setPage} /> */}
\ No newline at end of file
......@@ -5,15 +5,18 @@ module.exports = {
extend: {
keyframes: {
wave: {
'0%': { left: '100' },
'0%': { left: '100%' },
'4%': { left: '0' },
'33.33%': { left: '0' },
'37.33%': { left: '-100' },
'100%': { left: '-100' },
'37.33%': { left: '-100%' },
'66.66%': { left: '-100%' },
'70.66%': { left: '-200%' },
'99.99%': { left: '-200%' },
'100%': { left: '0%' },
}
},
animation: {
wave : 'wave 10s ease-in-out'
wave : 'wave 12s ease-in-out'
}
},
},
......
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