@medalsocial/meda
Version:
Shared Meda UI shell and runtime package.
31 lines (30 loc) • 2.65 kB
JavaScript
'use client';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { MarketingNavItem } from './marketing-nav-item.js';
import { cx } from './utils.js';
const DEFAULT_SIGN_IN = '/sign-in';
const DEFAULT_SIGN_UP = '/sign-up';
const DEFAULT_APP = '/app';
function DefaultLoggedOut({ signInHref, signUpHref }) {
return (_jsxs(_Fragment, { children: [_jsx("a", { href: signInHref, className: "text-sm text-foreground/80 hover:text-foreground", children: "Sign in" }), _jsx("a", { href: signUpHref, className: "inline-flex items-center rounded-full bg-primary px-4 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90", children: "Start free" })] }));
}
function DefaultLoggedIn({ appHref }) {
return (_jsx("a", { href: appHref, className: "inline-flex items-center rounded-full bg-primary px-4 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90", children: "Open dashboard" }));
}
export function MarketingHeader({ logo, navItems = [], user, signInHref = DEFAULT_SIGN_IN, signUpHref = DEFAULT_SIGN_UP, appHref = DEFAULT_APP, rightSlot, toggles, renderLoggedOut, renderLoggedIn, className, }) {
const [openId, setOpenId] = useState(null);
let right;
if (rightSlot !== undefined) {
right = rightSlot;
}
else if (user) {
right = renderLoggedIn ? (renderLoggedIn(user, { appHref })) : (_jsx(DefaultLoggedIn, { appHref: appHref }));
}
else {
right = renderLoggedOut ? (renderLoggedOut({ signInHref, signUpHref })) : (_jsx(DefaultLoggedOut, { signInHref: signInHref, signUpHref: signUpHref }));
}
const activeItem = navItems.find((i) => i.id === openId);
const activePanel = activeItem && 'panel' in activeItem ? activeItem.panel : undefined;
return (_jsxs("nav", { "aria-label": "Primary", className: "relative", onMouseLeave: () => setOpenId(null), children: [_jsxs("div", { className: cx('mx-auto flex w-full max-w-6xl items-center justify-between rounded-full border border-border/60 bg-background/70 px-4 py-2 backdrop-blur supports-[backdrop-filter]:bg-background/50', className), children: [_jsxs("div", { className: "flex items-center gap-6", children: [logo, _jsx("ul", { className: "hidden items-center gap-1 md:flex", children: navItems.map((item) => (_jsx("li", { children: _jsx(MarketingNavItem, { ...item, open: openId === item.id, onToggle: item.hasMenu ? () => setOpenId(openId === item.id ? null : item.id) : undefined }) }, item.id))) })] }), _jsxs("div", { className: "flex items-center gap-3", children: [toggles, right] })] }), activePanel] }));
}