91 lines
2.7 KiB
TypeScript
91 lines
2.7 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import Link from "next/link";
|
||
|
|
import { LayoutGrid } from "lucide-react";
|
||
|
|
|
||
|
|
import {
|
||
|
|
IMAGE_MAKER_NAV,
|
||
|
|
LEARN_NAV_ITEMS,
|
||
|
|
VIDEO_MAKER_NAV,
|
||
|
|
} from "@/lib/navbar-menu-data";
|
||
|
|
|
||
|
|
interface NavbarMobileMenuProps {
|
||
|
|
onNavigate: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const linkClass =
|
||
|
|
"flex min-h-11 items-center rounded-lg px-3 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900";
|
||
|
|
|
||
|
|
export function NavbarMobileMenu({ onNavigate }: NavbarMobileMenuProps) {
|
||
|
|
return (
|
||
|
|
<div className="flex flex-1 flex-col gap-6 overflow-y-auto">
|
||
|
|
<section>
|
||
|
|
<p className="px-3 text-xs font-semibold uppercase tracking-wide text-gray-400">
|
||
|
|
Video Maker
|
||
|
|
</p>
|
||
|
|
<Link
|
||
|
|
href={VIDEO_MAKER_NAV.browseHref}
|
||
|
|
onClick={onNavigate}
|
||
|
|
className="mt-1 flex min-h-11 items-center gap-2 rounded-lg px-3 text-sm font-semibold text-blue-600 hover:bg-blue-50"
|
||
|
|
>
|
||
|
|
<LayoutGrid className="h-4 w-4" aria-hidden />
|
||
|
|
{VIDEO_MAKER_NAV.browseLabel}
|
||
|
|
</Link>
|
||
|
|
<ul className="mt-1 space-y-0.5">
|
||
|
|
{VIDEO_MAKER_NAV.items.map((item) => (
|
||
|
|
<li key={item.href}>
|
||
|
|
<Link href={item.href} onClick={onNavigate} className={linkClass}>
|
||
|
|
{item.label}
|
||
|
|
</Link>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<p className="px-3 text-xs font-semibold uppercase tracking-wide text-gray-400">
|
||
|
|
Image Maker
|
||
|
|
</p>
|
||
|
|
<Link
|
||
|
|
href={IMAGE_MAKER_NAV.browseHref}
|
||
|
|
onClick={onNavigate}
|
||
|
|
className="mt-1 flex min-h-11 items-center gap-2 rounded-lg px-3 text-sm font-semibold text-blue-600 hover:bg-blue-50"
|
||
|
|
>
|
||
|
|
<LayoutGrid className="h-4 w-4" aria-hidden />
|
||
|
|
{IMAGE_MAKER_NAV.browseLabel}
|
||
|
|
</Link>
|
||
|
|
<ul className="mt-1 space-y-0.5">
|
||
|
|
{IMAGE_MAKER_NAV.items.map((item) => (
|
||
|
|
<li key={item.href}>
|
||
|
|
<Link href={item.href} onClick={onNavigate} className={linkClass}>
|
||
|
|
{item.label}
|
||
|
|
</Link>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<Link href="/pricing" onClick={onNavigate} className={linkClass}>
|
||
|
|
Pricing
|
||
|
|
</Link>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<p className="px-3 text-xs font-semibold uppercase tracking-wide text-gray-400">
|
||
|
|
Learn
|
||
|
|
</p>
|
||
|
|
<ul className="mt-1 space-y-0.5">
|
||
|
|
{LEARN_NAV_ITEMS.map((item) => (
|
||
|
|
<li key={item.href}>
|
||
|
|
<Link href={item.href} onClick={onNavigate} className={linkClass}>
|
||
|
|
{item.label}
|
||
|
|
</Link>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|