import PageTransition from "@/components/home/PageTransition"; import { Button } from "@/components/ui/button"; import { getRelatedPosts } from "@/data/blogData"; import { useBlogById } from "@/hooks/queries/useBlogs"; import { motion } from "framer-motion"; import { ArrowLeft, Calendar, Clock, Facebook, Link2, Linkedin, Twitter, } from "lucide-react"; import ReactMarkdown from "react-markdown"; import { Link, useNavigate, useParams } from "react-router-dom"; import remarkGfm from "remark-gfm"; import { toast } from "sonner"; export default function BlogArticle() { const { id } = useParams<{ id: string }>(); const { data } = useBlogById(id); const post = data?.data.data; const navigate = useNavigate(); // const post = getPostBySlug(id || ''); if (!post) { return (

Article Not Found

The article you're looking for doesn't exist.

); } const relatedPosts = getRelatedPosts(post); const shareUrl = window.location.href; const handleShare = (platform: string) => { const urls: Record = { twitter: `https://twitter.com/intent/tweet?url=${encodeURIComponent(shareUrl)}&text=${encodeURIComponent(post.title)}`, linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(shareUrl)}`, facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`, }; if (platform === "copy") { navigator.clipboard.writeText(shareUrl); toast.success("Link copied to clipboard!"); } else { window.open(urls[platform], "_blank", "width=600,height=400"); } }; return (
{/* Hero */}
{/* Category */} {post.category} {/* Title */} {post.title} {/* Meta */}
{post.author.name}

{post.author.name}

{post.author.role}

{new Date(post.date).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric", })} {post.readTime} {/* Featured Image */} {post.title}
{/* Content */}
{/* Article Content */} (

{children}

), h2: ({ children }) => (

{children}

), h3: ({ children }) => (

{children}

), h4: ({ children }) => (

{children}

), p: ({ children }) => (

{children}

), ul: ({ children }) => (
    {children}
), ol: ({ children }) => (
    {children}
), li: ({ children }) => (
  • {children}
    • ), a: ({ href, children }) => ( {children} ), strong: ({ children }) => ( {children} ), em: ({ children }) => ( {children} ), blockquote: ({ children }) => (
    {children}
    ), code: ({ className, children }) => { const isInline = !className; if (isInline) { return ( {children} ); } return ( {children} ); }, pre: ({ children }) => ( 
                            {children}
    ), hr: () =>
    , }} > {post.content}     {/* Sidebar */}
    {/* Author Bio */}
    {post.author.name}

    {post.author.name}

    {post.author.role}

    {post.author.bio}

    {post.author.twitter && ( )} {post.author.linkedin && ( )}
    {/* Related Articles */} {relatedPosts.length > 0 && (

    Related Articles
    {relatedPosts.map((relatedPost, index) => (
    {relatedPost.title}

    {relatedPost.title}

    {relatedPost.readTime}

    ))}
    )}
    ); }