fix: new fixes to CategoryBanner and SearchDetails

deco-sites · Nov 7, 2024 · 96ee10b · 96ee10b
1 parent b2e5c88
commit 96ee10b
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 24 deletions.
diff --git a/components/search/SearchDetails.tsx b/components/search/SearchDetails.tsx
@@ -1,16 +1,52 @@
 import type { Details } from "$store/loaders/Search/details.ts";
+import { clx } from "deco-sites/maconequiio/sdk/clx.ts";
 
 export interface Props {
   details: Details | undefined;
+  hasViewMore?: boolean;
 }
 
-export default function SearchDetails({ details }: Props) {
+export default function SearchDetails({ details, hasViewMore = true }: Props) {
   if (!details || !details.item) return null;
 
+  function handleClick() {
+    const content = document.getElementById("toggle-read-more");
+
+    if (content) {
+      content.addEventListener("click", () => {
+        const description = document.getElementById("read-more");
+
+        if (description) {
+          content?.classList?.add("hidden");
+          description?.classList?.remove("max-h-[4.4em]", "overflow-hidden");
+        }
+      });
+    }
+  }
+
   return (
     <div class="flex items-center justify-center w-full bg-white-normal py-8">
-      <div class="container p-4">
-        <div dangerouslySetInnerHTML={{ __html: details.item.html }} />
+      <div class="flex flex-col gap-0.5 container p-4">
+        <div
+          id="read-more"
+          dangerouslySetInnerHTML={{ __html: details.item.html }}
+          class={clx(hasViewMore && "max-h-[4.4em] overflow-hidden")}
+        />
+
+        {hasViewMore && (
+          <div
+            id="toggle-read-more"
+            aria-label="expand content"
+            class="underline cursor-pointer"
+          >
+            Ver mais
+          </div>
+        )}
+
+        <script
+          defer
+          dangerouslySetInnerHTML={{ __html: `(${handleClick.toString()})()` }}
+        />
       </div>
     </div>
   );

diff --git a/components/ui/CategoryBanner.tsx b/components/ui/CategoryBanner.tsx
@@ -1,6 +1,6 @@
 import { Picture, Source } from "apps/website/components/Picture.tsx";
 import type { SectionProps } from "deco/types.ts";
-import type { Color, ImageWidget } from "apps/admin/widgets.ts";
+import type { ImageWidget, RichText } from "apps/admin/widgets.ts";
 
 /**
  * @titleBy matcher
@@ -10,13 +10,11 @@ export interface Banner {
   matcher: string;
   /** @description text to be rendered on top of the image */
   title?: {
-    color: Color;
-    content: string;
+    content: RichText;
   };
   /** @description text to be rendered on top of the image */
   subtitle?: {
-    color: Color;
-    content: string;
+    content: RichText;
   };
   image: {
     /** @description Image for big screens */
@@ -56,12 +54,10 @@ const DEFAULT_PROPS = {
       },
       matcher: "/*",
       title: {
-        color: "#fff",
-        content: "Título",
+        content: "<p>Título</p>",
       },
       subtitle: {
-        color: "#fff",
-        content: "Subtítulo",
+        content: "<p>Subtítulo</p>",
       },
     },
   ],
@@ -100,21 +96,17 @@ function Banner(props: SectionProps<ReturnType<typeof loader>>) {
 
       <div class="container flex flex-col gap-4 items-center justify-center sm:items-start col-start-1 col-span-1 row-start-1 row-span-1 w-full px-4">
         {title && (
-          <h1
-            style={{ color: title.color }}
-            class="w-full text-5xl font-medium"
-          >
-            {title.content}
-          </h1>
+          <div
+            dangerouslySetInnerHTML={{ __html: title.content }}
+            class="w-full font-medium"
+          />
         )}
 
         {subtitle && (
-          <h2
-            style={{ color: subtitle.color }}
-            class="w-full text-xl font-medium"
-          >
-            {subtitle.content}
-          </h2>
+          <div
+            dangerouslySetInnerHTML={{ __html: subtitle.content }}
+            class="w-full font-medium"
+          />
         )}
       </div>
     </div>