شروع کار بروی درست کردن صفحه بندی | 45

temp
mahdi andalib 3 years ago
parent ade3753679
commit fac4b29c79
  1. 57
      src/views/Products/layouts/Desktop/Main.js
  2. 18
      src/views/Products/layouts/Desktop/Posts.js

@ -1,4 +1,6 @@
import React, { useEffect, useState } from "react";
import axios from "axios";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { ScrollingCarousel, Carousel } from "@trendyol-js/react-carousel";
@ -10,6 +12,7 @@ import { book, publicApi } from "../../../../redux/actions";
import moment from "jalali-moment";
import dropdownIcon from "../../../../assets/icons/dropdown-blue.svg";
import Posts from "./Posts";
export const Main = ({
books,
@ -124,11 +127,32 @@ export const Main = ({
));
};
// pagination
const [posts, setPosts] = useState([]);
const [loading, setLoading] = useState(false);
const [currentPage, setCurrentPage] = useState(1);
const [postsPerPage, setPostsPerPage] = useState(10);
useEffect(() => {
const fetchPosts = async () => {
setLoading(true);
const res = await axios.get("https://jsonplaceholder.typicode.com/posts");
setPosts(res.data);
setLoading(false);
};
fetchPosts();
}, []);
return (
<div
className="flex flex-col w-3/4 pb-20 min-h-screen"
style={{ minWidth: "calc(100% * 3 / 4)" }}
>
<div className="bg-red-400 ">
<h1 className="mb-5">My Blog</h1>
<Posts posts={posts} loading={loading} />
</div>
<div className="flex w-full bg-blue rounded-lg border border-solid border-gray-200 p-2 items-center my-1.5 justify-center text-blue52">
<div className="flex text-sm items-center mr-2 ml-4">
<svg
@ -285,36 +309,3 @@ const mapDispatchToProps = {
};
export default connect(mapStateToProps, mapDispatchToProps)(Main);
{
/* <div className="">
{(filterOptions?.productType
? filterOptions.productType === "دوره ویدئویی"
: true) && (
<Carousel
show={Math.round(window.innerWidth / 400)}
slide={2}
swiping={true}
useArrowKeys={true}
className=""
transition={0.5}
rightArrow={
<img
className="absolute top-1/2 transform -translate-y-1/2 cursor-pointer p-2 -rotate-90"
src={dropdownIcon}
alt=""
/>
}
leftArrow={
<img
className="absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer rotate-90 p-2 -left-3"
src={dropdownIcon}
alt=""
/>
}
>
{Items(4)}
</Carousel>
)}
</div> */
}

@ -0,0 +1,18 @@
import React from "react";
const Posts = ({ posts, loading }) => {
if (loading) {
return <h2>loading...</h2>;
}
return (
<ul className="">
{posts.map((post) => (
<li key={post.id} className="">
{post.title}
</li>
))}
</ul>
);
};
export default Posts;
Loading…
Cancel
Save