Visual Builder Changes -- Added editable tags for Image, RTE, SLT Fields

src/app/test/page.tsx

@@ -1,14 +1,155 @@
-import LikeButton from "@/components/like";
+"use client";
+
+import Image from "next/image";
+import { getPage, initLivePreview, stack } from "@/lib/contentstack";
+import { useEffect, useState } from "react";
+import { Page } from "@/lib/types";
+import { useSearchParams } from "next/navigation";
+import ContentstackLivePreview, {
+  VB_EmptyBlockParentClass,
+} from "@contentstack/live-preview-utils";
 
-function Header({ title }:{title:string}) {
-  return <h1>{title ? title : 'Default title'}</h1>;
-}
-
 export default function TestPage() {
+  const [page, setPage] = useState<Page>();
+  const searchParams = useSearchParams();
+  const live_preview = searchParams.get("live_preview");
+  const entry_uid = searchParams.get("entry_uid");
+  const content_type_uid = searchParams.get("content_type_uid");
+
+  // If we're in Live Preview mode, set up the query parameters
+  if (live_preview) {
+    stack.livePreviewQuery({
+      live_preview,
+      contentTypeUid: content_type_uid || "",
+      entryUid: entry_uid || "",
+    });
+  }
+
+  // Fetch and set content
+  const getContent = async () => {
+    const newPage = await getPage("/test", "page");
+    setPage(newPage);
+  };
+
+  console.log(
+    "page",
+    JSON.stringify(page?.page_components?.[0].hero_banner.banner_description)
+  );
+
+  useEffect(() => {
+    initLivePreview();
+    // Re-fetch content automatically when an entry changes in Live Preview
+    ContentstackLivePreview.onEntryChange(getContent);
+  }, []);
+
   return (
-    <div>
-      <Header title="Home Page" />
-        <LikeButton />
-    </div>
+    <main className="max-w-screen-md mx-auto">
+      {/* Main container with max width and centered alignment */}
+      <section className="p-4">
+        {/* Section with padding */}
+
+        {/* Page Title */}
+        {page?.title ? (
+          <h1
+            className="text-4xl font-bold mb-4"
+            {...(page?.$ && page?.$.title)} // Editable tags for title
+          >
+            {page?.title}
+          </h1>
+        ) : null}
+
+        {/* Hero Banner Image (from the first page_component if available) */}
+        {page?.page_components?.[0].hero_banner.banner_image?.url ? (
+          <Image
+            className="mb-4"
+            width={640}
+            height={360}
+            src={page.page_components[0].hero_banner.banner_image.url}
+            alt={page.page_components[0].hero_banner.banner_image.title}
+            {...(page.page_components[0].hero_banner.banner_image?.$ &&
+              page.page_components[0].hero_banner.banner_image?.$.url)}
+          />
+        ) : null}
+
+        {/* Main container for page_components */}
+        <div
+          className={`space-y-8 max-w-screen-sm mt-4 ${
+            !page?.page_components || page.page_components.length === 0
+              ? VB_EmptyBlockParentClass
+              : ""
+          }`}
+          {...(page?.$ && page?.$.page_components)} // Editable tags for the page_components array
+        >
+          {page?.page_components?.map((item, index) => {
+            // --- HERO BANNER BLOCK ---
+            if (item.hero_banner) {
+              return (
+                <div
+                  key={item.hero_banner._metadata.uid}
+                  {...(page?.$ && page?.$[`page_components__${index}`])}
+                >
+                  {/* Banner Title */}
+                  {item.hero_banner.banner_title ? (
+                    <h1>{item.hero_banner.banner_title}</h1>
+                  ) : null}
+
+                  {/* Banner Description */}
+                  {item.hero_banner.banner_description ? (
+                    <div
+                      className="w-full md:w-1/2"
+                      // Spread the editable tags if available
+                      {...(item?.hero_banner?.$ &&
+                        item?.hero_banner?.$.banner_description)}
+                      // Render the banner description as HTML
+                      dangerouslySetInnerHTML={{
+                        __html: item.hero_banner.banner_description,
+                      }}
+                    />
+                  ) : null}
+                </div>
+              );
+            }
+
+            // --- RECENT ARTICLES BLOCK ---
+            else if (item.recent_articles) {
+              return (
+                <div
+                  key={item.recent_articles._metadata.uid}
+                  {...(page?.$ && page?.$[`page_components__${index}`])}
+                >
+                  {/* Recent Articles Title */}
+                  <h1>{item.recent_articles.title}</h1>
+
+                  {/* Recent Articles Subtitle */}
+                  {item.recent_articles.subtitle ? (
+                    <div
+                      className="w-full md:w-1/2"
+                      {...(item?.recent_articles?.$ &&
+                        item?.recent_articles?.$.subtitle)}
+                    >
+                      {item.recent_articles.subtitle}
+                    </div>
+                  ) : null}
+                </div>
+              );
+            }
+
+            // --- DUAL CONTENT CTA BLOCK ---
+            else if (item.dual_content_cta) {
+              return (
+                <div
+                  key={item.dual_content_cta._metadata.uid}
+                  {...(page?.$ && page?.$[`page_components__${index}`])}
+                >
+                  <h1>{item.dual_content_cta.title}</h1>
+                </div>
+              );
+            }
+
+            return null;
+          })}
+        </div>
+      </section>
+    </main>
   );
-}
+}