112 lines
4.1 KiB
JavaScript
112 lines
4.1 KiB
JavaScript
"use client";
|
|
import { useState, useEffect } from "react";
|
|
import CustomLoading from "@/app/component/loading/Custom";
|
|
import TextLoading from "@/app/component/loading/Text";
|
|
import Link from "next/link";
|
|
import { request } from "@/services/response";
|
|
|
|
function Head() {
|
|
const [topBlogs, setTopBlogs] = useState([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const fetchTopBlogs = async () => {
|
|
try {
|
|
setIsLoading(true);
|
|
const response = await request.getTopBlogs();
|
|
setTopBlogs(response || []);
|
|
} catch (error) {
|
|
console.error("Error fetching top blogs:", error);
|
|
setTopBlogs([]);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchTopBlogs();
|
|
}, []);
|
|
|
|
if (isLoading || topBlogs.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
const [firstBlog, secondBlog, thirdBlog, fourthBlog] = topBlogs;
|
|
|
|
return (
|
|
<>{/*
|
|
<div className="flex flex-col lg:flex-row mt-[40px] items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
|
|
{firstBlog && (
|
|
<Link href={`/blog/${firstBlog.uuid}`} className="w-full lg:w-1/2 cover-head-blogs">
|
|
<CustomLoading width="full" height={400}>
|
|
<img
|
|
src={firstBlog.images?.[0]?.url || "/assets/images/head-blogs-1.png"}
|
|
alt={firstBlog.title || "head blog"}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</CustomLoading>
|
|
<TextLoading width={150} height={20}>
|
|
<p className="text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]">
|
|
{firstBlog.title}
|
|
</p>
|
|
</TextLoading>
|
|
</Link>
|
|
)}
|
|
<div className="w-full lg:w-1/2 flex flex-col items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
|
|
<div className="w-full flex flex-col sm:flex-row items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
|
|
{secondBlog && (
|
|
<Link href={`/blog/${secondBlog.uuid}`} className="w-full cover-head-blogs">
|
|
<CustomLoading width="full" height={180}>
|
|
<img
|
|
src={secondBlog.images?.[0]?.url || "/assets/images/head-blogs-2.png"}
|
|
alt={secondBlog.title || "head blog"}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</CustomLoading>
|
|
<TextLoading width={150} height={20}>
|
|
<p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
|
|
{secondBlog.title}
|
|
</p>
|
|
</TextLoading>
|
|
</Link>
|
|
)}
|
|
{thirdBlog && (
|
|
<Link href={`/blog/${thirdBlog.uuid}`} className="w-full cover-head-blogs">
|
|
<CustomLoading width="full" height={180}>
|
|
<img
|
|
src={thirdBlog.images?.[0]?.url || "/assets/images/head-blogs-3.png"}
|
|
alt={thirdBlog.title || "head blog"}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</CustomLoading>
|
|
<TextLoading width={150} height={20}>
|
|
<p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
|
|
{thirdBlog.title}
|
|
</p>
|
|
</TextLoading>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
{fourthBlog && (
|
|
<Link href={`/blog/${fourthBlog.uuid}`} className="w-full cover-head-blogs">
|
|
<CustomLoading width="full" height={180}>
|
|
<img
|
|
src={fourthBlog.images?.[0]?.url || "/assets/images/head-blogs-4.png"}
|
|
alt={fourthBlog.title || "head blog"}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</CustomLoading>
|
|
<TextLoading width={150} height={20}>
|
|
<p className="text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]">
|
|
{fourthBlog.title}
|
|
</p>
|
|
</TextLoading>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
*/}</>
|
|
);
|
|
}
|
|
|
|
export default Head;
|