"use client"; import { useRef, useEffect, useState } from "react"; import { ShieldCheck, Database, Radio, Monitor, Wallet } from "lucide-react"; import { motion, useReducedMotion } from "motion/react"; import { cn } from "@/lib/utils"; const CYCLE = 2.4; const ARRIVE = 0.65; const DOT_LEN = 0.15; const STAGGER = 0.15; const ICON_LIST = [ { IconComponent: Monitor }, { IconComponent: Wallet }, { IconComponent: ShieldCheck }, { IconComponent: Database }, ]; const ICON_SIZE = 38; const ICON_GAP = 36; const PATH_START_Y = 38; const PillCard = () => { const containerRef = useRef(null); const [dimensions, setDimensions] = useState({ w: 350, h: 450 }); const shouldReduceMotion = useReducedMotion(); useEffect(() => { if (!containerRef.current) return; const observer = new ResizeObserver((entries) => { for (const entry of entries) { setDimensions({ w: entry.contentRect.width, h: entry.contentRect.height, }); } }); observer.observe(containerRef.current); return () => observer.disconnect(); }, []); const { w: W, h: H } = dimensions; const ICON_Y = H - 155; const PATH_END_Y = ICON_Y + 3; const totalWidth = ICON_LIST.length * ICON_SIZE + (ICON_LIST.length - 1) * ICON_GAP; const startX = (W - totalWidth) / 2; const ICONS = ICON_LIST.map((icon, i) => ({ ...icon, x: startX + i * (ICON_SIZE + ICON_GAP) + ICON_SIZE / 2, })); const generatePath = (targetX: number) => { const mid = PATH_START_Y + (PATH_END_Y - PATH_START_Y) * 0.35; const cx = W / 2; return `M ${cx} ${PATH_START_Y} C ${cx} ${mid * 0.6 + PATH_START_Y * 0.4}, ${targetX} ${mid}, ${targetX} ${PATH_END_Y}`; }; return (

{ICONS.map((icon, i) => (

))}

MCP Server

A hosted server with 160+ blockchain tools for any MCP client.

); }; const Icon = ({ children, cycle, arrive, delay, }: { children: React.ReactNode; cycle: number; arrive: number; delay: number; }) => { const shouldReduceMotion = useReducedMotion(); if (shouldReduceMotion) { return (

{children}

); } return ( {children} ); }; export default PillCard;

MCP Server

Props