Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Aastu.web.g2.mintesnot markos.final #307

Open
wants to merge 36 commits into
base: main
Choose a base branch
from
Open

Aastu.web.g2.mintesnot markos.final #307

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
b5c556b
Fix(aastu-web-g2): add upload image
mintesnot-markos Aug 24, 2023
d8136fe
Fix(aastu-web-g2):add style to add blog
mintesnot-markos Aug 25, 2023
ceeaecc
Fix(aastu-web-g2): fix bugs - add blog page
mintesnot-markos Aug 25, 2023
a23959f
Fix(aastu-web-g2): fix bugs - add blog
mintesnot-markos Aug 25, 2023
0cbaf09
fix (#219)
Metsehafe-Eyasu Aug 24, 2023
f812908
feat(AASTU-web-G2): Add RTK and organize some pages (#223)
natanim-ashenafi Aug 25, 2023
821ccb2
fix(AASTU-web-G2):login error fix (#225)
solomon-abate-a2sv Aug 25, 2023
96edb26
Update pr_title_check.yml
bruk-tedla-a2sv Aug 25, 2023
00b37a6
feat(AAiT-mobile-2): Add Article Create/Update and Detail Screen (#222)
meraf00 Aug 25, 2023
6ad0702
feat(AASTU-web-G2): Some cleaning up (#228)
natanim-ashenafi Aug 25, 2023
7189866
aastu.web.g2.natanim ashenafi.some cleaning up (#232)
natanim-ashenafi Aug 25, 2023
23bc0f6
fix(AASTU-web-G2): Route some links (#233)
natanim-ashenafi Aug 25, 2023
aedee61
feat(aastu.web):Homepage-stories-responsivness (#229)
yoseph-shemeles-a2sv Aug 25, 2023
5af12c9
feat(aait.web.g3):Add redux store config (#221)
yohannes-07 Aug 25, 2023
a5440c7
(AASTU-web_g1): teampage completed (#234)
ruth-wossen-a2sv Aug 25, 2023
be16ee6
feat(aait.web.g3):Add blogs api, blog detail api and create blog api …
yohannes-07 Aug 25, 2023
2f9f688
feat(aait-mobile-g2): implement bloc for authentication feature (#224)
Temesgenzewude Aug 25, 2023
7dcf89a
feat(AAiT.mob.g2): add user bloc (#226)
NaolAklilu Aug 25, 2023
af0faef
Yohanse.auth.data (#236)
yohanse Aug 25, 2023
65ad8db
feat(AAiT-web_g3): add login and register page (#174)
dawit-andargachew Aug 25, 2023
860bf8d
aait.mobile.g3.abinet_onboarding_pages (#206)
abi26anamo Aug 25, 2023
6e1cc02
feat(aait-backend-2b.authentication): Add DTOs, Mocks for tesing and …
ffekirnew Aug 25, 2023
cb8776f
feat(AAiT-backend-1B) : add notifications for likes and comment creat…
AnaniyaT Aug 25, 2023
d6bec8a
Feat(AASTU-Web-G2): fix teams page (#247)
abel-getahun-a2sv Aug 25, 2023
7262e4c
feat(aastu-web-g1): profile pages integration done (#246)
zerubabel-kassahun-a2sv Aug 25, 2023
34858a6
Aastu.ruth.wossen.team.page (#249)
ruth-wossen-a2sv Aug 25, 2023
e59f9f9
Fix(aastu-web-g2): fix add blogs
mintesnot-markos Aug 25, 2023
5a728a0
Fix(aastu-web-g2): added protected route
mintesnot-markos Aug 25, 2023
7a91a7a
Fix(aastu-web-g2): integration
mintesnot-markos Aug 25, 2023
b57448c
Fix(aastu-web-g2): fix bugs in add blog
mintesnot-markos Aug 25, 2023
2310d97
Fix(aastu-web-g2): fix bugs in add blogs
mintesnot-markos Aug 28, 2023
4a53277
Fix(aastu-web-g2): fix bugs in add blog page
mintesnot-markos Aug 28, 2023
f3226a3
Fix(aastu-web-g2) fix bugs in blog
mintesnot-markos Aug 28, 2023
1326962
Fix(aastu-web-g2): final changes
mintesnot-markos Aug 28, 2023
0b11780
Fix(aastu-web-g2): Make add blog responsive
mintesnot-markos Aug 29, 2023
3d90942
fix(aastu-web-g2): fix bugs
mintesnot-markos Aug 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
183 changes: 70 additions & 113 deletions aastu/web/group-1/a2sv-blogs/src/components/blogs/BlogCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,124 +17,81 @@ export default function BlogCard() {
const currentItems = data?.slice(startIndex, endIndex + 1);

const options = { year: "numeric", month: "short", day: "2-digit" };

const handlePageChange = (page: number) => {
setCurrentPage(page);
};

const renderPageButtons = () => {
const pageButtons = [];
let startPage = 1;
let endPage = totalPages;

if (totalPages > 5) {
if (currentPage <= 3) {
endPage = 5;
} else if (currentPage >= totalPages - 2) {
startPage = totalPages - 4;
} else {
startPage = currentPage - 2;
endPage = currentPage + 2;
}
}

for (let page = startPage; page <= endPage; page++) {
pageButtons.push(
<button
key={page}
className={`px-2.5 rounded-md font-mono ${
currentPage === page
? "text-[#FFF] bg-[#264FAD]"
: "text-[#212934] bg-[#d9dee0]"
}`}
onClick={() => handlePageChange(page)}
>
{page}
</button>
);
}

return pageButtons;
};
console.log(data);
return (
<>
{currentItems?.map((item) => (
<Link className="w-full" href={`/blogs/${item._id}`}>
<div className="w-full border-t border-[#D7D7D7] py-5">
<div className="h-[25%] flex items-center gap-3 px-4">
<Image
className="w-14 h-14 rounded-full object-cover"
src={item.image}
alt=""
width={100}
height={100}
/>
<div className="flex flex-col gap-0.5">
<h1 className="font-montserrat font-semibold text-base leading-5 flex gap-0">
{item.author?.name}
<span className="flex items-center">
<svg
className="w-5 h-5 shrink-0"
viewBox="0 0 25 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12.5"
cy="12.5"
r="1.5"
fill="#121923"
stroke="#121923"
strokeWidth="1.2"
/>
</svg>
</span>
<span className="text-xs flex items-center text-[#868686]">
{new Date(item.updatedAt).toLocaleDateString(
"en-US",
options
)}
</span>
</h1>
<p className="font-montserrat font-semibold tracking-wide text-xs text-[#9c9c9c]">
{item.author?.role.toUpperCase()}
</p>
</div>
</div>
<div className="h-[60%] flex w- border border-black lg:flex-row flex-col items-center px-4 lg:gap-14 gap-5 py-5 justify-between">
<div className="flex flex-col">
<h1 className="font-montserrat text-xl font-black leading-9 text-black line-clamp-4">
{item.title}
</h1>
<p className="font-montserrat text-base font-normal leading-7 text-[#737373] line-clamp-4">
{item.description}
</p>
</div>
<Image
src={item.image}
alt=""
width={300}
height={200}
className="lg:w-72 w-full h-48 rounded-xl object-cover"
/>
{data?.map((item, index) => (
<div key={index} className="w-full h-80 border-t border-[#D7D7D7]">
<div className="h-[25%] flex items-center gap-3 px-4">
<Image
className="w-14 h-14 rounded-full object-cover"
src={item.image}
alt=""
width={100}
height={100}
/>
<div className="flex flex-col gap-0.5">
<h1 className="font-montserrat font-semibold text-base leading-5 flex gap-0">
{item.author?.name}
<span className="flex items-center">
<svg
className="w-5 h-5 shrink-0"
viewBox="0 0 25 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12.5"
cy="12.5"
r="1.5"
fill="#121923"
stroke="#121923"
stroke-width="1.2"
/>
</svg>
</span>
<span className="text-xs flex items-center text-[#868686]">
{new Date(item.updatedAt).toLocaleDateString(
"en-US",
options
)}
</span>
</h1>
<p className="font-montserrat font-semibold tracking-wide text-xs text-[#9c9c9c]">
{item.author?.role.toUpperCase()}
</p>
</div>
<div className="flex items-center bg-white">
{item?.tags?.map(
(tag, index) =>
tag && (
<ul
className="h-[15%] flex items-center gap-10 px-3 justify-start"
key={index}
>
<li className="px-5 py-1.5 font-montserrat font-semibold text-sm text-[#8E8E8E] bg-[#ededf0] rounded-full flex">
{tag}
</li>
</ul>
)
)}
</div>
<div className="h-[60%] flex items-center mx-auto px-4 gap-14 py-5">
<div className="flex flex-col">
<h1 className="font-montserrat text-xl font-black leading-9 text-black">
{item.title}
</h1>
<p className="font-montserrat text-base font-normal leading-7 text-[#737373]">
{item.description}
</p>
</div>
<Image
src={item.image}
alt=""
width={300}
height={200}
className="w-72 h-48 rounded-xl object-cover"
/>
</div>
<div className="flex items-center">
{item?.tags?.map((tag, index) => (
<ul
className="h-[15%] flex items-center gap-10 px-3 justify-start"
key={index}
>
<li className=" px-5 py-1.5 font-montserrat font-semibold text-sm text-[#8E8E8E] bg-[#ededf0] rounded-full flex">
{tag}
</li>
</ul>
))}
</div>
</Link>
</div>
))}

<div className="flex justify-center mb-10">
Expand Down
Loading