refactor: use images for editor tabbed

deco-sites · Jan 9, 2024 · 64dd189 · 64dd189
1 parent 61749c7
commit 64dd189
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 42 deletions.
diff --git a/islands/NRF/HeroEditorTabbed.tsx b/islands/NRF/HeroEditorTabbed.tsx
@@ -1,52 +1,47 @@
 import { useSignal } from "@preact/signals";
-import { SectionLibrary } from "deco-sites/starting/components/nrf/hero/SectionLibrary.tsx";
-import { NoCodeEditor } from "deco-sites/starting/components/nrf/hero/NoCodeEditor.tsx";
-import { FullCodeEditor } from "deco-sites/starting/components/nrf/hero/FullCodeEditor.tsx";
-import { WebAnalytics } from "deco-sites/starting/components/nrf/hero/WebAnalytics.tsx";
-import { Monitoring } from "deco-sites/starting/components/nrf/hero/Monitoring.tsx";
+import type { ImageWidget } from "apps/admin/widgets.ts";
 
-const TABS = [
-  "Section Library",
-  "No Code Editor",
-  "Full Code Editor",
-  "Web Analytics",
-  "Monitoring",
-];
+export interface Tab {
+  title: string;
+  image: ImageWidget;
+}
 
-const PANELS = [
-  SectionLibrary,
-  NoCodeEditor,
-  FullCodeEditor,
-  WebAnalytics,
-  Monitoring,
-];
+export interface Props {
+  tabs?: Tab[];
+}
 
-export const HeroEditorTabbed = () => {
+export const HeroEditorTabbed = ({ tabs }: Props) => {
   const selectedTab = useSignal(0);
   return (
     <div class="lg:w-full lg:max-w-6xl py-4 lg:py-2 p-2 bg-white/5 border border-white/5 rounded-lg lg:rounded-3xl space-y-2 mx-2 lg:mx-0 z-40 backdrop-blur-xl">
       <div class="flex justify-center gap-x-8 gap-2 text-white flex-wrap items-center">
-        {TABS.map((tab, index) => (
-          <button
-            onClick={() => {
-              selectedTab.value = index;
-            }}
-            class={`text-[12px] lg:text-[18px] py-2 font-medium border-b ${
-              index === selectedTab.value
-                ? "text-[#02F67C] border-[#02F67C]"
-                : "text-white border-transparent"
-            }`}
-          >
-            {tab}
-          </button>
-        ))}
+        {tabs &&
+          tabs.map((tab, index) => (
+            <button
+              onClick={() => {
+                selectedTab.value = index;
+              }}
+              class={`text-[12px] lg:text-[18px] py-2 font-medium border-b ${
+                index === selectedTab.value
+                  ? "text-[#02F67C] border-[#02F67C]"
+                  : "text-white border-transparent"
+              }`}
+            >
+              {tab.title}
+            </button>
+          ))}
       </div>
       <div>
-        {PANELS.map((panel, index) => (
-          <div class={`${index === selectedTab.value ? "block" : "hidden"}`}>
-            {panel()}
-          </div>
-        ))}
+        {tabs &&
+          tabs.map((tab, index) => (
+            <div
+              class={`flex justify-center items-center ${
+                index !== selectedTab.value ? "hidden" : ""
+              }`}
+            >
+              <img src={tab.image} alt={tab.title} />
+            </div>
+          ))}
       </div>
     </div>
   );

diff --git a/sections/NRF/Hero.tsx b/sections/NRF/Hero.tsx
@@ -1,11 +1,15 @@
-import { HeroEditorTabbed } from "deco-sites/starting/islands/NRF/HeroEditorTabbed.tsx";
+import {
+  HeroEditorTabbed,
+  Tab,
+} from "deco-sites/starting/islands/NRF/HeroEditorTabbed.tsx";
 import type { ImageWidget } from "apps/admin/widgets.ts";
 
 interface CTA {
   href: string;
   text: string;
   variant: "Normal" | "Reverse";
 }
+
 export interface Props {
   /**
    * @format html
@@ -22,9 +26,10 @@ export interface Props {
     mobileText?: string;
     href?: string;
   };
+  tabs?: Tab[];
 }
 
-export default function Hero({ title, subtitle, cta, alert }: Props) {
+export default function Hero({ title, subtitle, cta, alert, tabs }: Props) {
   return (
     <div
       id="hero"
@@ -96,7 +101,7 @@ export default function Hero({ title, subtitle, cta, alert }: Props) {
         </div>
       </div>
       <div class="mx-auto flex flex-col items-center">
-        <HeroEditorTabbed />
+        <HeroEditorTabbed tabs={tabs} />
       </div>
     </div>
   );