302 lines
11 KiB
TypeScript
302 lines
11 KiB
TypeScript
import { ComponentConfig } from "@reacteditor/core";
|
||
import { Menu as MenuIcon, ShoppingBag, Search, User, X } from "lucide-react";
|
||
import { useState } from "react";
|
||
import { useShopifyCart } from "~/editor/hooks/use-shopify-cart";
|
||
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "~/editor/components/ui/sheet";
|
||
import { cn } from "~/editor/lib/utils";
|
||
|
||
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";
|
||
};
|
||
|
||
function Navigation({
|
||
brand,
|
||
links,
|
||
showSearch,
|
||
showAccount,
|
||
showCart,
|
||
sticky,
|
||
tone,
|
||
}: NavigationProps) {
|
||
const [mobileOpen, setMobileOpen] = useState(false);
|
||
const [cartOpen, setCartOpen] = useState(false);
|
||
const cart = useShopifyCart();
|
||
const itemCount = cart?.itemCount ?? 0;
|
||
|
||
const toneClass: Record<NavigationProps["tone"], string> = {
|
||
default: "bg-background text-foreground border-b border-border",
|
||
muted: "bg-muted/40 text-foreground border-b border-border",
|
||
inverse: "bg-foreground text-background",
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<header
|
||
className={cn(
|
||
"w-full",
|
||
sticky === "yes" && "sticky top-0 z-40 backdrop-blur",
|
||
toneClass[tone],
|
||
)}
|
||
>
|
||
<div className="container mx-auto flex h-16 max-w-7xl items-center justify-between px-6 md:h-20">
|
||
<a
|
||
href="/"
|
||
className="font-semibold tracking-tight"
|
||
style={{ fontSize: "1.125rem", letterSpacing: "0.02em" }}
|
||
>
|
||
{brand}
|
||
</a>
|
||
|
||
<nav className="hidden items-center gap-8 md:flex">
|
||
{links.map((l) => (
|
||
<a
|
||
key={l.href + l.label}
|
||
href={l.href}
|
||
className="text-sm tracking-wide opacity-80 transition-opacity hover:opacity-100"
|
||
>
|
||
{l.label}
|
||
</a>
|
||
))}
|
||
</nav>
|
||
|
||
<div className="flex items-center gap-1">
|
||
{showSearch === "yes" && (
|
||
<button
|
||
aria-label="Search"
|
||
className="hidden h-10 w-10 items-center justify-center rounded-full transition-colors hover:bg-foreground/5 md:inline-flex"
|
||
>
|
||
<Search size={18} strokeWidth={1.5} />
|
||
</button>
|
||
)}
|
||
{showAccount === "yes" && (
|
||
<a
|
||
href="/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} />
|
||
</a>
|
||
)}
|
||
{showCart === "yes" && (
|
||
<button
|
||
onClick={() => setCartOpen(true)}
|
||
aria-label="Cart"
|
||
className="relative inline-flex h-10 w-10 items-center justify-center rounded-full transition-colors hover:bg-foreground/5"
|
||
>
|
||
<ShoppingBag size={18} strokeWidth={1.5} />
|
||
{itemCount > 0 && (
|
||
<span className="absolute -right-0.5 -top-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-foreground px-1 text-[10px] font-medium text-background">
|
||
{itemCount}
|
||
</span>
|
||
)}
|
||
</button>
|
||
)}
|
||
<button
|
||
onClick={() => setMobileOpen(true)}
|
||
aria-label="Menu"
|
||
className="inline-flex h-10 w-10 items-center justify-center rounded-full transition-colors hover:bg-foreground/5 md:hidden"
|
||
>
|
||
<MenuIcon size={20} strokeWidth={1.5} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
{/* Mobile menu */}
|
||
<Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
|
||
<SheetContent side="right" className="w-[88vw] max-w-sm">
|
||
<SheetHeader>
|
||
<SheetTitle className="text-left">{brand}</SheetTitle>
|
||
</SheetHeader>
|
||
<nav className="mt-6 flex flex-col gap-1">
|
||
{links.map((l) => (
|
||
<a
|
||
key={l.href + l.label}
|
||
href={l.href}
|
||
className="rounded-md px-3 py-3 text-base hover:bg-muted"
|
||
>
|
||
{l.label}
|
||
</a>
|
||
))}
|
||
</nav>
|
||
</SheetContent>
|
||
</Sheet>
|
||
|
||
{/* Cart drawer */}
|
||
<Sheet open={cartOpen} onOpenChange={setCartOpen}>
|
||
<SheetContent side="right" className="flex w-[92vw] max-w-md flex-col">
|
||
<SheetHeader>
|
||
<SheetTitle className="flex items-center justify-between text-left">
|
||
<span>Cart</span>
|
||
<button
|
||
onClick={() => setCartOpen(false)}
|
||
className="rounded-full p-1 hover:bg-muted"
|
||
aria-label="Close cart"
|
||
>
|
||
<X size={16} />
|
||
</button>
|
||
</SheetTitle>
|
||
</SheetHeader>
|
||
|
||
<div className="-mx-6 mt-4 flex-1 overflow-y-auto px-6">
|
||
{cart?.items?.length ? (
|
||
<ul className="divide-y divide-border">
|
||
{cart.items.map((line: any) => (
|
||
<li key={line.id} className="flex gap-4 py-4">
|
||
<div className="aspect-square h-20 flex-shrink-0 overflow-hidden rounded-md bg-muted">
|
||
{line.merchandise?.product?.images?.edges?.[0]?.node?.url ? (
|
||
<img
|
||
src={line.merchandise.product.images.edges[0].node.url}
|
||
alt={line.merchandise.product.title}
|
||
className="h-full w-full object-cover"
|
||
/>
|
||
) : null}
|
||
</div>
|
||
<div className="flex flex-1 flex-col">
|
||
<p className="text-sm font-medium">{line.merchandise?.product?.title}</p>
|
||
{line.merchandise?.title && line.merchandise.title !== "Default Title" ? (
|
||
<p className="text-xs text-muted-foreground">{line.merchandise.title}</p>
|
||
) : null}
|
||
<div className="mt-auto flex items-center justify-between">
|
||
<div className="flex items-center gap-2 text-xs">
|
||
<button
|
||
onClick={() => cart.updateItemQuantity(line.id, line.quantity - 1)}
|
||
className="h-6 w-6 rounded-full border border-border hover:bg-muted"
|
||
>
|
||
−
|
||
</button>
|
||
<span>{line.quantity}</span>
|
||
<button
|
||
onClick={() => cart.updateItemQuantity(line.id, line.quantity + 1)}
|
||
className="h-6 w-6 rounded-full border border-border hover:bg-muted"
|
||
>
|
||
+
|
||
</button>
|
||
</div>
|
||
<span className="text-sm">
|
||
{line.merchandise?.price
|
||
? new Intl.NumberFormat("en-US", {
|
||
style: "currency",
|
||
currency: line.merchandise.price.currencyCode,
|
||
}).format(parseFloat(line.merchandise.price.amount) * line.quantity)
|
||
: null}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
) : (
|
||
<div className="flex h-full flex-col items-center justify-center gap-3 text-center text-sm text-muted-foreground">
|
||
<ShoppingBag size={28} strokeWidth={1.25} />
|
||
<p>Your cart is empty.</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{cart?.items?.length ? (
|
||
<div className="border-t border-border pt-4">
|
||
<div className="mb-4 flex items-center justify-between text-sm">
|
||
<span className="text-muted-foreground">Subtotal</span>
|
||
<span className="font-medium">
|
||
{new Intl.NumberFormat("en-US", {
|
||
style: "currency",
|
||
currency: cart.cart?.cost?.totalAmount?.currencyCode ?? "USD",
|
||
}).format(cart.totalAmount)}
|
||
</span>
|
||
</div>
|
||
<a
|
||
href={cart.checkoutUrl ?? "#"}
|
||
className="inline-flex w-full items-center justify-center rounded-full bg-foreground px-4 py-3 text-sm font-medium text-background transition-opacity hover:opacity-90"
|
||
>
|
||
Checkout
|
||
</a>
|
||
</div>
|
||
) : null}
|
||
</SheetContent>
|
||
</Sheet>
|
||
</>
|
||
);
|
||
}
|
||
|
||
export const navigationEditor: ComponentConfig<NavigationProps> = {
|
||
label: "Navigation",
|
||
icon: <MenuIcon size={16} />,
|
||
category: "navigation",
|
||
defaultProps: {
|
||
brand: "Maison",
|
||
links: [
|
||
{ label: "Shop", href: "/collections" },
|
||
{ label: "Lookbook", href: "/lookbook" },
|
||
{ label: "Journal", href: "/journal" },
|
||
{ label: "About", href: "/about" },
|
||
],
|
||
showSearch: "yes",
|
||
showAccount: "yes",
|
||
showCart: "yes",
|
||
sticky: "yes",
|
||
tone: "default",
|
||
},
|
||
fields: {
|
||
brand: { label: "Brand", type: "text", contentEditable: true },
|
||
links: {
|
||
label: "Links",
|
||
type: "array",
|
||
defaultItemProps: { label: "Link", href: "/" },
|
||
getItemSummary: (it) => it?.label || "Link",
|
||
arrayFields: {
|
||
label: { label: "Label", type: "text", contentEditable: true },
|
||
href: { label: "Link", type: "text" },
|
||
},
|
||
},
|
||
showSearch: {
|
||
label: "Search icon",
|
||
type: "radio",
|
||
options: [
|
||
{ label: "Show", value: "yes" },
|
||
{ label: "Hide", value: "no" },
|
||
],
|
||
},
|
||
showAccount: {
|
||
label: "Account icon",
|
||
type: "radio",
|
||
options: [
|
||
{ label: "Show", value: "yes" },
|
||
{ label: "Hide", value: "no" },
|
||
],
|
||
},
|
||
showCart: {
|
||
label: "Cart icon",
|
||
type: "radio",
|
||
options: [
|
||
{ label: "Show", value: "yes" },
|
||
{ label: "Hide", value: "no" },
|
||
],
|
||
},
|
||
sticky: {
|
||
label: "Position",
|
||
type: "radio",
|
||
options: [
|
||
{ label: "Sticky", value: "yes" },
|
||
{ label: "Static", value: "no" },
|
||
],
|
||
},
|
||
tone: {
|
||
label: "Tone",
|
||
type: "select",
|
||
options: [
|
||
{ label: "Default", value: "default" },
|
||
{ label: "Muted", value: "muted" },
|
||
{ label: "Inverse (dark)", value: "inverse" },
|
||
],
|
||
},
|
||
},
|
||
render: (props) => <Navigation {...props} />,
|
||
};
|