added post modal for feed on map

2026-08-27 01:30:03 +03:00
parent 69e929efbf
commit 408a97e5b2
11 changed files with 512 additions and 27 deletions
--- a/src/components/nav/BottomNav.jsx
+++ b/src/components/nav/BottomNav.jsx
@@ -0,0 +1,103 @@
+import ProfileAvatar from "../profile/ProfileAvatar";
+
+const HomeIcon = () => (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <path d="m3 10.5 9-7.5 9 7.5v9a2 2 0 0 1-2 2h-4.5v-6h-5v6H5a2 2 0 0 1-2-2z" />
+    </svg>
+);
+
+const MapIcon = () => (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z" />
+      <path d="M15 5.764v15" />
+      <path d="M9 3.236v15" />
+    </svg>
+);
+
+const PlusIcon = () => (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.6} strokeLinecap="round">
+      <line x1="12" y1="5" x2="12" y2="19" />
+      <line x1="5" y1="12" x2="19" y2="12" />
+    </svg>
+);
+
+const SearchIcon = () => (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="11" cy="11" r="8" />
+      <path d="m21 21-4.35-4.35" />
+    </svg>
+);
+
+/**
+ * BottomNav — нижняя навигационная панель в стиле Instagram.
+ * 5 вкладок: Главная / Карта / Разместить / Поиск / Профиль.
+ * Активная вкладка определяется по текущему роуту (activeTab сверху).
+ */
+export default function BottomNav({
+  activeTab = "home",
+  hasFilters = false,
+  profileData,
+  onHome,
+  onMap,
+  onCreatePost,
+  onSearch,
+  onProfile,
+  t,
+}) {
+  const profileName = `${profileData?.firstName || ""} ${profileData?.lastName || ""}`.trim();
+
+  return (
+      <nav className="f-bottom-nav" aria-label="bottom-nav">
+        <button
+            type="button"
+            className={`f-bn-item${activeTab === "home" ? " active" : ""}`}
+            onClick={onHome}
+            aria-label={t("nav.home")}
+            title={t("nav.home")}
+        >
+          <HomeIcon />
+        </button>
+
+        <button
+            type="button"
+            className={`f-bn-item${activeTab === "map" ? " active" : ""}`}
+            onClick={onMap}
+            aria-label={t("nav.map")}
+            title={t("nav.map")}
+        >
+          <MapIcon />
+        </button>
+
+        <button
+            type="button"
+            className="f-bn-item f-bn-create"
+            onClick={onCreatePost}
+            aria-label={t("nav.create")}
+            title={t("nav.create")}
+        >
+          <PlusIcon />
+        </button>
+
+        <button
+            type="button"
+            className={`f-bn-item${activeTab === "search" ? " active" : ""}`}
+            onClick={onSearch}
+            aria-label={t("nav.search")}
+            title={t("nav.search")}
+        >
+          <SearchIcon />
+          {hasFilters && <span className="f-bn-dot" />}
+        </button>
+
+        <button
+            type="button"
+            className="f-bn-item f-bn-profile"
+            onClick={onProfile}
+            aria-label={t("nav.profile")}
+            title={t("nav.profile")}
+        >
+          <ProfileAvatar avatar={profileData?.avatar} name={profileName} />
+        </button>
+      </nav>
+  );
+}