|
| 1 | +"use client"; |
| 2 | + |
| 3 | +import { useState, useMemo, useEffect } from "react"; |
| 4 | +import { Search, Plus, ArrowUpRight } from "lucide-react"; |
| 5 | +import { motion, AnimatePresence } from "framer-motion"; |
| 6 | +import { ECOSYSTEM_APPS, ECOSYSTEM_CATEGORIES } from "@/lib/ecosystem-data"; |
| 7 | +import PageHero from "@/components/ui/PageHero"; |
| 8 | +import Container from "@/components/ui/Container"; |
| 9 | +import SectionHeader from "@/components/ui/SectionHeader"; |
| 10 | +import FilterPills from "@/components/ui/FilterPills"; |
| 11 | +import Badge from "@/components/ui/Badge"; |
| 12 | +import Button from "@/components/ui/Button"; |
| 13 | + |
| 14 | +const BATCH_SIZE = 12; |
| 15 | + |
| 16 | +export default function EcosystemPage() { |
| 17 | + const [activeCategory, setActiveCategory] = useState("All"); |
| 18 | + const [search, setSearch] = useState(""); |
| 19 | + const [visible, setVisible] = useState(BATCH_SIZE); |
| 20 | + |
| 21 | + useEffect(() => { |
| 22 | + setVisible(BATCH_SIZE); |
| 23 | + }, [activeCategory, search]); |
| 24 | + |
| 25 | + const filtered = useMemo(() => { |
| 26 | + return ECOSYSTEM_APPS.filter((app) => { |
| 27 | + const matchesCategory = |
| 28 | + activeCategory === "All" || app.categories.includes(activeCategory); |
| 29 | + const matchesSearch = |
| 30 | + !search || |
| 31 | + app.name.toLowerCase().includes(search.toLowerCase()) || |
| 32 | + app.description.toLowerCase().includes(search.toLowerCase()); |
| 33 | + return matchesCategory && matchesSearch; |
| 34 | + }); |
| 35 | + }, [activeCategory, search]); |
| 36 | + |
| 37 | + const shown = filtered.slice(0, visible); |
| 38 | + const hasMore = visible < filtered.length; |
| 39 | + |
| 40 | + return ( |
| 41 | + <PageHero> |
| 42 | + <div className="min-h-screen"> |
| 43 | + <Container> |
| 44 | + <div className="flex items-start justify-between gap-4"> |
| 45 | + <SectionHeader |
| 46 | + label="Ecosystem" |
| 47 | + title="Built on Livepeer" |
| 48 | + description="Explore what developers and teams are building with real-time video and AI inference on Livepeer." |
| 49 | + align="left" |
| 50 | + /> |
| 51 | + <Button |
| 52 | + href="/ecosystem/submit" |
| 53 | + variant="secondary" |
| 54 | + size="sm" |
| 55 | + className="mt-8 shrink-0 backdrop-blur-sm text-white/60 hover:text-white/80" |
| 56 | + > |
| 57 | + <Plus className="h-3 w-3" /> |
| 58 | + Submit App |
| 59 | + </Button> |
| 60 | + </div> |
| 61 | + |
| 62 | + {/* Filter bar */} |
| 63 | + <div className="mt-8 flex flex-col gap-4 sm:mt-12 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between"> |
| 64 | + <FilterPills |
| 65 | + items={ECOSYSTEM_CATEGORIES} |
| 66 | + active={activeCategory} |
| 67 | + onChange={setActiveCategory} |
| 68 | + /> |
| 69 | + |
| 70 | + <div className="relative"> |
| 71 | + <Search className="absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-white/20" /> |
| 72 | + <input |
| 73 | + type="text" |
| 74 | + placeholder="Search" |
| 75 | + aria-label="Search ecosystem apps" |
| 76 | + value={search} |
| 77 | + onChange={(e) => setSearch(e.target.value)} |
| 78 | + className="w-full rounded-sm border border-dark-border bg-transparent py-1.5 pl-9 pr-8 text-sm text-white placeholder:text-white/25 focus:border-white/15 focus:outline-none sm:w-56 select-none" |
| 79 | + /> |
| 80 | + <AnimatePresence> |
| 81 | + {search && ( |
| 82 | + <motion.button |
| 83 | + initial={{ opacity: 0 }} |
| 84 | + animate={{ opacity: 1, transition: { duration: 0.2 } }} |
| 85 | + exit={{ opacity: 0, transition: { duration: 0.5 } }} |
| 86 | + onClick={() => setSearch("")} |
| 87 | + className="absolute right-2.5 top-1/2 -translate-y-1/2 cursor-pointer text-white/50 transition-colors hover:text-white/80" |
| 88 | + aria-label="Clear search" |
| 89 | + > |
| 90 | + <svg |
| 91 | + width="20" |
| 92 | + height="20" |
| 93 | + viewBox="0 0 20 20" |
| 94 | + fill="none" |
| 95 | + className="block" |
| 96 | + > |
| 97 | + <path |
| 98 | + d="M5 5L15 15M15 5L5 15" |
| 99 | + stroke="currentColor" |
| 100 | + strokeWidth="2" |
| 101 | + strokeLinecap="round" |
| 102 | + /> |
| 103 | + </svg> |
| 104 | + </motion.button> |
| 105 | + )} |
| 106 | + </AnimatePresence> |
| 107 | + </div> |
| 108 | + </div> |
| 109 | + |
| 110 | + {/* App grid */} |
| 111 | + {shown.length > 0 ? ( |
| 112 | + <div className="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> |
| 113 | + {shown.map((app, index) => ( |
| 114 | + <motion.a |
| 115 | + key={app.id} |
| 116 | + href={app.url} |
| 117 | + target="_blank" |
| 118 | + rel="noopener noreferrer" |
| 119 | + initial={{ opacity: 0, y: 20 }} |
| 120 | + whileInView={{ opacity: 1, y: 0 }} |
| 121 | + viewport={{ once: true }} |
| 122 | + transition={{ |
| 123 | + duration: 0.5, |
| 124 | + delay: (index % BATCH_SIZE) * 0.1, |
| 125 | + }} |
| 126 | + className="group flex flex-col rounded-2xl border border-dark-border bg-dark-card p-5 transition-colors hover:border-white/10 sm:p-6 select-none" |
| 127 | + > |
| 128 | + <div className="mb-4 flex items-start justify-between"> |
| 129 | + <div className="flex h-14 w-14 items-center justify-center overflow-hidden rounded-xl bg-white/[0.06]"> |
| 130 | + {app.logo ? ( |
| 131 | + <img |
| 132 | + src={`/ecosystem/${app.logo}`} |
| 133 | + alt={`${app.name} logo`} |
| 134 | + className="h-10 w-10 object-contain" |
| 135 | + /> |
| 136 | + ) : ( |
| 137 | + <span className="text-2xl font-semibold text-white/30"> |
| 138 | + {app.name.charAt(0)} |
| 139 | + </span> |
| 140 | + )} |
| 141 | + </div> |
| 142 | + <ArrowUpRight className="h-4 w-4 text-white/0 transition-colors group-hover:text-white/40" /> |
| 143 | + </div> |
| 144 | + <h3 className="text-base font-semibold text-white transition-colors group-hover:text-green-light"> |
| 145 | + {app.name} |
| 146 | + </h3> |
| 147 | + <p className="mt-0.5 font-mono text-xs text-white/25"> |
| 148 | + {app.hostname} |
| 149 | + </p> |
| 150 | + <p className="mt-3 flex-1 text-sm leading-relaxed text-white/40"> |
| 151 | + {app.description} |
| 152 | + </p> |
| 153 | + <div className="mt-4 flex flex-wrap gap-1.5"> |
| 154 | + {app.categories.map((cat) => ( |
| 155 | + <Badge key={cat} variant="tag"> |
| 156 | + {cat} |
| 157 | + </Badge> |
| 158 | + ))} |
| 159 | + </div> |
| 160 | + </motion.a> |
| 161 | + ))} |
| 162 | + </div> |
| 163 | + ) : ( |
| 164 | + <div className="mt-16"> |
| 165 | + <h3 className="text-2xl font-bold tracking-tight text-white sm:text-3xl"> |
| 166 | + No results found{search ? ` for \u201c${search}\u201d` : ""} |
| 167 | + </h3> |
| 168 | + <p className="mt-3 flex items-center gap-3 text-sm text-white/40"> |
| 169 | + Try searching for another term. |
| 170 | + <button |
| 171 | + onClick={() => { |
| 172 | + setSearch(""); |
| 173 | + setActiveCategory("All"); |
| 174 | + }} |
| 175 | + className="cursor-pointer rounded border border-white/10 px-3 py-1 text-xs font-medium text-white/50 transition-colors hover:border-white/20 hover:text-white/80" |
| 176 | + > |
| 177 | + Clear search |
| 178 | + </button> |
| 179 | + </p> |
| 180 | + <motion.img |
| 181 | + src="/ecosystem/no-results.png" |
| 182 | + alt="" |
| 183 | + loading="eager" |
| 184 | + initial={{ opacity: 0 }} |
| 185 | + animate={{ opacity: 0.35 }} |
| 186 | + transition={{ duration: 0.6, delay: 0.2 }} |
| 187 | + className="mt-12 w-full max-w-sm select-none pointer-events-none" |
| 188 | + /> |
| 189 | + </div> |
| 190 | + )} |
| 191 | + |
| 192 | + {hasMore && ( |
| 193 | + <div className="mt-6 text-center"> |
| 194 | + <button |
| 195 | + onClick={() => setVisible((v) => v + BATCH_SIZE)} |
| 196 | + className="cursor-pointer rounded-sm border border-white/10 px-6 py-2.5 text-sm font-medium text-white/50 transition-colors hover:border-white/20 hover:text-white/80" |
| 197 | + > |
| 198 | + View more |
| 199 | + </button> |
| 200 | + </div> |
| 201 | + )} |
| 202 | + </Container> |
| 203 | + </div> |
| 204 | + </PageHero> |
| 205 | + ); |
| 206 | +} |
0 commit comments