add image labeling and previous many works

src/components/TopicDetail.jsx

@@ -5,9 +5,11 @@ 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/';
+import { token, user_name, pb_id } from '../lib/CookieValues';
+import CommentSystem from './CommentSystem/CommentSystem';
+const COMMENTS_API_URL = 'https://host-api-sxashuasysagibx.siliconpin.com/v1/comments/';
 export default function TopicDetail(props) {
+  // console.log('coockie data', user_name)
   const [showCopied, setShowCopied] = useState(false);
 
   if (!props.topic) {
@@ -111,7 +113,7 @@ export default function TopicDetail(props) {
         
         {/* Enhanced Social Share Buttons */}
         <div className="mb-8">
-          <p className="text-sm text-gray-500 mb-3 font-medium">Share this article:</p>
+          <p className="text-sm text-gray-500 mb-3 font-medium">Share this Topic:</p>
           <div className="flex flex-wrap gap-2">
             <button 
               onClick={() => shareOnSocialMedia('facebook')}
@@ -193,7 +195,7 @@ export default function TopicDetail(props) {
         </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}/>
+        <CommentSystem topicId={props.topic.id}/>
       </article>
     </div>
   );