classify web
This commit is contained in:
Husanjonazamov
203
components/PagesComponent/BlogDetail/BlogDetailPage.jsx
Normal file
203
components/PagesComponent/BlogDetail/BlogDetailPage.jsx
Normal file
@@ -0,0 +1,203 @@
|
||||
"use client";
|
||||
import BreadCrumb from "@/components/BreadCrumb/BreadCrumb";
|
||||
import { setBreadcrumbPath } from "@/redux/reducer/breadCrumbSlice";
|
||||
import { formatDateMonthYear, t, truncate } from "@/utils";
|
||||
import { getBlogsApi } from "@/utils/api";
|
||||
import { useEffect, useState } from "react";
|
||||
import { FaEye, FaRegCalendarCheck } from "react-icons/fa";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import parse from "html-react-parser";
|
||||
import {
|
||||
FacebookShareButton,
|
||||
TwitterShareButton,
|
||||
WhatsappShareButton,
|
||||
} from "react-share";
|
||||
import { BiLink, BiLogoFacebook, BiLogoWhatsapp } from "react-icons/bi";
|
||||
import { RiTwitterXLine } from "react-icons/ri";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { toast } from "sonner";
|
||||
import BlogCard from "../LandingPage/BlogCard";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import { getCompanyName } from "@/redux/reducer/settingSlice";
|
||||
import PopularPosts from "../Blogs/PopularPosts";
|
||||
import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
|
||||
import NoData from "@/components/EmptyStates/NoData";
|
||||
import PageLoader from "@/components/Common/PageLoader";
|
||||
import CustomImage from "@/components/Common/CustomImage";
|
||||
|
||||
const BlogDetailPage = ({ slug }) => {
|
||||
const CurrentLanguage = useSelector(CurrentLanguageData);
|
||||
const path = usePathname();
|
||||
const dispatch = useDispatch();
|
||||
const admin = useSelector((state) => state?.Settings?.data?.data?.admin);
|
||||
const CompanyName = useSelector(getCompanyName);
|
||||
const [blogData, setBlogData] = useState([]);
|
||||
const [relatedBlogs, setRelatedBlogs] = useState([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const currentUrl = `${process.env.NEXT_PUBLIC_WEB_URL}${path}`;
|
||||
|
||||
const langCode = CurrentLanguage?.code?.toUpperCase();
|
||||
|
||||
useEffect(() => {
|
||||
getBlogsData();
|
||||
}, [CurrentLanguage.id]);
|
||||
|
||||
const getBlogsData = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const res = await getBlogsApi.getBlogs({ slug: slug, views: 1 });
|
||||
setBlogData(res?.data?.data?.data[0]);
|
||||
const title = res?.data?.data?.data[0]?.title;
|
||||
dispatch(
|
||||
setBreadcrumbPath([
|
||||
{
|
||||
name: t("ourBlogs"),
|
||||
slug: "/blogs",
|
||||
},
|
||||
{
|
||||
name: truncate(title, 30),
|
||||
},
|
||||
])
|
||||
);
|
||||
setRelatedBlogs(res?.data?.other_blogs);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCopyUrl = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(currentUrl);
|
||||
toast(t("copyToClipboard"));
|
||||
} catch (error) {
|
||||
console.error("Error copying to clipboard:", error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<BreadCrumb />
|
||||
<div className="container">
|
||||
<div className="flex flex-col mt-8 gap-12">
|
||||
<div className="grid md:grid-cols-12 grid-col-1 gap-6">
|
||||
{isLoading ? (
|
||||
<div className="col-span-1 md:col-span-8">
|
||||
<PageLoader />
|
||||
</div>
|
||||
) : blogData ? (
|
||||
<div className="col-span-1 md:col-span-8 flex flex-col gap-8">
|
||||
<h1 className="text-3xl font-medium">
|
||||
{blogData?.translated_title || blogData?.title}
|
||||
</h1>
|
||||
<div className="flex items-center flex-wrap gap-2 opacity-60 text-sm">
|
||||
<div className="flex gap-2 items-center">
|
||||
<CustomImage
|
||||
src={admin?.profile}
|
||||
alt={admin?.name || "Admin Image"}
|
||||
height={28}
|
||||
width={28}
|
||||
className="size-7 aspect-square rounded-md"
|
||||
/>
|
||||
<p>{admin?.name}</p>
|
||||
</div>
|
||||
<div className="border-r h-[16px]"></div>
|
||||
<div className="flex items-center gap-1">
|
||||
<FaEye size={16} />
|
||||
{t("views")}: {blogData?.views}
|
||||
</div>
|
||||
<div className="border-r h-[16px] "></div>
|
||||
<div className="flex gap-2 items-center">
|
||||
<FaRegCalendarCheck size={16} color="" />
|
||||
{t("postedOn")}: {formatDateMonthYear(blogData?.created_at)}
|
||||
</div>
|
||||
</div>
|
||||
<CustomImage
|
||||
src={blogData?.image}
|
||||
alt={blogData?.title || "Blog Image"}
|
||||
height={838}
|
||||
width={500}
|
||||
className="w-full h-auto aspect-[838/500] rounded-lg"
|
||||
/>
|
||||
<div className="max-w-full prose lg:prose-lg">
|
||||
{parse(
|
||||
blogData?.translated_description ||
|
||||
blogData?.description ||
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
<div className="border-t pt-4 flex items-center justify-between ">
|
||||
<div className="flex flex-col gap-2 opacity-60">
|
||||
<span className="pb-2 font-sm ">{t("shareThis")}</span>
|
||||
<div className="flex gap-3">
|
||||
<button className="border-none" onClick={handleCopyUrl}>
|
||||
<BiLink size={24} />
|
||||
</button>
|
||||
<FacebookShareButton
|
||||
url={currentUrl}
|
||||
title={currentUrl + CompanyName}
|
||||
hashtag={CompanyName}
|
||||
>
|
||||
<BiLogoFacebook size={24} />
|
||||
</FacebookShareButton>
|
||||
<TwitterShareButton url={currentUrl}>
|
||||
<RiTwitterXLine size={24} />
|
||||
</TwitterShareButton>
|
||||
<WhatsappShareButton
|
||||
url={currentUrl}
|
||||
title={
|
||||
blogData?.translated_title ||
|
||||
blogData?.title + "" + " - " + "" + CompanyName
|
||||
}
|
||||
hashtag={CompanyName}
|
||||
>
|
||||
<BiLogoWhatsapp size={24} />
|
||||
</WhatsappShareButton>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{blogData?.translated_tags && (
|
||||
<div className="flex gap-2 items-center flex-wrap justify-end">
|
||||
{blogData?.translated_tags?.map((e) => (
|
||||
<Badge
|
||||
key={e}
|
||||
variant="outline"
|
||||
className="font-normal"
|
||||
>
|
||||
{e}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="col-span-1 md:col-span-8">
|
||||
<NoData name={t("blog")} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="col-span-1 md:col-span-4">
|
||||
<PopularPosts langCode={langCode} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-8 flex-col">
|
||||
<h1 className="text-2xl font-medium">{t("relatedArticle")}</h1>
|
||||
<div className="grid md:grid-cols-12 grid-cols-1 gap-4">
|
||||
{relatedBlogs &&
|
||||
relatedBlogs?.map((blog, index) => (
|
||||
<div className="md:col-span-4 col-span-12" key={index}>
|
||||
<BlogCard blog={blog} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
export default BlogDetailPage;
|
||||
Reference in New Issue
Block a user