last add topic pages and content

src/components/TopicDetail.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
+
+export default function TopicDetail(props) {
+console.log('All topic Form allTopic', props.allTopic)
+  if (!props.topic) {
+    return <div>Topic not found</div>;
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-12">
+        <article className="max-w-4xl mx-auto">
+          <img src={props.topic.img} alt={props.topic.title} className="w-full h-96 object-cover rounded-lg mb-8" />
+          <h1 className="text-4xl font-bold text-[#6d9e37] mb-4">{props.topic.title}</h1>
+          <p className="font-light mb-8 text-justify" dangerouslySetInnerHTML={{__html: props.topic.content}}></p>
+        </article>
+    </div>
+  );
+}