added 1RM and macro calculators to fitness dashboard.

2026-09-17 17:48:26 +05:30
commit 21f1ce7918
50 changed files with 14396 additions and 0 deletions
@@ -0,0 +1,97 @@
+"use client";
+
+import { motion, AnimatePresence } from "framer-motion";
+import { Search, Compass, TrendingUp, Hash } from "lucide-react";
+import { MOCK_POSTS } from "@/lib/mock-data";
+import { PostCard } from "@/components/feed/PostCard";
+import { useState } from "react";
+
+const TRENDING_TAGS = ["#streetwear", "#architecture", "#minimalism", "#neonLights", "#coffeeArt"];
+const CATEGORIES = ["For You", "Photography", "Fashion", "Tech", "Travel", "Art"];
+
+export default function ExplorePage() {
+  const [searchFocused, setSearchFocused] = useState(false);
+
+  return (
+    <div className="w-full flex flex-col pt-6 pb-24 px-4 min-h-screen" suppressHydrationWarning>
+      
+      {/* Header & Search */}
+      <div className="sticky top-0 z-40 bg-background/80 backdrop-blur-md pt-2 pb-6 flex flex-col gap-6">
+        <h1 className="text-4xl font-extrabold flex items-center gap-3">
+          <Compass className="w-10 h-10 text-primary" />
+          Explore
+        </h1>
+
+        <div className="relative w-full max-w-2xl">
+          <motion.div 
+            animate={{ scale: searchFocused ? 1.02 : 1 }}
+            className={`flex items-center w-full rounded-2xl border transition-all glass ${
+              searchFocused ? "border-primary ring-4 ring-primary/20 bg-background/80" : "border-border bg-muted/30"
+            }`}
+          >
+            <Search className="w-6 h-6 ml-4 text-muted-foreground object-fill" />
+            <input 
+              type="text"
+              placeholder="Search posts, tags, or topics..."
+              onFocus={() => setSearchFocused(true)}
+              onBlur={() => setSearchFocused(false)}
+              className="w-full bg-transparent px-4 py-4 outline-none font-medium placeholder:text-muted-foreground"
+            />
+          </motion.div>
+
+          <AnimatePresence>
+            {searchFocused && (
+              <motion.div 
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: 10 }}
+                className="absolute top-full left-0 right-0 mt-4 p-4 glass-panel rounded-2xl shadow-2xl border border-border"
+              >
+                <div className="mb-4">
+                  <span className="flex items-center gap-2 text-sm font-bold text-muted-foreground uppercase tracking-wider mb-2">
+                    <TrendingUp className="w-4 h-4" /> Trending Searches
+                  </span>
+                  <div className="flex flex-wrap gap-2">
+                    {TRENDING_TAGS.map(tag => (
+                      <span key={tag} className="px-3 py-1.5 rounded-full bg-muted text-sm font-medium hover:bg-primary hover:text-primary-foreground cursor-pointer transition-colors flex items-center gap-1">
+                        <Hash className="w-3 h-3" /> {tag.replace("#", "")}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+
+        {/* Categories */}
+        <div className="flex overflow-x-auto no-scrollbar gap-3 pb-2">
+          {CATEGORIES.map((cat, i) => (
+            <button 
+              key={cat}
+              className={`px-6 py-2.5 rounded-full font-bold whitespace-nowrap transition-all active:scale-95 ${
+                i === 0 ? "bg-primary text-primary-foreground shadow-md shadow-primary/30" : "glass hover:bg-white/40 dark:hover:bg-black/40"
+              }`}
+            >
+              {cat}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Masonry Grid (Reused Post Cards with mixed sizes for discovery layout) */}
+      <motion.div 
+        layout 
+        className="columns-1 sm:columns-2 lg:columns-3 xl:columns-4 gap-6 space-y-6 mt-6"
+      >
+        {/* Shuffle the mock posts slightly to look different from Home Feed */}
+        {[...MOCK_POSTS].reverse().map((post) => (
+          <PostCard key={`explore-${post.id}`} post={post} />
+        ))}
+        {MOCK_POSTS.map((post) => (
+          <PostCard key={`explore-2-${post.id}`} post={post} />
+        ))}
+      </motion.div>
+    </div>
+  );
+}