add readme for documentation

src/components/single-academy/ArticleHeader.tsx

@@ -1,69 +1,101 @@
-import React from "react";
-import { ChevronRight, Clock, Calendar, Bookmark, Share2, User } from "lucide-react";
+"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();
+    }
+  };
 
-export default function ArticleHeader() {
   return (
     <header className="mb-16">
-      {/* Back Button */}
       <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 ml-1" />
-        بازگشت به آکادمی
+        <ChevronRight className={`w-4 h-4 ${isRtl ? "ml-1" : "mr-1 rotate-180"}`} />
+        {t("backToAcademy")}
       </a>
-
-      {/* Meta Info */}
       <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">علوم اعصاب</span>
+        <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 ml-1.5 text-orange-500" />۸ دقیقه مطالعه
+          <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 ml-1.5 text-orange-500" />
-          ۱۰ فروردین ۱۴۰۴
+          <Calendar className={`w-4 h-4 text-orange-500 ${isRtl ? "ml-1.5" : "mr-1.5"}`} />
+          {formatDateByLocale(blog.publishedAt.toString(), locale)}
         </div>
       </div>
-
-      {/* Title & Excerpt */}
-      <h1 className="mb-6 text-4xl font-bold leading-tight md:text-5xl">دیسکلکولیا: وقتی مغز با اعداد کنار نمی‌آید</h1>
-      <div className="pr-4 mb-8 border-r-2 border-orange-500">
-        <p className="text-lg leading-relaxed text-gray-300">
-          پژوهش جدید با تصویربرداری مغزی نشان می‌دهد مشکل اصلی کودکان مبتلا به اختلال یادگیری ریاضی، نه در درک مقدار، بلکه در پردازش نمادهای عددی
-          نهفته است.
-        </p>
+      <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>
-
-      {/* Author & Actions */}
       <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">تیم آکادمی رابین</div>
-            <div className="text-xs text-gray-400">علم و فناوری</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 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">
+          <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 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">
-            <Bookmark className="w-4 h-4" />
+          <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>
-
-      {/* Hero Image */}
-      <div className="w-full aspect-[21/9] rounded-2xl border border-slate-800 bg-gradient-to-br from-slate-900 to-slate-800 relative overflow-hidden flex items-center justify-center">
-        {/* Placeholder for actual image - representing the brain and numbers network */}
-        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-orange-500/10 via-transparent to-transparent"></div>
-        <div className="flex flex-col items-center text-orange-500/50">
-          <span className="mb-4 text-6xl">🧠</span>
-          <div className="absolute p-2 text-sm border rounded-lg top-1/4 left-1/3 border-slate-700 bg-slate-800/50">۳</div>
-          <div className="absolute p-2 text-sm border rounded-lg bottom-1/3 right-1/4 border-slate-700 bg-slate-800/50">۷</div>
-          <div className="absolute p-2 text-sm border rounded-lg top-1/2 left-1/4 border-slate-700 bg-slate-800/50">۵</div>
-          <div className="absolute p-2 text-sm border rounded-lg top-1/3 right-1/3 border-slate-700 bg-slate-800/50">۹</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>
-      </div>
+      )}
     </header>
   );
 }