Refactor News, Standard, and BlankSection components for improved layout and content handling; enhance Teaser component with link wrapping functionality.

Author: TRomesh

templates/alloy-template/src/components/News.tsx

@@ -42,21 +42,42 @@ function ComponentWrapper({ children, node }: ComponentContainerProps) {
 }
 
 function News({ opti }: NewsPageProps) {
+  const { pa } = getPreviewUtils(opti);
   return (
-    <div>
-      <h2>{opti.title}</h2>
-      <p>{opti.description}</p>
-      <div>
-        {opti.image?.url.default && (
-          <img src={opti.image.url.default} alt={'Teaser Image'} />
-        )}
+    <main className="min-h-screen bg-white">
+      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 gap-8 lg:grid-cols-[1fr_320px]">
+          {/* Main Content */}
+          <div className="space-y-8">
+            {/* Heading and Description */}
+            <div className="space-y-4">
+              <h1
+                {...pa('title')}
+                className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl"
+              >
+                {opti.title}
+              </h1>
+              <p
+                {...pa('description')}
+                className="text-lg leading-relaxed text-gray-700"
+              >
+                {opti.description}
+              </p>
+            </div>
+
+            {/* Main Body Content */}
+            <div className="space-y-6">
+              <RichText {...pa('main_body')} content={opti.main_body?.json} />
+            </div>
+          </div>
+
+          <OptimizelyExperience
+            nodes={opti.composition.nodes ?? []}
+            ComponentWrapper={ComponentWrapper}
+          />
+        </div>
       </div>
-      <RichText content={opti.main_body?.json} />
-      <OptimizelyExperience
-        nodes={opti.composition.nodes ?? []}
-        ComponentWrapper={ComponentWrapper}
-      />
-    </div>
+    </main>
   );
 }
 

templates/alloy-template/src/components/Standard.tsx

@@ -42,21 +42,44 @@ function ComponentWrapper({ children, node }: ComponentContainerProps) {
 }
 
 function Standard({ opti }: StandardPageProps) {
+  const { pa } = getPreviewUtils(opti);
   return (
-    <div>
-      <h1 className="text-3xl font-bold">{opti.heading}</h1>
-      <p>{opti.description}</p>
-      <div>
-        {opti.image?.url.default && (
-          <img src={opti.image.url.default} alt={'Teaser Image'} />
-        )}
+    <main className="min-h-screen bg-white">
+      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 gap-8 lg:grid-cols-[1fr_320px]">
+          {/* Main Content */}
+          <div className="space-y-8">
+            {/* Heading and Description */}
+            <div className="space-y-4">
+              <h1
+                {...pa('title')}
+                className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl"
+              >
+                {opti.heading}
+              </h1>
+              <p
+                {...pa('description')}
+                className="text-lg leading-relaxed text-gray-700"
+              >
+                {opti.description}
+              </p>
+            </div>
+
+            {/* Main Body Content */}
+            <div className="space-y-6">
+              <RichText {...pa('main_body')} content={opti.main_body?.json} />
+            </div>
+          </div>
+        </div>
+      </div>
+      {/* section Area */}
+      <div className="">
+        <OptimizelyExperience
+          nodes={opti.composition.nodes ?? []}
+          ComponentWrapper={ComponentWrapper}
+        />
       </div>
-      <RichText content={opti.main_body?.json} />
-      <OptimizelyExperience
-        nodes={opti.composition.nodes ?? []}
-        ComponentWrapper={ComponentWrapper}
-      />
-    </div>
+    </main>
   );
 }
 

templates/alloy-template/src/components/base/BlankSection.tsx

@@ -1,19 +1,28 @@
 import { BlankSectionContentType, Infer } from '@optimizely/cms-sdk';
 import {
   OptimizelyGridSection,
+  StructureContainerProps,
   getPreviewUtils,
 } from '@optimizely/cms-sdk/react/server';
 
 type BlankSectionProps = {
   opti: Infer<typeof BlankSectionContentType>;
 };
 
+function Row({ children }: StructureContainerProps) {
+  return <div className="flex flex-wrap my-4">{children}</div>;
+}
+
+function Column({ children }: StructureContainerProps) {
+  return <div className="flex-1 mx-2">{children}</div>;
+}
+
 /** Defines a component to render a blank section */
 export default function BlankSection({ opti }: BlankSectionProps) {
   const { pa } = getPreviewUtils(opti);
   return (
     <section {...pa(opti)}>
-      <OptimizelyGridSection nodes={opti.nodes} />
+      <OptimizelyGridSection nodes={opti.nodes} row={Row} column={Column} />
     </section>
   );
 }

templates/alloy-template/src/components/base/PageList.tsx

@@ -12,35 +12,34 @@ const PageList = contentType({
     },
     IncludePublishDate: {
       type: 'boolean',
-      displayName: 'IncludePublishDate',
+      displayName: 'Include Publish Date',
     },
     IncludeIntroduction: {
       type: 'boolean',
-      displayName: 'IncludeIntroduction',
+      displayName: 'Include Introduction',
     },
     Count: {
       type: 'integer',
-      displayName: 'Count',
+      displayName: 'Max Count',
     },
     SortOrder: {
       type: 'integer',
-      displayName: 'SortOrder',
+      displayName: 'Sort Order',
     },
     Root: {
       type: 'contentReference',
       format: 'PageReference',
       displayName: 'Root',
-      restrictedTypes: [],
     },
     PageTypeFilter: {
       type: 'string',
       format: 'PageType',
-      displayName: 'PageTypeFilter',
+      displayName: 'Page Type Filter',
     },
     CategoryFilter: {
       type: 'array',
       format: 'categorization',
-      displayName: 'CategoryFilter',
+      displayName: 'Category Filter',
       items: {
         type: 'integer',
       },

templates/alloy-template/src/components/base/Teaser.tsx

@@ -1,4 +1,5 @@
 import { contentType, displayTemplate, Infer } from '@optimizely/cms-sdk';
+import Link from 'next/link';
 
 export const TeaserContentType = contentType({
   key: 'Teaser',
@@ -57,9 +58,21 @@ type TeaserProps = {
 };
 
 function Teaser({ opti, displaySettings }: TeaserProps) {
+  // Helper function to wrap content with link if available
+  const wrapWithLink = (content: React.ReactNode) => {
+    if (opti.link?.default) {
+      return (
+        <Link href={opti.link.default} className="cursor-pointer">
+          {content}
+        </Link>
+      );
+    }
+    return content;
+  };
+
   // Horizontal layout
   if (displaySettings?.orientation === 'horizontal') {
-    return (
+    const content = (
       <div className="max-w-4xl mx-auto bg-white rounded-lg shadow-sm overflow-hidden">
         <div className="flex flex-col md:flex-row">
           {opti.image?.url.default && (
@@ -82,11 +95,13 @@ function Teaser({ opti, displaySettings }: TeaserProps) {
         </div>
       </div>
     );
+
+    return wrapWithLink(content);
   }
 
   // Vertical layout (default)
-  return (
-    <div className="max-w-md mx-auto bg-white rounded-lg shadow-sm overflow-hidden">
+  const verticalContent = (
+    <div className="max-w-lg mx-auto bg-white rounded-lg shadow-sm overflow-hidden">
       {opti.image?.url.default && (
         <div className="h-48 w-full overflow-hidden">
           <img
@@ -104,6 +119,8 @@ function Teaser({ opti, displaySettings }: TeaserProps) {
       </div>
     </div>
   );
+
+  return wrapWithLink(verticalContent);
 }
 
 export default Teaser;