update
This commit is contained in:
Iliyan Angelov
@@ -1,207 +1,289 @@
|
||||
"use client";
|
||||
import { useParams } from "next/navigation";
|
||||
import Image from "next/legacy/image";
|
||||
import Link from "next/link";
|
||||
import poster from "@/public/images/blog/blog-poster.png";
|
||||
import info from "@/public/images/blog/blog-info.png";
|
||||
import { useBlogPost } from "@/lib/hooks/useBlog";
|
||||
import { getValidImageUrl, getValidImageAlt, FALLBACK_IMAGES } from "@/lib/imageUtils";
|
||||
|
||||
const BlogSingle = () => {
|
||||
return (
|
||||
<section className="tp-post-details fix-top pb-120 fade-wrapper">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="tp-post-intro">
|
||||
<h2 className="title-anim text-xxl fw-7 text-secondary mt-8">
|
||||
Tackling data of annotation problems in healthcare
|
||||
</h2>
|
||||
<div className="mt-60 mb-24 d-flex align-items-center justify-content-between tppr">
|
||||
<div className="d-flex align-items-center tp-post-tags-container mt-8">
|
||||
<p className="text-xs">Scope:</p>
|
||||
<div className="d-flex align-items-center tp-post-tags">
|
||||
<Link href="blog">AI</Link>
|
||||
<span></span>
|
||||
<Link href="blog">Artificial Intelligence</Link>
|
||||
<span></span>
|
||||
<Link href="blog">Data Science</Link>
|
||||
<span></span>
|
||||
<Link href="blog">Machine Learning</Link>
|
||||
</div>
|
||||
const params = useParams();
|
||||
const slug = params?.slug as string;
|
||||
const { post, loading, error } = useBlogPost(slug);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<section className="blog-single-section fix-top pb-120">
|
||||
<div className="container">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-12 col-lg-10 col-xl-8">
|
||||
<div className="loading-state text-center py-5">
|
||||
<div className="spinner-border text-primary mb-3" role="status">
|
||||
<span className="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div className="tp-post-meta mt-8">
|
||||
<p className="author text-xs text-tertiary">Denial Lio</p>
|
||||
<span></span>
|
||||
<p className="date text-xs text-tertiary">18 Dec 2022</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="tp-post-poster fade-top">
|
||||
<div className="parallax-image-wrap">
|
||||
<div className="parallax-image-inner">
|
||||
<Image
|
||||
src={poster}
|
||||
className="w-100 mh-300 parallax-image"
|
||||
alt="Image"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="group mt-60">
|
||||
<p className="cur-lg mb-24">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
||||
nec tortor id erat faucibus tempor id eget turpis. Donec
|
||||
lobortis et neque eget congue. Mauris laoreet orci ac dictum
|
||||
interdum. Sed dapibus convallis arcu, a aliquam purus sodales
|
||||
nec. Integer consequat et magna sit amet porta. Maecenas
|
||||
consectetur eros sed risus porta convallis eget et massa.
|
||||
Integer auctor convallis ligula, sit amet sollicitudin justo
|
||||
tincidunt a. Sed tellus diam.
|
||||
</p>
|
||||
<p className="cur-lg mb-24 fw-6">
|
||||
Bibendum tincidunt orci vel, sollicitudin bibendum ligula.
|
||||
Pellentesque sollicitudin nulla felis, a ornare tellus
|
||||
tristique ac. Proin ultricies a turpis sit amet lacinia. Ut
|
||||
laoreet nunc leo, ac congue enim laoreet in. Aenean suscipit
|
||||
arcu at ligula tempor porta.
|
||||
</p>
|
||||
<p className="cur-lg">
|
||||
Quisque et fringilla lacus, quis luctus elit. Curabitur eu dui
|
||||
mattis turpis commodo eleifend. Sed porta ornare nunc et
|
||||
tristique. Curabitur vel eros a ante cursus lacinia. Nam nisl
|
||||
leo, aliquet a placerat at, porttitor quis augue. Proin quis
|
||||
aliquet libero. Pellentesque habitant morbi tristique senectus
|
||||
et netus et malesuada fames ac turpis egestas. Vestibulum
|
||||
varius a ipsum ornare blandit. Integer vitae eleifend risus,
|
||||
id tincidunt elit. Integer tincidunt ipsum vitae sagittis
|
||||
porta. Aenean ut facilisis dui. Praesent at ultricies purus.
|
||||
Nam a arcu vel diam ullamcorper tincidunt. Curabitur
|
||||
vestibulum commodo erat non laoreet. Proin nibh nibh,
|
||||
scelerisque a nibh nec, scelerisque convallis leo. Nunc eget
|
||||
elit nunc.
|
||||
</p>
|
||||
</div>
|
||||
<div className="group-info mt-60">
|
||||
<div className="row align-items-center vertical-column-gap">
|
||||
<div className="col-12 col-lg-6">
|
||||
<div className="fade-top">
|
||||
<div className="parallax-image-wrap">
|
||||
<div className="parallax-image-inner">
|
||||
<Image
|
||||
src={info}
|
||||
className="w-100 mh-300 parallax-image"
|
||||
alt="Image"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-lg-6">
|
||||
<p className="cur-lg mb-24">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Donec nec tortor id erat faucibus tempor id eget turpis.
|
||||
Donec lobortis et neque eget congue. Mauris laoreet orci
|
||||
ac dictum interdum. Sed dapibus convallis arcu, a aliquam
|
||||
purus sodales nec.
|
||||
</p>
|
||||
<p className="cur-lg">
|
||||
Quisque et fringilla lacus, quis luctus elit. Curabitur eu
|
||||
dui mattis turpis commodo eleifend. Sed porta ornare nunc
|
||||
et tristique. Curabitur vel eros a ante cursus lacinia.
|
||||
Nam nisl leo, aliquet a placerat at, porttitor quis augue.
|
||||
Proin quis aliquet libero. Pellentesque habitant morbi
|
||||
tristique senectus et netus et malesuada fames ac turpis
|
||||
egestas. Vestibulum varius a ipsum ornare blandit.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="group mt-60">
|
||||
<h4 className="mt-8 fw-7 text-secondary title-anim mb-24">
|
||||
The Hidden Markov Model's Limitations
|
||||
</h4>
|
||||
<p className="cur-lg mb-24">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
||||
nec tortor id erat faucibus tempor id eget turpis. Donec
|
||||
lobortis et neque eget congue. Mauris laoreet orci ac dictum
|
||||
interdum. Sed dapibus convallis arcu, a aliquam purus sodales
|
||||
nec.
|
||||
</p>
|
||||
<p className="cur-lg">
|
||||
Quisque et fringilla lacus, quis luctus elit. Curabitur eu dui
|
||||
mattis turpis commodo eleifend. Sed porta ornare nunc et
|
||||
tristique. Curabitur vel eros a ante cursus lacinia. Nam nisl
|
||||
leo, aliquet a placerat at, porttitor quis augue. Proin quis
|
||||
aliquet libero. Pellentesque habitant morbi tristique senectus
|
||||
et netus et malesuada fames ac turpis egestas. Vestibulum
|
||||
varius a ipsum ornare blandit.
|
||||
</p>
|
||||
</div>
|
||||
<div className="group mt-60">
|
||||
<h4 className="mt-8 fw-7 text-secondary title-anim mb-24">
|
||||
The Effect
|
||||
</h4>
|
||||
<p className="cur-lg mb-24">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
||||
nec tortor id erat faucibus tempor id eget turpis. Donec
|
||||
lobortis et neque eget congue. Mauris laoreet orci ac dictum
|
||||
interdum. Sed dapibus convallis arcu, a aliquam purus sodales
|
||||
nec.
|
||||
</p>
|
||||
<p className="cur-lg">
|
||||
Quisque et fringilla lacus, quis luctus elit. Curabitur eu dui
|
||||
mattis turpis commodo eleifend. Sed porta ornare nunc et
|
||||
tristique. Curabitur vel eros a ante cursus lacinia. Nam nisl
|
||||
leo, aliquet a placerat at, porttitor quis augue. Proin quis
|
||||
aliquet libero. Pellentesque habitant morbi tristique senectus
|
||||
et netus et malesuada fames ac turpis egestas. Vestibulum
|
||||
varius a ipsum ornare blandit.
|
||||
</p>
|
||||
<p className="text-tertiary">Loading insight...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row mt-80">
|
||||
<div className="col-12">
|
||||
<div className="bd-social">
|
||||
<p className="fw-5 text-uppercase">Share :</p>
|
||||
<ul className=" social">
|
||||
<li>
|
||||
<Link
|
||||
href="https://www.facebook.com/"
|
||||
target="_blank"
|
||||
aria-label="share us on facebook"
|
||||
>
|
||||
<i className="fa-brands fa-facebook-f"></i>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="https://www.twitter.com/"
|
||||
target="_blank"
|
||||
aria-label="share us on twitter"
|
||||
>
|
||||
<i className="fa-brands fa-twitter"></i>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="https://www.pinterest.com/"
|
||||
target="_blank"
|
||||
aria-label="share us on pinterest"
|
||||
>
|
||||
<i className="fa-brands fa-linkedin-in"></i>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="https://www.instagram.com/"
|
||||
target="_blank"
|
||||
aria-label="share us on instagram"
|
||||
>
|
||||
<i className="fa-brands fa-instagram"></i>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !post) {
|
||||
return (
|
||||
<section className="blog-single-section fix-top pb-120">
|
||||
<div className="container">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-12 col-lg-10 col-xl-8">
|
||||
<div className="error-state text-center py-5">
|
||||
<div className="error-icon mb-4">
|
||||
<i className="fa-solid fa-exclamation-circle fa-4x text-tertiary"></i>
|
||||
</div>
|
||||
<h2 className="text-secondary mb-3">Insight Not Found</h2>
|
||||
<p className="text-tertiary mb-4">
|
||||
The insight you're looking for doesn't exist or has been removed.
|
||||
</p>
|
||||
<Link href="/insights" className="btn btn-primary">
|
||||
<i className="fa-solid fa-arrow-left me-2"></i>
|
||||
Back to Insights
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="blog-single-section fix-top pb-120">
|
||||
<div className="container">
|
||||
{/* Article Content */}
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<article className="blog-single-article">
|
||||
{/* Article Header */}
|
||||
<header className="article-header">
|
||||
{/* Top Meta Bar */}
|
||||
<div className="article-top-meta d-flex flex-wrap align-items-center justify-content-between mb-4">
|
||||
<div className="left-meta d-flex align-items-center gap-3">
|
||||
{/* Category Badge */}
|
||||
{post.category && (
|
||||
<Link href={`/insights?category=${post.category.slug}`} className="category-badge">
|
||||
<i className="fa-solid fa-folder-open me-2"></i>
|
||||
{post.category.title}
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{/* Date */}
|
||||
<div className="meta-item d-flex align-items-center">
|
||||
<i className="fa-solid fa-calendar me-2"></i>
|
||||
<span>
|
||||
{new Date(post.published_at || post.created_at).toLocaleDateString('en-US', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: 'numeric'
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="right-meta d-flex align-items-center gap-3">
|
||||
{/* Reading Time */}
|
||||
<div className="meta-item d-flex align-items-center">
|
||||
<i className="fa-solid fa-clock me-2"></i>
|
||||
<span>{post.reading_time} min</span>
|
||||
</div>
|
||||
|
||||
{/* Views */}
|
||||
<div className="meta-item d-flex align-items-center">
|
||||
<i className="fa-solid fa-eye me-2"></i>
|
||||
<span>{post.views_count}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h1 className="article-title">
|
||||
{post.title}
|
||||
</h1>
|
||||
|
||||
{/* Author and Tags Bar */}
|
||||
<div className="article-bottom-meta d-flex flex-wrap align-items-center justify-content-between mt-4 pt-4">
|
||||
{/* Author */}
|
||||
<div className="author-meta d-flex align-items-center">
|
||||
<div className="author-avatar me-3">
|
||||
{post.author?.avatar ? (
|
||||
<Image
|
||||
src={post.author.avatar}
|
||||
alt={post.author.name}
|
||||
width={48}
|
||||
height={48}
|
||||
className="rounded-circle"
|
||||
/>
|
||||
) : (
|
||||
<div className="avatar-placeholder">
|
||||
<i className="fa-solid fa-user"></i>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="author-info">
|
||||
<div className="author-label">Written by</div>
|
||||
<div className="author-name">
|
||||
{post.author?.name || post.author_name || 'Admin'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
{post.tags && post.tags.length > 0 && (
|
||||
<div className="article-tags d-flex flex-wrap align-items-center gap-2">
|
||||
{post.tags.map((tag) => (
|
||||
<Link
|
||||
key={tag.id}
|
||||
href={`/insights?tag=${tag.slug}`}
|
||||
className="tag-badge"
|
||||
>
|
||||
#{tag.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Featured Image */}
|
||||
{(post.featured_image || post.thumbnail) && (
|
||||
<div className="article-featured-image">
|
||||
<div className="image-wrapper">
|
||||
<Image
|
||||
src={getValidImageUrl(
|
||||
post.featured_image || post.thumbnail,
|
||||
FALLBACK_IMAGES.BLOG
|
||||
)}
|
||||
alt={getValidImageAlt(post.title)}
|
||||
width={1200}
|
||||
height={600}
|
||||
layout="responsive"
|
||||
className="featured-image"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Article Body */}
|
||||
<div className="article-body">
|
||||
{/* Excerpt */}
|
||||
{post.excerpt && (
|
||||
<div className="article-excerpt">
|
||||
<p className="lead">{post.excerpt}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Content */}
|
||||
{post.content && (
|
||||
<div
|
||||
className="article-content enterprise-content"
|
||||
dangerouslySetInnerHTML={{ __html: post.content }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer Section */}
|
||||
<footer className="article-footer">
|
||||
{/* Share Section */}
|
||||
<div className="article-share">
|
||||
<div className="share-container">
|
||||
<h6 className="share-title">
|
||||
Share this insight
|
||||
</h6>
|
||||
<div className="social-share">
|
||||
<Link
|
||||
href={`https://www.linkedin.com/shareArticle?mini=true&url=${typeof window !== 'undefined' ? encodeURIComponent(window.location.href) : ''}&title=${encodeURIComponent(post.title)}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="share-btn share-linkedin"
|
||||
aria-label="Share on LinkedIn"
|
||||
>
|
||||
<i className="fa-brands fa-linkedin-in"></i>
|
||||
<span>LinkedIn</span>
|
||||
</Link>
|
||||
<Link
|
||||
href={`https://twitter.com/intent/tweet?url=${typeof window !== 'undefined' ? encodeURIComponent(window.location.href) : ''}&text=${encodeURIComponent(post.title)}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="share-btn share-twitter"
|
||||
aria-label="Share on Twitter"
|
||||
>
|
||||
<i className="fa-brands fa-twitter"></i>
|
||||
<span>Twitter</span>
|
||||
</Link>
|
||||
<Link
|
||||
href={`https://www.facebook.com/sharer/sharer.php?u=${typeof window !== 'undefined' ? encodeURIComponent(window.location.href) : ''}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="share-btn share-facebook"
|
||||
aria-label="Share on Facebook"
|
||||
>
|
||||
<i className="fa-brands fa-facebook-f"></i>
|
||||
<span>Facebook</span>
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (typeof window !== 'undefined' && navigator.clipboard) {
|
||||
navigator.clipboard.writeText(window.location.href);
|
||||
alert('Link copied to clipboard!');
|
||||
}
|
||||
}}
|
||||
className="share-btn share-copy"
|
||||
aria-label="Copy link"
|
||||
>
|
||||
<i className="fa-solid fa-link"></i>
|
||||
<span>Copy</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Author Bio */}
|
||||
{post.author && post.author.bio && (
|
||||
<div className="author-bio-section">
|
||||
<div className="author-bio-card">
|
||||
<div className="author-avatar-container">
|
||||
{post.author.avatar ? (
|
||||
<Image
|
||||
src={post.author.avatar}
|
||||
alt={post.author.name}
|
||||
width={90}
|
||||
height={90}
|
||||
className="rounded-circle"
|
||||
/>
|
||||
) : (
|
||||
<div className="author-avatar-large">
|
||||
<i className="fa-solid fa-user"></i>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="author-bio-content">
|
||||
<div className="bio-label">About the Author</div>
|
||||
<h6 className="author-name">{post.author.name}</h6>
|
||||
<p className="author-bio-text">{post.author.bio}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Navigation */}
|
||||
<div className="article-navigation">
|
||||
<Link href="/insights" className="btn-back-insights">
|
||||
<i className="fa-solid fa-arrow-left me-2"></i>
|
||||
Back to All Insights
|
||||
</Link>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user