Update buildShowCase section to hide title

deco-sites · Aug 20, 2024 · 439aa3a · 439aa3a
1 parent 5ba1ec7
commit 439aa3a
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 70 deletions.
diff --git a/islands/Home/BuildShowcase.tsx b/islands/Home/BuildShowcase.tsx
@@ -11,6 +11,10 @@ export interface Props {
    * @default Click here to tweak this text however you want.
    */
   title?: string;
+  /**
+   * @default true
+   */
+  showTitle?: boolean;
   /**
    * @format html
    */
@@ -20,11 +24,7 @@ export interface Props {
   trackId?: "1" | "2" | "3" | "4" | "5";
 }
 
-export const loader = (
-  props: Props,
-  _req: Request,
-  ctx: AppContext,
-) => {
+export const loader = (props: Props, _req: Request, ctx: AppContext) => {
   const device = ctx.device;
 
   return {
@@ -35,6 +35,7 @@ export const loader = (
 
 export default function BuildShowCase({
   title,
+  showTitle = true,
   subtitle,
   tabs,
   position,
@@ -53,38 +54,38 @@ export default function BuildShowCase({
       id="hero"
       class={`relative bg-black py-20 lg:px-[120px] space-y-16 lg:space-y-20 px-6 min-h-[840px]`}
     >
-      <div class="mx-auto flex flex-col items-center gap-16 lg:gap-20 border-t border-[#16E47D]">
-        <div class="flex flex-col items-center gap-4 border-t border-[#16E47D]">
-          <div class="flex flex-col items-center gap-6 lg:gap-12 z-10">
-            <h2
-              class="mx-6 lg:mx-0 inline-block text-[32px] lg:text-[48px] text-center leading-[115%] lg:tracking-[-1.44px] font-medium text-white max-w- lg:max-w-none"
-              dangerouslySetInnerHTML={{
-                __html: title ?? "",
-              }}
-            >
-            </h2>
-            {subtitle && (
-              <h3
-                class="mx-11 inline-block lg:text-[26px] text-center leading-[150%] text-gray-400 max-w-lg lg:max-w-none"
+      {showTitle && (
+        <div class="mx-auto flex flex-col items-center gap-16 lg:gap-20 border-t border-[#16E47D]">
+          <div class="flex flex-col items-center gap-4 border-t border-[#16E47D]">
+            <div class="flex flex-col items-center gap-6 lg:gap-12 z-10">
+              <h2
+                class="mx-6 lg:mx-0 inline-block text-[32px] lg:text-[48px] text-center leading-[115%] lg:tracking-[-1.44px] font-medium text-white max-w- lg:max-w-none"
                 dangerouslySetInnerHTML={{
-                  __html: subtitle,
+                  __html: title ?? "",
                 }}
-              >
-              </h3>
-            )}
+              ></h2>
+              {subtitle && (
+                <h3
+                  class="mx-11 inline-block lg:text-[26px] text-center leading-[150%] text-gray-400 max-w-lg lg:max-w-none"
+                  dangerouslySetInnerHTML={{
+                    __html: subtitle,
+                  }}
+                ></h3>
+              )}
+            </div>
           </div>
         </div>
-      </div>
+      )}
       <div class="mx-auto flex flex-col items-center">
-        {isMobile === "desktop"
-          ? (
-            <ShowcaseEditorTabbed
-              tabs={tabs}
-              position={position}
-              trackId={trackId}
-            />
-          )
-          : <ShowcaseEditorAccordion tabs={tabs} />}
+        {isMobile === "desktop" ? (
+          <ShowcaseEditorTabbed
+            tabs={tabs}
+            position={position}
+            trackId={trackId}
+          />
+        ) : (
+          <ShowcaseEditorAccordion tabs={tabs} />
+        )}
       </div>
     </div>
   );

diff --git a/islands/NRF/ShowcaseEditorTabbed.tsx b/islands/NRF/ShowcaseEditorTabbed.tsx
@@ -117,9 +117,9 @@ export const ShowcaseEditorTabbed = ({
         ref={containerRef}
         class={`flex flex-row ${
           position === "left" ? "" : "flex-row-reverse "
-        }w-full lg:max-w-[1440px] rounded-lg lg:rounded-3xl mx-2 justify-center gap-8 lg:mx-0 z-40 backdrop-blur-xl`}
+        }w-full lg:max-w-[1440px] rounded-lg lg:rounded-3xl mx-2 justify-center gap-4 lg:mx-0 z-40 backdrop-blur-xl`}
       >
-        <div class="flex flex-col w-full lg:w-[36%] justify-center h-full gap-x-8 text-white flex-wrap">
+        <div class="flex flex-col w-full lg:w-[36%] justify-center h-full gap-x-4 text-white flex-wrap">
           {tabs &&
             tabs.map((tab, index) => (
               <div
@@ -195,17 +195,17 @@ export const ShowcaseEditorTabbed = ({
             tabs.map((tab, index) => (
               <div
                 key={index}
-                class={`flex justify-center items-center w-full ${
+                class={`flex justify-center items-center w-[1000px] ${
                   index !== selectedTab.value ? "hidden" : ""
                 }`}
               >
                 <Image
                   src={tab.image}
                   alt={tab.title}
-                  width={840}
-                  height={560}
+                  width={600}
+                  height={400}
                   preload={index === 0 ? true : false}
-                  class="w-full max-w-[1000px]"
+                  class="w-[1000px]"
                 />
               </div>
             ))}

diff --git a/sections/Home/BuildShowcase.tsx b/sections/Home/BuildShowcase.tsx
@@ -11,6 +11,10 @@ export interface Props {
    * @default Click here to tweak this text however you want.
    */
   title?: string;
+  /**
+   * @default false
+   */
+  hideTitle?: boolean;
   /**
    * @format html
    */
@@ -20,11 +24,7 @@ export interface Props {
   trackId?: "1" | "2" | "3" | "4" | "5";
 }
 
-export const loader = (
-  props: Props,
-  _req: Request,
-  ctx: AppContext,
-) => {
+export const loader = (props: Props, _req: Request, ctx: AppContext) => {
   const device = ctx.device;
 
   return {
@@ -35,6 +35,7 @@ export const loader = (
 
 export default function BuildShowCase({
   title,
+  hideTitle,
   subtitle,
   tabs,
   position,
@@ -53,38 +54,38 @@ export default function BuildShowCase({
       id="hero"
       class={`relative bg-black py-20 lg:px-[120px] space-y-16 lg:space-y-20 px-6 min-h-[840px]`}
     >
-      <div class="mx-auto flex flex-col items-center gap-16 lg:gap-20 border-t border-[#16E47D]">
-        <div class="flex flex-col items-center gap-4 border-t border-[#16E47D]">
-          <div class="flex flex-col items-center gap-6 lg:gap-12 z-10">
-            <h2
-              class="mx-6 lg:mx-0 inline-block text-[32px] lg:text-[48px] text-center leading-[115%] lg:tracking-[-1.44px] font-medium text-white max-w- lg:max-w-none"
-              dangerouslySetInnerHTML={{
-                __html: title ?? "",
-              }}
-            >
-            </h2>
-            {subtitle && (
-              <h3
-                class="mx-11 inline-block lg:text-[26px] text-center leading-[150%] text-gray-400 max-w-lg lg:max-w-none"
+      {!hideTitle && (
+        <div class="mx-auto flex flex-col items-center gap-16 lg:gap-20 border-t border-[#16E47D]">
+          <div class="flex flex-col items-center gap-4 border-t border-[#16E47D]">
+            <div class="flex flex-col items-center gap-6 lg:gap-12 z-10">
+              <h2
+                class="mx-6 lg:mx-0 inline-block text-[32px] lg:text-[48px] text-center leading-[115%] lg:tracking-[-1.44px] font-medium text-white max-w- lg:max-w-none"
                 dangerouslySetInnerHTML={{
-                  __html: subtitle,
+                  __html: title ?? "",
                 }}
-              >
-              </h3>
-            )}
+              ></h2>
+              {subtitle && (
+                <h3
+                  class="mx-11 inline-block lg:text-[26px] text-center leading-[150%] text-gray-400 max-w-lg lg:max-w-none"
+                  dangerouslySetInnerHTML={{
+                    __html: subtitle,
+                  }}
+                ></h3>
+              )}
+            </div>
           </div>
         </div>
-      </div>
+      )}
       <div class="mx-auto flex flex-col items-center">
-        {isMobile === "desktop"
-          ? (
-            <ShowcaseEditorTabbed
-              tabs={tabs}
-              position={position}
-              trackId={trackId}
-            />
-          )
-          : <ShowcaseEditorAccordion tabs={tabs} />}
+        {isMobile === "desktop" ? (
+          <ShowcaseEditorTabbed
+            tabs={tabs}
+            position={position}
+            trackId={trackId}
+          />
+        ) : (
+          <ShowcaseEditorAccordion tabs={tabs} />
+        )}
       </div>
     </div>
   );