@qobo/banner 1.0.8 → 1.0.10

package/README.md

@@ -31,6 +31,39 @@ export default function App() {
 - **Error resilient**: Defaults to visible if API fails
 - **Layout shift prevention**: Initializes as visible before API response
 - **Responsive**: Works on all screen sizes
+- **Navbar positioning**: Sets CSS variable `--qobo-banner-height` (0px when hidden, 50px when visible) for sticky navbar positioning
+- **Sticky banner**: Uses sticky positioning so navbar can stick below it
+
+## Navbar Positioning
+
+The banner automatically sets a CSS variable `--qobo-banner-height` on the document root that you can use for sticky navbar positioning:
+
+- When banner is visible: `--qobo-banner-height` is `50px`
+- When banner is hidden: `--qobo-banner-height` is `0px`
+
+### Using with Tailwind CSS
+
+For your navbar component, use the CSS variable in your sticky positioning:
+
+```jsx
+<nav className="sticky z-[60] bg-white border-b" style={{ top: 'var(--qobo-banner-height, 0px)' }}>
+  {/* Navbar content */}
+</nav>
+```
+
+Or using Tailwind's arbitrary values (requires Tailwind 3.1+):
+
+```jsx
+<nav className="sticky z-[60] bg-white border-b" style={{ top: 'var(--qobo-banner-height)' }}>
+  {/* Navbar content */}
+</nav>
+```
+
+This ensures:
+- When `showBanner` is `true`: Navbar sticks below the banner (at 50px from top)
+- When `showBanner` is `false`: Navbar sticks to the top (at 0px from top)
+
+**Important**: The banner uses `z-index: 50` and sticky positioning. Your navbar should use a higher z-index (e.g., `z-60` or `z-[60]`) to stay visible when scrolling.
 
 ## Environment Variables
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qobo/banner",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "Shared Qobo banner component for all generated projects",
   "type": "module",
   "main": "dist/index.js",

package/src/QoboBanner.jsx

@@ -1,17 +1,19 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
 
 /**
  * QoboBanner Component - Shared across all Qobo-generated projects
- * 
+ *
  * Displays a banner with "Made with ❤️ by qobo.dev"
  * Visibility controlled by backend API endpoint /api/show-banner
- * 
+ *
  * The component automatically:
  * - Fetches banner visibility on mount
  * - Shows banner if showBanner: "true", hides if "false"
  * - Defaults to visible on error
  * - Links to https://qobo.dev in a new tab
  * - Has consistent styling across all projects
+ * - Sets CSS variable --qobo-banner-height for navbar positioning (0px when hidden, 50px when visible)
+ * - Banner uses sticky positioning so navbar can stick below it
  */
 export function QoboBanner({ apiKey, apiBaseUrl }) {
   const [isVisible, setIsVisible] = useState(false); // Start hidden until API responds
@@ -23,37 +25,52 @@ export function QoboBanner({ apiKey, apiBaseUrl }) {
     const fetchBannerVisibility = async () => {
       try {
         // Get API key from environment
-        const API_KEY = apiKey || import.meta.env.VITE_API_KEY || import.meta.env.REACT_APP_API_KEY;
-        const API_BASE_URL = apiBaseUrl || import.meta.env.VITE_API_BASE_URL || import.meta.env.REACT_APP_API_BASE_URL || 'https://api.qobo.dev';
+        const API_KEY =
+          apiKey ||
+          import.meta.env.VITE_API_KEY ||
+          import.meta.env.REACT_APP_API_KEY;
+        const API_BASE_URL =
+          apiBaseUrl ||
+          import.meta.env.VITE_API_BASE_URL ||
+          import.meta.env.REACT_APP_API_BASE_URL ||
+          "https://api.qobo.dev";
 
         if (!API_KEY) {
-          console.warn('[QoboBanner] API key not set (pass apiKey prop or set VITE_API_KEY), defaulting to visible');
+          console.warn(
+            "[QoboBanner] API key not set (pass apiKey prop or set VITE_API_KEY), defaulting to visible"
+          );
           setIsLoading(false);
           return;
         }
 
         const response = await fetch(`${API_BASE_URL}/api/v1/show-banner`, {
-          method: 'GET',
+          method: "GET",
           headers: {
-            'Content-Type': 'application/json',
-            'X-API-Key': API_KEY,
+            "Content-Type": "application/json",
+            "X-API-Key": API_KEY,
           },
-          cache: 'no-store',
+          cache: "no-store",
         });
 
         if (!response.ok) {
-          console.warn(`[QoboBanner] Failed to fetch banner visibility (${response.status}), defaulting to visible`);
+          console.warn(
+            `[QoboBanner] Failed to fetch banner visibility (${response.status}), defaulting to visible`
+          );
           setIsLoading(false);
           return;
         }
 
         const data = await response.json();
-        const showBannerValue = data.showBanner ?? data.data?.showBanner ?? 'true';
-        const showBanner = showBannerValue === 'true';
+        const showBannerValue =
+          data.showBanner ?? data.data?.showBanner ?? "true";
+        const showBanner = showBannerValue === "true";
         setIsVisible(showBanner);
         console.log(`[QoboBanner] Banner visibility: ${showBanner}`);
       } catch (error) {
-        console.warn('[QoboBanner] Error fetching banner visibility, defaulting to visible:', error.message);
+        console.warn(
+          "[QoboBanner] Error fetching banner visibility, defaulting to visible:",
+          error.message
+        );
         // Default to visible on error
         setIsVisible(true);
       } finally {
@@ -64,63 +81,75 @@ export function QoboBanner({ apiKey, apiBaseUrl }) {
     fetchBannerVisibility();
   }, [apiKey, apiBaseUrl]);
 
+  // Set CSS variable for banner height (always set, even when hidden)
+  // Navbars can use: top: var(--qobo-banner-height, 0px) for sticky positioning
+  useEffect(() => {
+    const bannerHeight = isVisible && !isLoading ? BANNER_HEIGHT : 0;
+    document.documentElement.style.setProperty(
+      "--qobo-banner-height",
+      `${bannerHeight}px`
+    );
+
+    return () => {
+      // Cleanup: reset to 0 when component unmounts
+      document.documentElement.style.setProperty("--qobo-banner-height", "0px");
+    };
+  }, [isVisible, isLoading, BANNER_HEIGHT]);
+
   if (isLoading) return null;
   if (!isVisible) return null;
 
   return (
-    <>
-      <div aria-hidden="true" style={{ height: `${BANNER_HEIGHT}px`, width: '100%' }} />
-      <div
-        className="w-full bg-gradient-to-r from-cyan-400 to-blue-500 text-white py-2 px-4 text-center text-sm font-medium shadow-md"
+    <div
+      className="w-full bg-gradient-to-r from-cyan-400 to-blue-500 text-white py-2 px-4 text-center text-sm font-medium shadow-md"
+      style={{
+        position: "sticky",
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: 50,
+        height: `${BANNER_HEIGHT}px`,
+        background: "linear-gradient(90deg, #FF7A2F 0%, #46C6B9 100%)",
+        color: "#F1F5F9",
+        padding: "12px 16px",
+        textAlign: "center",
+        fontSize: "0.95rem",
+        fontWeight: "600",
+        letterSpacing: "0.01em",
+        fontFamily: '"Inter", "Segoe UI", system-ui, -apple-system, sans-serif',
+        boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
+        transition: "all 0.3s ease",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      Made with{" "}
+      <span
+        style={{
+          color: "#FF1744",
+          display: "inline-block",
+          margin: "0 0.35rem",
+        }}
+      >
+        ❤️
+      </span>{" "}
+      by{" "}
+      <a
+        href="https://qobo.dev"
+        target="_blank"
+        rel="noopener noreferrer"
         style={{
-          position: 'fixed',
-          top: 0,
-          left: 0,
-          right: 0,
-          zIndex: 9999,
-          height: `${BANNER_HEIGHT}px`,
-          background: 'linear-gradient(90deg, #FF7A2F 0%, #46C6B9 100%)',
-          color: '#F1F5F9',
-          padding: '12px 16px',
-          textAlign: 'center',
-          fontSize: '0.95rem',
-          fontWeight: '600',
-          letterSpacing: '0.01em',
-          fontFamily: '"Inter", "Segoe UI", system-ui, -apple-system, sans-serif',
-          boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
-          transition: 'all 0.3s ease',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
+          color: "#F1F5F9",
+          textDecoration: "underline",
+          fontWeight: "700",
+          cursor: "pointer",
         }}
+        className="hover:text-cyan-100 transition-colors ml-2"
       >
-        Made with{' '}
-        <span
-          style={{
-            color: '#FF1744',
-            display: 'inline-block',
-            margin: '0 0.35rem',
-          }}
-        >
-          ❤️
-        </span>{' '}
-        by{' '}
-        <a
-          href="https://qobo.dev"
-          target="_blank"
-          rel="noopener noreferrer"
-          style={{
-            color: '#F1F5F9',
-            textDecoration: 'underline',
-            fontWeight: '700',
-            cursor: 'pointer',
-          }}
-          className="hover:text-cyan-100 transition-colors"
-        >
-          qobo.dev
-        </a>
-      </div>
-    </>
+        qobo.dev
+      </a>
+    </div>
   );
 }
 

package/src/index.js

@@ -1 +1,2 @@
 export { QoboBanner, default } from './QoboBanner.jsx';
+export { BannerProvider, useBannerVisibility } from './BannerContext.jsx';