102 lines
4.2 KiB
TypeScript
102 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { ChevronRight, Clock, Calendar, Bookmark, Share2, User, Link as LinkIcon, Check } from "lucide-react";
|
|
import { Blog, BlogTranslation } from "@/utilities/types/blog.type";
|
|
import Image from "next/image";
|
|
import { BACKEND_URL } from "@/utilities/constants/urls.constant";
|
|
import { formatDateByLocale } from "@/utilities/lib/format-date-by-locale";
|
|
import { useLocale, useTranslations } from "next-intl";
|
|
|
|
interface Props {
|
|
blog: Blog;
|
|
translation: BlogTranslation;
|
|
readingTime: number;
|
|
}
|
|
|
|
export default function ArticleHeader({ blog, translation, readingTime }: Props) {
|
|
const locale = useLocale();
|
|
const t = useTranslations("academy.single");
|
|
const isRtl = locale === "fa" || locale === "ar";
|
|
const [isCopied, setIsCopied] = useState(false);
|
|
|
|
const handleCopy = async () => {
|
|
try {
|
|
await navigator.clipboard.writeText(window.location.href);
|
|
setIsCopied(true);
|
|
setTimeout(() => setIsCopied(false), 2000);
|
|
} catch (err) {
|
|
null;
|
|
}
|
|
};
|
|
|
|
const handleShare = async () => {
|
|
if (navigator.share) {
|
|
try {
|
|
await navigator.share({
|
|
title: translation.title,
|
|
url: window.location.href,
|
|
});
|
|
} catch (err) {
|
|
null;
|
|
}
|
|
} else {
|
|
handleCopy();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<header className="mb-16">
|
|
<a href="/academy" className="inline-flex items-center mb-8 text-sm text-gray-400 transition-colors hover:text-orange-500">
|
|
<ChevronRight className={`w-4 h-4 ${isRtl ? "ml-1" : "mr-1 rotate-180"}`} />
|
|
{t("backToAcademy")}
|
|
</a>
|
|
<div className="flex flex-wrap items-center gap-4 mb-6 text-xs text-gray-400">
|
|
<span className="px-3 py-1 text-orange-500 border rounded-full bg-orange-500/10 border-orange-500/20">{t("badge")}</span>
|
|
<div className="flex items-center">
|
|
<Clock className={`w-4 h-4 text-orange-500 ${isRtl ? "ml-1.5" : "mr-1.5"}`} />
|
|
{readingTime} {t("readTime")}
|
|
</div>
|
|
<div className="flex items-center">
|
|
<Calendar className={`w-4 h-4 text-orange-500 ${isRtl ? "ml-1.5" : "mr-1.5"}`} />
|
|
{formatDateByLocale(blog.publishedAt.toString(), locale)}
|
|
</div>
|
|
</div>
|
|
<h1 className="mb-6 text-4xl font-bold leading-tight md:text-5xl">{translation.title}</h1>
|
|
<div className={`mb-8 border-orange-500 ${isRtl ? "pr-4 border-r-2" : "pl-4 border-l-2"}`}>
|
|
<p className="text-lg leading-relaxed text-gray-300">{translation.description}</p>
|
|
</div>
|
|
<div className="flex items-center justify-between mb-12">
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex items-center justify-center w-10 h-10 text-orange-500 border rounded-full bg-slate-800 border-slate-700">
|
|
<User className="w-5 h-5" />
|
|
</div>
|
|
<div>
|
|
<div className="text-sm font-medium">{blog.writer.username}</div>
|
|
<div className="text-xs text-gray-400">{t("authorRole")}</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={handleShare}
|
|
className="flex items-center justify-center w-10 h-10 text-gray-400 transition-all border rounded-lg border-slate-800 bg-slate-900/50 hover:text-white hover:border-slate-600"
|
|
>
|
|
<Share2 className="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
onClick={handleCopy}
|
|
className={`flex items-center justify-center w-10 h-10 transition-all border rounded-lg border-slate-800 bg-slate-900/50 hover:border-slate-600 ${isCopied ? "text-green-500 border-green-500/50" : "text-gray-400 hover:text-white"}`}
|
|
>
|
|
{isCopied ? <Check className="w-4 h-4" /> : <LinkIcon className="w-4 h-4" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{blog.featuredImage && (
|
|
<div className="relative flex items-center justify-center w-full overflow-hidden border aspect-video rounded-2xl border-slate-800 bg-gradient-to-br from-slate-900 to-slate-800">
|
|
<Image src={`${BACKEND_URL}/uploads/${blog.featuredImage}`} alt={translation.title} fill className="object-cover w-full h-full" />
|
|
</div>
|
|
)}
|
|
</header>
|
|
);
|
|
}
|