This commit is contained in:
suvodip ghosh
2025-06-18 08:44:08 +00:00
parent f6857712a8
commit 1c6e06bd6d
3 changed files with 585 additions and 33 deletions

View File

@@ -1,9 +1,15 @@
import React, { useState, useEffect } from "react";
import { marked } from 'marked';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./ui/card";
import { Label } from "./ui/label";
import { Textarea } from "./ui/textarea";
import { Button } from "./ui/button";
import { useIsLoggedIn } from '../lib/isLoggedIn';
import Comment from './Comment';
const COMMENTS_API_URL = 'https://host-api.cs1.hz.siliconpin.com/v1/comments/';
export default function TopicDetail(props) {
const [showCopied, setShowCopied] = useState(false);
if (!props.topic) {
return <div>Topic not found</div>;
}
@@ -12,31 +18,6 @@ export default function TopicDetail(props) {
const title = props.topic.title;
const text = `Check out this article: ${title}`;
// const shareOnFacebook = () => {
// window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`, '_blank');
// };
// const shareOnTwitter = () => {
// window.open(`https://twitter.com/intent/tweet?url=${encodeURIComponent(shareUrl)}&text=${encodeURIComponent(text)}`, '_blank');
// };
// const shareOnLinkedIn = () => {
// window.open(`https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(shareUrl)}&title=${encodeURIComponent(title)}`, '_blank');
// };
// const shareOnReddit = () => {
// window.open(`https://www.reddit.com/submit?url=${encodeURIComponent(shareUrl)}&title=${encodeURIComponent(title)}`, '_blank');
// };
// const shareOnWhatsApp = () => {
// window.open(`https://wa.me/?text=${encodeURIComponent(`${text} ${shareUrl}`)}`, '_blank');
// };
// const shareViaEmail = () => {
// window.open(`mailto:?subject=${encodeURIComponent(title)}&body=${encodeURIComponent(`${text}\n\n${shareUrl}`)}`);
// };
const shareOnSocialMedia = (platform) => {
switch (platform){
case 'facebook':
@@ -125,7 +106,7 @@ export default function TopicDetail(props) {
return (
<div className="container mx-auto px-4 py-12">
<article className="max-w-4xl mx-auto">
<img src={props.topic.img ? props.topic.img : '/assets/images/thumb-place.jpg'} alt={props.topic.title} className="w-full h-[400px] aspect-video object-cover rounded-lg mb-8 shadow-md" />
<img src={props.topic.img ? props.topic.img : '/assets/images/thumb-place.jpg'} alt={props.topic.title} className="w-full h-[400px] aspect-video object-cover rounded-lg mb-8 shadow-md" />
<h1 className="text-4xl font-bold text-[#6d9e37] mb-6">{props.topic.title}</h1>
{/* Enhanced Social Share Buttons */}
@@ -211,11 +192,11 @@ export default function TopicDetail(props) {
</div>
</div>
<div
className="font-light mb-8 text-justify prose max-w-none"
dangerouslySetInnerHTML={{ __html: marked.parse(props.topic.content || '') }}
></div>
<div className="font-light mb-8 text-justify prose max-w-none" dangerouslySetInnerHTML={{ __html: marked.parse(props.topic.content || '') }} ></div>
<Comment topicId={props.topic.id}/>
</article>
</div>
);
}
}
// bg-[#6d9e37]