richard/openclaw-market
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
richarjiang
2026-03-13 11:00:01 +08:00
commit fa4c458eda
51 changed files with 8843 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
components/layout/install-banner.tsx Normal file
View File

@@ -0,0 +1,63 @@
"use client";
import { useState } from "react";
import { Check, Copy, Terminal } from "lucide-react";
const INSTALL_COMMAND = "clawhub install openclaw-reporter";
export function InstallBanner() {
const [copied, setCopied] = useState(false);
const handleCopy = async () => {
try {
await navigator.clipboard.writeText(INSTALL_COMMAND);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch {
// fallback: select the text
}
};
return (
<div className="glow-card rounded-xl px-5 py-4">
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
{/* Left: description */}
<div className="flex items-center gap-3 min-w-0">
<div
className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg"
style={{ backgroundColor: "rgba(0, 240, 255, 0.1)" }}
>
<span className="text-lg">🦞</span>
</div>
<div className="min-w-0">
<p className="text-sm font-medium text-[var(--text-primary)]">
Join the Heatmap
</p>
<p className="text-xs text-[var(--text-muted)] truncate">
Install the skill and let your lobster light up the globe
</p>
</div>
</div>
{/* Right: copy command */}
<button
onClick={handleCopy}
className="group flex items-center gap-2 rounded-lg border border-white/10 bg-[var(--bg-primary)] px-4 py-2.5 transition-all hover:border-[var(--accent-cyan)]/40 hover:bg-[var(--bg-primary)]/80 active:scale-[0.98] cursor-pointer shrink-0"
title="Click to copy"
>
<Terminal className="h-3.5 w-3.5 text-[var(--text-muted)]" />
<code className="font-mono text-sm text-[var(--accent-cyan)] select-all">
{INSTALL_COMMAND}
</code>
<div className="ml-1 flex h-5 w-5 items-center justify-center">
{copied ? (
<Check className="h-3.5 w-3.5 text-[var(--accent-green)]" />
) : (
<Copy className="h-3.5 w-3.5 text-[var(--text-muted)] transition-colors group-hover:text-[var(--accent-cyan)]" />
)}
</div>
</button>
</div>
</div>
);
}

61
components/layout/navbar.tsx Normal file
View File

@@ -0,0 +1,61 @@
"use client";
import Link from "next/link";
import { Activity, Globe2, Map } from "lucide-react";
import { cn } from "@/lib/utils";
interface NavbarProps {
activeView?: "globe" | "map";
}
export function Navbar({ activeView = "globe" }: NavbarProps) {
return (
<nav className="fixed top-0 left-0 right-0 z-50 border-b border-white/5 bg-[var(--bg-primary)]/80 backdrop-blur-xl">
<div className="mx-auto flex h-14 max-w-[1800px] items-center justify-between px-4">
<Link href="/" className="flex items-center gap-2">
<span className="text-2xl">🦞</span>
<span
className="font-mono text-lg font-bold tracking-tight"
style={{ color: "var(--accent-cyan)", textShadow: "var(--glow-cyan)" }}
>
OpenClaw Market
</span>
</Link>
<div className="flex items-center gap-1 rounded-lg border border-white/5 bg-white/5 p-1">
<Link
href="/"
className={cn(
"flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-all",
activeView === "globe"
? "bg-[var(--accent-cyan)]/10 text-[var(--accent-cyan)]"
: "text-[var(--text-muted)] hover:text-[var(--text-secondary)]"
)}
>
<Globe2 className="h-3.5 w-3.5" />
3D Globe
</Link>
<Link
href="/continent/asia"
className={cn(
"flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-all",
activeView === "map"
? "bg-[var(--accent-cyan)]/10 text-[var(--accent-cyan)]"
: "text-[var(--text-muted)] hover:text-[var(--text-secondary)]"
)}
>
<Map className="h-3.5 w-3.5" />
2D Map
</Link>
</div>
<div className="flex items-center gap-3">
<div className="flex items-center gap-1.5">
<Activity className="h-3.5 w-3.5 text-[var(--accent-green)]" />
<span className="text-xs text-[var(--text-secondary)]">Live</span>
</div>
</div>
</div>
</nav>
);
}

104
components/layout/particle-bg.tsx Normal file
View File

@@ -0,0 +1,104 @@
"use client";
import { useEffect, useRef } from "react";
interface Particle {
x: number;
y: number;
vx: number;
vy: number;
size: number;
opacity: number;
}
export function ParticleBg() {
const canvasRef = useRef<HTMLCanvasElement>(null);
useEffect(() => {
const canvas = canvasRef.current;
if (!canvas) return;
const ctx = canvas.getContext("2d");
if (!ctx) return;
let animationId: number;
const particles: Particle[] = [];
const particleCount = 60;
const resize = () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
};
const createParticle = (): Particle => ({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
vx: (Math.random() - 0.5) * 0.3,
vy: (Math.random() - 0.5) * 0.3,
size: Math.random() * 1.5 + 0.5,
opacity: Math.random() * 0.3 + 0.1,
});
const init = () => {
resize();
particles.length = 0;
for (let i = 0; i < particleCount; i++) {
particles.push(createParticle());
}
};
const animate = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (const p of particles) {
p.x += p.vx;
p.y += p.vy;
if (p.x < 0 || p.x > canvas.width) p.vx *= -1;
if (p.y < 0 || p.y > canvas.height) p.vy *= -1;
ctx.beginPath();
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
ctx.fillStyle = `rgba(0, 240, 255, ${p.opacity})`;
ctx.fill();
}
// Draw connections
for (let i = 0; i < particles.length; i++) {
for (let j = i + 1; j < particles.length; j++) {
const dx = particles[i].x - particles[j].x;
const dy = particles[i].y - particles[j].y;
const dist = Math.sqrt(dx * dx + dy * dy);
if (dist < 150) {
ctx.beginPath();
ctx.moveTo(particles[i].x, particles[i].y);
ctx.lineTo(particles[j].x, particles[j].y);
ctx.strokeStyle = `rgba(0, 240, 255, ${0.05 * (1 - dist / 150)})`;
ctx.lineWidth = 0.5;
ctx.stroke();
}
}
}
animationId = requestAnimationFrame(animate);
};
init();
animate();
window.addEventListener("resize", resize);
return () => {
cancelAnimationFrame(animationId);
window.removeEventListener("resize", resize);
};
}, []);
return (
<canvas
ref={canvasRef}
className="pointer-events-none fixed inset-0 z-0"
style={{ opacity: 0.6 }}
/>
);
}

51
components/layout/view-switcher.tsx Normal file
View File

@@ -0,0 +1,51 @@
"use client";
import Link from "next/link";
import { Globe2, Map } from "lucide-react";
import { cn } from "@/lib/utils";
const continents = [
{ slug: "asia", label: "Asia" },
{ slug: "europe", label: "Europe" },
{ slug: "americas", label: "Americas" },
{ slug: "africa", label: "Africa" },
{ slug: "oceania", label: "Oceania" },
];
interface ViewSwitcherProps {
activeContinent?: string;
}
export function ViewSwitcher({ activeContinent }: ViewSwitcherProps) {
return (
<div className="flex flex-wrap items-center gap-2">
<Link
href="/"
className={cn(
"flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-all",
!activeContinent
? "border-[var(--accent-cyan)]/30 bg-[var(--accent-cyan)]/10 text-[var(--accent-cyan)]"
: "border-white/5 text-[var(--text-muted)] hover:border-white/10 hover:text-[var(--text-secondary)]"
)}
>
<Globe2 className="h-3 w-3" />
Global
</Link>
{continents.map((c) => (
<Link
key={c.slug}
href={`/continent/${c.slug}`}
className={cn(
"flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-all",
activeContinent === c.slug
? "border-[var(--accent-purple)]/30 bg-[var(--accent-purple)]/10 text-[var(--accent-purple)]"
: "border-white/5 text-[var(--text-muted)] hover:border-white/10 hover:text-[var(--text-secondary)]"
)}
>
<Map className="h-3 w-3" />
{c.label}
</Link>
))}
</div>
);
}