[tag]0.1-vcci

src/app/(main)/[...slug]/components/event-detail/index.tsx

-"use client";
-
-import parse from "html-react-parser";
-import dayjs from "dayjs";
-import { Spinner } from "@/components/ui";
-import { useGetNewsId } from "@/api/endpoints/news";
-import { GetNewsDetailResponseType } from "./../../page.type";
-
-interface EventDetailProps {
-  id?: string;
-}
-
-export default function EventDetail({ id }: EventDetailProps) {
-  if (!id) return null;
-
-  const { data: eventDetail, isLoading } = useGetNewsId<GetNewsDetailResponseType>(id);
-
-  if (isLoading) {
-    return (
-      <div className="flex justify-center py-6">
-        <Spinner />
-      </div>
-    );
-  }
-
-  const event = eventDetail?.responseData;
-  if (!event) return null;
-
-  return (
-    <div>
-      <h1 className="text-2xl font-medium text-primary">{event.title}</h1>
-      <div className="text-sm text-blue-700 mb-4">
-        {dayjs(event.created_at).format("DD/MM/YYYY")}
-      </div>
-      <div className="prose tiptap">{parse(event.description ?? "")}</div>
-    </div>
-  );
-}

src/app/(main)/[...slug]/components/news-detail/index.tsx

-"use client";
-
-import parse from "html-react-parser";
-import dayjs from "dayjs";
-import { GetNewsResponseType } from "@/api/types/news";
-
-interface NewsDetailProps {
-  data: GetNewsResponseType;
-}
-
-export default function NewsDetail({ data }: NewsDetailProps) {
-  const news = data?.responseData?.rows?.[0];
-  if (!news) return null;
-
-  return (
-    <div>
-      <h1 className="text-2xl font-medium text-primary">{news.title}</h1>
-      <div className="text-sm text-blue-700 mb-4">
-        {dayjs(news.created_at).format("DD/MM/YYYY")}
-      </div>
-      <div className="prose tiptap">{parse(news.description ?? "")}</div>
-    </div>
-  );
-}

src/components/base/card-events/index.tsx

+
+import { EventItem } from '@/api/types/event';
+import Links from '@links/index'
+import dayjs from 'dayjs';
+
+// Helper: remove <img> tags and extract plain text from HTML
+const stripImagesAndHtml = (html?: string) => {
+  if (!html) return ''
+  // remove img tags first
+  const withoutImgs = html.replace(/<img[^>]*>/gi, '')
+  // use DOMParser on client for robust extraction
+  if (typeof window !== 'undefined' && typeof DOMParser !== 'undefined') {
+    try {
+      const doc = new DOMParser().parseFromString(withoutImgs, 'text/html')
+      return doc.body.textContent || ''
+    } catch {
+      // fallback to regex
+    }
+  }
+  return withoutImgs.replace(/<[^>]*>/g, '')
+}
+
+const CardEvents = ({ event, link }: { event: EventItem, link: string }) => {
+  return (
+    <a
+      href={`${link}`}
+      className="flex flex-col hover:no-underline sm:flex-row gap-2 mb-6 bg-white rounded-lg shadow-sm p-4 border items-start min-w-0"
+    >
+      <img
+        src={`${Links.imageEndpoint}${event.image}`}
+        alt={event.name}
+        className="w-full sm:w-56 md:w-64 h-40 md:h-36 object-cover shrink-0"
+        onError={(e) => {
+          e.currentTarget.src = "/img-error.png"
+        }}
+      />
+
+      <div className="flex-1 min-w-0 pl-0 sm:pl-4">
+        <p className="text-primary font-semibold text-base md:text-lg hover:underline line-clamp-2 wrap-break-word">
+          {event.name}
+        </p>
+        <div className="text-sm my-2 text-[#00AED5]">{dayjs(event.start_time).format('DD/MM/YYYY')}</div>
+        <div className="text-sm text-[#777] line-clamp-3">
+          <div className="text-sm prose tiptap">{stripImagesAndHtml(event.description)}</div>
+        </div>
+      </div>
+    </a>
+  )
+}
+
+export default CardEvents;
\ No newline at end of file