diff --git a/dongle/app/discover/page.tsx b/dongle/app/discover/page.tsx index 4b63062..04564a9 100644 --- a/dongle/app/discover/page.tsx +++ b/dongle/app/discover/page.tsx @@ -2,26 +2,22 @@ import React, { useState, useMemo } from "react"; import LayoutWrapper from "@/components/layout/LayoutWrapper"; -import { mockProjects } from "@/data/mockProjects"; +import { mockProjects, Project } from "@/data/mockProjects"; import { ProjectCard } from "@/components/projects/ProjectCard"; import { Button } from "@/components/ui/Button"; -import { Search, Filter } from "lucide-react"; +import { Search, Loader2, Filter } from "lucide-react"; +import { FormField } from "@/components/ui/FormField"; const ITEMS_PER_PAGE = 9; export default function DiscoverPage() { const [searchQuery, setSearchQuery] = useState(""); const [selectedCategory, setSelectedCategory] = useState("All"); - const [sortBy, setSortBy] = useState<"rating" | "newest" | "popular">( - "rating", - ); + const [sortBy, setSortBy] = useState<"rating" | "newest" | "popular">("rating"); const [visibleCount, setVisibleCount] = useState(ITEMS_PER_PAGE); const [isLoadingMore, setIsLoadingMore] = useState(false); - const categories = [ - "All", - ...Array.from(new Set(mockProjects.map((p) => p.category))), - ]; + const categories = ["All", ...Array.from(new Set(mockProjects.map(p => p.category)))]; // Apply filters and sorting const filteredAndSortedProjects = useMemo(() => { @@ -30,26 +26,22 @@ export default function DiscoverPage() { // Apply Search if (searchQuery) { const q = searchQuery.toLowerCase(); - result = result.filter( - (p) => - p.name.toLowerCase().includes(q) || - p.description.toLowerCase().includes(q), + result = result.filter(p => + p.name.toLowerCase().includes(q) || + p.description.toLowerCase().includes(q) ); } // Apply Category Filter if (selectedCategory !== "All") { - result = result.filter((p) => p.category === selectedCategory); + result = result.filter(p => p.category === selectedCategory); } // Apply Sorting result = [...result].sort((a, b) => { if (sortBy === "rating") return b.rating - a.rating; if (sortBy === "popular") return b.reviews - a.reviews; - if (sortBy === "newest") - return ( - new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime() - ); + if (sortBy === "newest") return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(); return 0; }); @@ -63,7 +55,7 @@ export default function DiscoverPage() { setIsLoadingMore(true); // Simulate network delay for loading chunks setTimeout(() => { - setVisibleCount((prev) => prev + ITEMS_PER_PAGE); + setVisibleCount(prev => prev + ITEMS_PER_PAGE); setIsLoadingMore(false); }, 600); }; @@ -77,20 +69,18 @@ export default function DiscoverPage() {
+ {/* Header & Controls */}
-

- Discover Projects -

+

Discover Projects

- Explore the ecosystem of decentralized applications, - infrastructure, and tools built on Stellar and Soroban. + Explore the ecosystem of decentralized applications, infrastructure, and tools built on Stellar and Soroban.

-
- {categories.map((cat) => ( + {categories.map(cat => (