@qobo/banner

Shared banner component for all Qobo-generated projects. Displays "Made with ❤️ by qobo.dev" with visibility controlled by the backend.

Installation

npm install @qobo/banner

Usage

import { QoboBanner } from '@qobo/banner';

export default function App() {
  return (
    <>
      <QoboBanner />
      {/* Rest of your app */}
    </>
  );
}

Features

• Consistent UI: Same banner styling across all Qobo projects
• Backend controlled: Visibility managed via /api/show-banner endpoint
• API Key integrated: Automatically uses VITE_API_KEY from environment
• 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:

<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+):

<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

Required in your .env file:

VITE_API_BASE_URL=https://api.qobo.dev
VITE_API_KEY=your_api_key_here

License

MIT