add skeleton resolvers

editor/components/navigation/navigation.editor.tsx

@@ -16,10 +16,11 @@ export const navigationEditor: ComponentConfig<NavigationProps> = {
       { label: "About", href: "/about" },
     ],
     showSearch: "yes",
-    showAccount: "yes",
     showCart: "yes",
     sticky: "yes",
     tone: "default",
+    bannerText: "",
+    bannerTone: "accent",
   },
   fields: {
     brand: { label: "Brand", type: "text", contentEditable: true },
@@ -33,16 +34,22 @@ export const navigationEditor: ComponentConfig<NavigationProps> = {
         href: { label: "Link", type: "text" },
       },
     },
-    showSearch: {
-      label: "Search icon",
-      type: "radio",
+    bannerText: {
+      label: "Banner text",
+      type: "text",
+      contentEditable: true,
+    },
+    bannerTone: {
+      label: "Banner tone",
+      type: "select",
       options: [
-        { label: "Show", value: "yes" },
-        { label: "Hide", value: "no" },
+        { label: "Default", value: "default" },
+        { label: "Accent", value: "accent" },
+        { label: "Inverse (dark)", value: "inverse" },
       ],
     },
-    showAccount: {
-      label: "Account icon",
+    showSearch: {
+      label: "Search icon",
       type: "radio",
       options: [
         { label: "Show", value: "yes" },

editor/components/navigation/navigation.tsx

@@ -1,4 +1,4 @@
-import { Menu as MenuIcon, ShoppingBag, Search, User } from "lucide-react";
+import { Menu as MenuIcon, ShoppingBag, Search } from "lucide-react";
 import { useState } from "react";
 import { Link } from "react-router";
 import { useShopifyCart } from "@/editor/hooks/use-shopify-cart";
@@ -9,20 +9,22 @@ export type NavigationProps = {
   brand: string;
   links: Array<{ label: string; href: string }>;
   showSearch: "yes" | "no";
-  showAccount: "yes" | "no";
   showCart: "yes" | "no";
   sticky: "yes" | "no";
   tone: "default" | "muted" | "inverse";
+  bannerText: string;
+  bannerTone: "default" | "accent" | "inverse";
 };
 
 export function Navigation({
   brand,
   links,
   showSearch,
-  showAccount,
   showCart,
   sticky,
   tone,
+  bannerText,
+  bannerTone,
 }: NavigationProps) {
   const [mobileOpen, setMobileOpen] = useState(false);
   const [cartOpen, setCartOpen] = useState(false);
@@ -35,12 +37,33 @@ export function Navigation({
     inverse: "bg-foreground text-background",
   };
 
+  const bannerToneClass: Record<NavigationProps["bannerTone"], string> = {
+    default: "bg-muted text-foreground",
+    accent: "bg-primary text-primary-foreground",
+    inverse: "bg-foreground text-background",
+  };
+
+  const hasBanner = typeof bannerText === "string" && bannerText.trim().length > 0;
+
   return (
     <>
+      <div
+        className={cn(
+          "w-full",
+          sticky === "yes" && "sticky top-0 z-40",
+        )}
+      >
+        {hasBanner && (
+          <div className={cn("w-full", bannerToneClass[bannerTone])}>
+            <div className="container mx-auto max-w-7xl px-6 py-2 text-center text-xs tracking-wide md:text-sm">
+              {bannerText}
+            </div>
+          </div>
+        )}
       <header
         className={cn(
           "w-full",
-          sticky === "yes" && "sticky top-0 z-40 backdrop-blur",
+          sticky === "yes" && "backdrop-blur",
           toneClass[tone],
         )}
       >
@@ -74,15 +97,6 @@ export function Navigation({
                 <Search size={18} strokeWidth={1.5} />
               </button>
             )}
-            {showAccount === "yes" && (
-              <Link
-                to="/account"
-                aria-label="Account"
-                className="hidden h-10 w-10 items-center justify-center rounded-full transition-colors hover:bg-foreground/5 md:inline-flex"
-              >
-                <User size={18} strokeWidth={1.5} />
-              </Link>
-            )}
             {showCart === "yes" && (
               <button
                 onClick={() => setCartOpen(true)}
@@ -107,6 +121,7 @@ export function Navigation({
           </div>
         </div>
       </header>
+      </div>
 
       {/* Mobile menu */}
       <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>