feat: full studio build -- light theme, canvas thumbnails, i18n (fa/en)

2026-05-24 17:37:21 +03:30
parent d962483359
commit c61f587767
295 changed files with 29797 additions and 265 deletions
@@ -0,0 +1,90 @@
+"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>
+  );
+}