|
|
|
|
@ -13,9 +13,8 @@ import {
|
|
|
|
|
WhatsappShareButton
|
|
|
|
|
} from "react-share";
|
|
|
|
|
|
|
|
|
|
import {environment} from "../../environments/environment";
|
|
|
|
|
|
|
|
|
|
import styles from './card-blog-details.module.scss';
|
|
|
|
|
import {getCategoryUrl, getPostUrl, getStrapiImage} from "../../libs/utils";
|
|
|
|
|
|
|
|
|
|
/* eslint-disable-next-line */
|
|
|
|
|
export interface CardBlogDetailsProps {
|
|
|
|
|
@ -23,70 +22,78 @@ export interface CardBlogDetailsProps {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function CardBlogDetails({item}: CardBlogDetailsProps) {
|
|
|
|
|
const {alternativeText, width, height} = item.image.data.attributes;
|
|
|
|
|
const {slug} = item.category.data.attributes;
|
|
|
|
|
const {width, height} = item.image.data.attributes;
|
|
|
|
|
const {title} = item;
|
|
|
|
|
const shareUrl = `${environment.appUrl}/blog/${slug}/${item.slug}`;
|
|
|
|
|
const shareUrl = getPostUrl(item);
|
|
|
|
|
return (
|
|
|
|
|
<div className={styles['container'] + " bg-white rounded-l p-8 overflow-hidden shadow-sm"}>
|
|
|
|
|
<div className={styles['container'] + " rounded-l p-8 overflow-hidden shadow-sm" +
|
|
|
|
|
" bg-white" +
|
|
|
|
|
" dark:bg-gray-800"}>
|
|
|
|
|
<header className="md:flex flex-col">
|
|
|
|
|
<h2 className="text-3xl mb-5 text-bold">
|
|
|
|
|
{delve(item, 'title', 'N/A')}
|
|
|
|
|
</h2>
|
|
|
|
|
<section className="flex items-center justify-between">
|
|
|
|
|
<div className="flex">
|
|
|
|
|
<a href="#" className="flex items-center">
|
|
|
|
|
<a href="#"
|
|
|
|
|
className="flex items-center">
|
|
|
|
|
<img
|
|
|
|
|
src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=731&q=80"
|
|
|
|
|
alt="avatar" className="mr-4 w-10 h-10 object-cover rounded-full hidden sm:block"/>
|
|
|
|
|
alt="avatar"
|
|
|
|
|
className="mr-4 w-10 h-10 object-cover rounded-full hidden sm:block" />
|
|
|
|
|
<h3 className="text-gray-700 text-normal font-bold hover:underline text-slate-400">Par Alex John</h3>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="flex flex-col">
|
|
|
|
|
<a href={'/blog/' + delve(item, 'category.data.attributes.slug', '')}
|
|
|
|
|
<a href={getCategoryUrl(item)}
|
|
|
|
|
className="px-2 py-1 text-sm bg-gray-600 text-gray-100 font-bold rounded hover:bg-gray-500">
|
|
|
|
|
{delve(item, 'category.data.attributes.name', 'N/A')}
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</header>
|
|
|
|
|
<hr className="border-gray-100 my-5 sm:mx-auto dark:border-gray-700 container mx-auto"/>
|
|
|
|
|
<hr className="border-gray-100 my-5 sm:mx-auto dark:border-gray-700 container mx-auto" />
|
|
|
|
|
<main>
|
|
|
|
|
<section>
|
|
|
|
|
<div className="whitespace-pre-wrap text-lg font-bold text-slate-500"
|
|
|
|
|
dangerouslySetInnerHTML={{__html: delve(item, 'description', 'N/A')}}/>
|
|
|
|
|
<div className="whitespace-pre-wrap text-lg font-bold text-slate-500
|
|
|
|
|
text-gray-600
|
|
|
|
|
dark:text-gray-300"
|
|
|
|
|
dangerouslySetInnerHTML={{__html: delve(item, 'description', 'N/A')}} />
|
|
|
|
|
<NextImage
|
|
|
|
|
layout="responsive"
|
|
|
|
|
width={width}
|
|
|
|
|
height={height}
|
|
|
|
|
objectFit="contain"
|
|
|
|
|
className="rounded-lg my-5"
|
|
|
|
|
src={environment.strapiUrl + delve(item, 'image.data.attributes.url', '')}
|
|
|
|
|
alt={delve(item, 'title', 'N/A')}/>
|
|
|
|
|
src={getStrapiImage(item, "default")}
|
|
|
|
|
alt={delve(item, 'title', 'N/A')} />
|
|
|
|
|
</section>
|
|
|
|
|
<section className="whitespace-pre-wrap text-lg text-slate-400"
|
|
|
|
|
dangerouslySetInnerHTML={{__html: delve(item, 'content', 'N/A')}}/>
|
|
|
|
|
<hr className="border-gray-100 my-5 sm:mx-auto dark:border-gray-700 container mx-auto"/>
|
|
|
|
|
dangerouslySetInnerHTML={{__html: delve(item, 'content', 'N/A')}} />
|
|
|
|
|
<hr className="border-gray-100 my-5 sm:mx-auto dark:border-gray-700 container mx-auto" />
|
|
|
|
|
<section className="flex justify-between">
|
|
|
|
|
<div>
|
|
|
|
|
<h4 className="font-bold text-lg text-gray-400 mb-2">Partager cet article</h4>
|
|
|
|
|
<div className="grid grid-cols-5 gap-2">
|
|
|
|
|
<FacebookShareButton url={shareUrl}>
|
|
|
|
|
<FacebookIcon size={32} round/>
|
|
|
|
|
<FacebookIcon size={32}
|
|
|
|
|
round />
|
|
|
|
|
</FacebookShareButton>
|
|
|
|
|
<FacebookMessengerShareButton
|
|
|
|
|
url={shareUrl}
|
|
|
|
|
appId="521270401588372"
|
|
|
|
|
className="Demo__some-network__share-button"
|
|
|
|
|
>
|
|
|
|
|
<FacebookMessengerIcon size={32} round/>
|
|
|
|
|
<FacebookMessengerIcon size={32}
|
|
|
|
|
round />
|
|
|
|
|
</FacebookMessengerShareButton>
|
|
|
|
|
<TwitterShareButton
|
|
|
|
|
url={shareUrl}
|
|
|
|
|
title={title}
|
|
|
|
|
className="Demo__some-network__share-button"
|
|
|
|
|
>
|
|
|
|
|
<TwitterIcon size={32} round/>
|
|
|
|
|
<TwitterIcon size={32}
|
|
|
|
|
round />
|
|
|
|
|
</TwitterShareButton>
|
|
|
|
|
<WhatsappShareButton
|
|
|
|
|
url={shareUrl}
|
|
|
|
|
@ -94,10 +101,13 @@ export function CardBlogDetails({item}: CardBlogDetailsProps) {
|
|
|
|
|
separator=":: "
|
|
|
|
|
className="Demo__some-network__share-button"
|
|
|
|
|
>
|
|
|
|
|
<WhatsappIcon size={32} round/>
|
|
|
|
|
<WhatsappIcon size={32}
|
|
|
|
|
round />
|
|
|
|
|
</WhatsappShareButton>
|
|
|
|
|
<LinkedinShareButton url={shareUrl} className="Demo__some-network__share-button">
|
|
|
|
|
<LinkedinIcon size={32} round/>
|
|
|
|
|
<LinkedinShareButton url={shareUrl}
|
|
|
|
|
className="Demo__some-network__share-button">
|
|
|
|
|
<LinkedinIcon size={32}
|
|
|
|
|
round />
|
|
|
|
|
</LinkedinShareButton>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|