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

slide pagination (not done)

parent 18cf7518
import React from "react"; import React from "react";
type num = { type num = {
total: number, // total: number,
page: number, page: number,
setPage: Function setPage: Function
} }
export default function Pagination ({total, page, setPage} : num) { // export function PaginationLeft ({total, page, setPage} : num) {
const numPages = Math.ceil(total / 15); // const numPages = Math.ceil(total / 15);
export function PaginationLeft ({ page, setPage} : num) {
const numPages = 3
return ( return (
<div> <div>
<button onClick={() => setPage(page - 1)} disabled={page === 1}> <button onClick={() => setPage(page - 1)} disabled={page === 1}>
...@@ -22,7 +23,16 @@ export default function Pagination ({total, page, setPage} : num) { ...@@ -22,7 +23,16 @@ export default function Pagination ({total, page, setPage} : num) {
{i + 1} {i + 1}
</button> </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}> <button onClick={() => setPage(page + 1)} disabled={page === numPages}>
&gt; &gt;
</button> </button>
......
...@@ -3,7 +3,7 @@ import { Outlet, useSearchParams } from "react-router-dom"; ...@@ -3,7 +3,7 @@ import { Outlet, useSearchParams } from "react-router-dom";
import Theme from "./theme"; import Theme from "./theme";
import Citylist from "../Pages/citylist"; import Citylist from "../Pages/citylist";
import { getPicure } from "../Pages/pic"; import { getPicure } from "../Pages/pic";
import Pagination from "../Pages/picpagination"; import { PaginationLeft ,PaginationRight} from "../Pages/picpagination";
const initSearchParams = { theme: "", city: "" }; const initSearchParams = { theme: "", city: "" };
...@@ -12,7 +12,7 @@ export default function Body() { ...@@ -12,7 +12,7 @@ export default function Body() {
const [searchParams, setSearchParams] = useSearchParams(initSearchParams); const [searchParams, setSearchParams] = useSearchParams(initSearchParams);
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
const offset = (page - 1) * limit; const offset = (page - 1) * limit;
const [selected, setSelected] = useState(1);
let getPics = getPicure(); let getPics = getPicure();
useEffect(() => { useEffect(() => {
...@@ -48,25 +48,35 @@ export default function Body() { ...@@ -48,25 +48,35 @@ export default function Body() {
); );
}); });
const pre = () =>{
setSelected(selected -1)
};
const next = () =>{
setSelected(selected + 1)
};
return ( return (
<div className="flex flex-col px-1 py-1"> <div className="flex flex-col px-1 py-1">
<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} /> <div className="w-50">
<div className=" md:mr-10 md:basis-4/5 grid grid-rows-3 grid-cols-5"> <Citylist handleClick={cityHandleClick} />
{Idpics.slice(offset, offset + limit).map((pic, index: number) => ( </div>
<div <div className="flex flex-col">
className="m-1 shrink-0 bg-gray-200 rounded overflow-hidden shadow-md" <div>
key={index} <button onClick={pre} disabled={selected === 1}>&lt;{selected}</button>
> <button onClick={next} disabled={selected === 3}>&gt;</button>
<img </div>
src={pic.url} <div >
className="w-full h-10 md:h-20 object-center" <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 + '%)'}}>
<p className="text-center text-xs">{pic.name}</p> <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>
<Pagination total={Idpics.length} page={page} setPage={setPage} />
</div> </div>
</div> </div>
...@@ -75,3 +85,18 @@ export default function Body() { ...@@ -75,3 +85,18 @@ export default function Body() {
// Body Page // 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}
>
<img
src={pic.url}
className="w-full h-10 md:h-20 object-center"
/>
<p className="text-center text-xs">{pic.name}</p>
</div>
))} */}
{/* <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 = { ...@@ -5,15 +5,18 @@ module.exports = {
extend: { extend: {
keyframes: { keyframes: {
wave: { wave: {
'0%': { left: '100' }, '0%': { left: '100%' },
'4%': { left: '0' }, '4%': { left: '0' },
'33.33%': { left: '0' }, '33.33%': { left: '0' },
'37.33%': { left: '-100' }, '37.33%': { left: '-100%' },
'100%': { left: '-100' }, '66.66%': { left: '-100%' },
'70.66%': { left: '-200%' },
'99.99%': { left: '-200%' },
'100%': { left: '0%' },
} }
}, },
animation: { 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