{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "marketing-hero-analytics", "type": "registry:ui", "description": "Analytics hero section for marketing pages", "files": [ { "path": "registry/default/ui/marketing-hero-analytics.tsx", "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { useCallback, useEffect, useId, useMemo, useRef, useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport type AnalyticsHeroChartDatum = {\n label: string\n value: number\n}\n\nexport type AnalyticsHeroSourceIconKey =\n | \"google\"\n | \"vercel\"\n | \"x\"\n | \"yc\"\n | \"splitbee\"\n | \"linear\"\n | \"github\"\n\nexport type AnalyticsHeroSource = {\n name: string\n visitors: number\n icon: AnalyticsHeroSourceIconKey\n}\n\nexport type AnalyticsHeroLog = {\n time: string\n rt: \"mw\" | \"fe\"\n method: string\n status: number\n path: string\n}\n\nexport const ANALYTICS_HERO_CHART_DATA: AnalyticsHeroChartDatum[] = [\n { label: \"Fri May 10 6am - 7am\", value: 142_310 },\n { label: \"Fri May 10 7am - 8am\", value: 142_310 },\n { label: \"Fri May 10 8am - 9am\", value: 285_420 },\n { label: \"Fri May 10 9am - 10am\", value: 428_530 },\n { label: \"Fri May 10 10am - 11am\", value: 428_530 },\n { label: \"Fri May 10 11am - 12pm\", value: 609_797 },\n { label: \"Fri May 10 12pm - 1pm\", value: 752_640 },\n { label: \"Fri May 10 1pm - 2pm\", value: 618_070 },\n { label: \"Fri May 10 2pm - 3pm\", value: 895_750 },\n { label: \"Fri May 10 3pm - 4pm\", value: 752_640 },\n { label: \"Fri May 10 4pm - 5pm\", value: 895_750 },\n { label: \"Fri May 10 5pm - 6pm\", value: 895_750 },\n { label: \"Fri May 10 6pm - 7pm\", value: 1_038_860 },\n]\n\nexport const ANALYTICS_HERO_SOURCES: AnalyticsHeroSource[] = [\n { name: \"google.com\", visitors: 259_010, icon: \"google\" },\n { name: \"vercel.com\", visitors: 132_821, icon: \"vercel\" },\n { name: \"x.com\", visitors: 51_280, icon: \"x\" },\n { name: \"ycombinator.com\", visitors: 27_102, icon: \"yc\" },\n { name: \"splitbee.com\", visitors: 20_186, icon: \"splitbee\" },\n { name: \"linear.com\", visitors: 18_281, icon: \"linear\" },\n { name: \"github.blog\", visitors: 13_021, icon: \"github\" },\n]\n\nexport const ANALYTICS_HERO_LOGS: AnalyticsHeroLog[] = [\n {\n time: \"24:59\",\n rt: \"mw\",\n method: \"GET\",\n status: 200,\n path: \"/app/front/ap...\",\n },\n { time: \"24.52\", rt: \"fe\", method: \"GET\", status: 200, path: \"/status/api\" },\n { time: \"24.50\", rt: \"mw\", method: \"GET\", status: 200, path: \"/docs\" },\n { time: \"24.43\", rt: \"fe\", method: \"GET\", status: 200, path: \"/api/jwt\" },\n]\n\nexport const ANALYTICS_HERO_STOPS = [\n \"#FF975C\",\n \"#FAA95A\",\n \"#F5BE57\",\n \"#EED353\",\n \"#EAE550\",\n \"#D7E84B\",\n \"#C2E447\",\n \"#B2E444\",\n \"#9ADD3E\",\n \"#84DB40\",\n \"#67D141\",\n \"#4ECB42\",\n \"#37C442\",\n] as const\n\nexport function getAnalyticsHeroColor(index: number) {\n return ANALYTICS_HERO_STOPS[Math.min(index, ANALYTICS_HERO_STOPS.length - 1)]\n}\n\nexport function AnalyticsHeroGoogleIcon(props: React.ComponentProps<\"svg\">) {\n return (\n \n \n \n \n \n \n )\n}\n\nexport function AnalyticsHeroVercelIcon(props: React.ComponentProps<\"svg\">) {\n return (\n \n \n \n )\n}\n\nexport function AnalyticsHeroXIcon(props: React.ComponentProps<\"svg\">) {\n return (\n \n \n \n )\n}\n\nexport function AnalyticsHeroYcIcon(props: React.ComponentProps<\"svg\">) {\n return (\n \n \n \n \n )\n}\n\nexport function AnalyticsHeroSplitbeeIcon(props: React.ComponentProps<\"svg\">) {\n return (\n \n \n \n \n \n \n )\n}\n\nexport function AnalyticsHeroLinearIcon(props: React.ComponentProps<\"svg\">) {\n return (\n \n \n \n )\n}\n\nexport function AnalyticsHeroGithubIcon(props: React.ComponentProps<\"svg\">) {\n return (\n \n \n \n )\n}\n\nexport const ANALYTICS_HERO_ICONS: Record<\n AnalyticsHeroSourceIconKey,\n (props: React.ComponentProps<\"svg\">) => React.JSX.Element\n> = {\n google: AnalyticsHeroGoogleIcon,\n vercel: AnalyticsHeroVercelIcon,\n x: AnalyticsHeroXIcon,\n yc: AnalyticsHeroYcIcon,\n splitbee: AnalyticsHeroSplitbeeIcon,\n linear: AnalyticsHeroLinearIcon,\n github: AnalyticsHeroGithubIcon,\n}\n\nexport interface AnalyticsHeroCrosshairProps\n extends React.ComponentProps<\"div\"> {}\n\nexport function AnalyticsHeroCrosshair({\n className,\n ...props\n}: AnalyticsHeroCrosshairProps) {\n return (\n \n
\n \n \n
\n \n )\n}\n\nexport interface AnalyticsHeroGridLinesProps\n extends React.ComponentProps<\"div\"> {\n cols: number\n rows: number\n}\n\nexport function AnalyticsHeroGridLines({\n cols,\n rows,\n className,\n ...props\n}: AnalyticsHeroGridLinesProps) {\n const verticalPositions = Array.from(\n { length: cols + 1 },\n (_, i) => `${((i / cols) * 100).toFixed(4)}%`\n )\n const horizontalPositions = Array.from(\n { length: rows + 1 },\n (_, i) => `${((i / rows) * 100).toFixed(4)}%`\n )\n\n return (\n \n {verticalPositions.map((left) => (\n \n ))}\n {horizontalPositions.map((top) => (\n \n ))}\n \n \n \n )\n}\n\nexport interface AnalyticsHeroChartProps\n extends Omit, \"onHover\"> {\n data: AnalyticsHeroChartDatum[]\n hovered: number | null\n onHover: (index: number | null) => void\n}\n\nexport function AnalyticsHeroChart({\n data,\n hovered,\n onHover,\n className,\n ...props\n}: AnalyticsHeroChartProps) {\n const idBase = useId().replaceAll(\":\", \"\")\n const lineGradientId = `${idBase}-line-gradient`\n const fillGradientId = `${idBase}-fill-gradient`\n const hoverClipId = `${idBase}-hover-clip`\n\n const max = Math.max(...data.map((d) => d.value))\n const points = data.map((d, i) => ({\n x: (i / (data.length - 1)) * 960,\n y: 560 - (d.value / max) * 480 - 20,\n }))\n const linePath = points\n .map((point, i) => `${i ? \"L\" : \"M\"}${point.x} ${point.y}`)\n .join(\" \")\n const fillPath = `${linePath} L960 560 L0 560 Z`\n const clipX = hovered !== null ? (points[hovered]?.x ?? 0) : 0\n\n return (\n onHover(null)}\n onMouseMove={(event) => {\n const bounds = event.currentTarget.getBoundingClientRect()\n const ratio = Math.min(\n 1,\n Math.max(0, (event.clientX - bounds.left) / bounds.width)\n )\n onHover(Math.round(ratio * (data.length - 1)))\n }}\n preserveAspectRatio=\"none\"\n style={{ cursor: \"crosshair\", overflow: \"visible\" }}\n viewBox=\"0 0 960 560\"\n {...props}\n >\n Visitors chart\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {points.map((point, i) => {\n const isHovered = hovered === i\n const color = getAnalyticsHeroColor(i)\n const datum = data[i]\n return (\n \n {isHovered ? (\n \n ) : null}\n \n \n )\n })}\n \n )\n}\n\nexport interface AnalyticsHeroTooltipProps extends React.ComponentProps<\"div\"> {\n data: AnalyticsHeroChartDatum[]\n index: number | null\n containerRef: React.RefObject\n sectionRef: React.RefObject\n}\n\nexport function AnalyticsHeroTooltip({\n data,\n index,\n containerRef,\n sectionRef,\n className,\n ...props\n}: AnalyticsHeroTooltipProps) {\n if (index === null || !containerRef.current || !sectionRef.current) {\n return null\n }\n\n const chartRect = containerRef.current.getBoundingClientRect()\n const sectionRect = sectionRef.current.getBoundingClientRect()\n const max = Math.max(...data.map((d) => d.value))\n const xRatio = index / (data.length - 1)\n const yRatio = 1 - (data[index].value / max) * (480 / 560) - 20 / 560\n let left = chartRect.left - sectionRect.left + xRatio * chartRect.width + 12\n const top = chartRect.top - sectionRect.top + yRatio * chartRect.height + 12\n if (left + 200 > sectionRect.width) {\n left = chartRect.left - sectionRect.left + xRatio * chartRect.width - 210\n }\n\n return (\n \n \n
\n \n Visitors\n \n \n {data[index].value.toLocaleString()}\n \n
\n \n {data[index].label}\n

\n \n \n )\n}\n\nexport interface AnalyticsHeroAppLogsProps extends React.ComponentProps<\"div\"> {\n logs: AnalyticsHeroLog[]\n timestamp?: string\n}\n\nexport function AnalyticsHeroAppLogs({\n logs,\n timestamp = \"13:39\",\n className,\n ...props\n}: AnalyticsHeroAppLogsProps) {\n const [visible, setVisible] = useState(false)\n useEffect(() => {\n const timeout = setTimeout(() => setVisible(true), 420)\n return () => clearTimeout(timeout)\n }, [])\n\n return (\n \n \n \n App Logs\n \n \n {timestamp}\n \n \n
\n {logs.map((log) => (\n \n \n {log.time}\n \n \n {log.rt === \"mw\" ? \"M\" : \"ƒe\"}\n \n \n {log.method}\n \n \n {log.status}\n \n \n {log.path}\n \n
\n ))}\n \n \n )\n}\n\nexport interface AnalyticsHeroTopSourcesProps\n extends React.ComponentProps<\"div\"> {\n sources: AnalyticsHeroSource[]\n}\n\nexport function AnalyticsHeroTopSources({\n sources,\n className,\n ...props\n}: AnalyticsHeroTopSourcesProps) {\n const maxVisitors = Math.max(...sources.map((source) => source.visitors))\n const [visible, setVisible] = useState(false)\n useEffect(() => {\n const timeout = setTimeout(() => setVisible(true), 540)\n return () => clearTimeout(timeout)\n }, [])\n\n return (\n \n \n \n Top Sources\n \n Visitors\n \n \n {sources.map((source) => {\n const SourceIcon = ANALYTICS_HERO_ICONS[source.icon]\n const width = (source.visitors / maxVisitors) * 100\n return (\n \n \n \n \n \n {source.name}\n \n \n \n {source.visitors.toLocaleString()}\n \n \n )\n })}\n \n \n )\n}\n\nexport interface AnalyticsHeroCopyProps extends React.ComponentProps<\"div\"> {\n visible: boolean\n title?: string\n description?: string\n deployLabel?: string\n demoLabel?: string\n}\n\nexport function AnalyticsHeroCopy({\n visible,\n title = \"Understand production from the inside out.\",\n description = \"With real-time infrastructure and traffic insights, Vercel is the mission control for frontend applications.\",\n deployLabel = \"Deploy Now\",\n demoLabel = \"Get a Demo\",\n className,\n ...props\n}: AnalyticsHeroCopyProps) {\n return (\n \n \n {title}\n \n \n {description}\n

\n \n \n \n \n \n {deployLabel}\n \n \n {demoLabel}\n \n \n \n )\n}\n\nexport interface AnalyticsHeroVisualProps extends React.ComponentProps<\"div\"> {\n logs: AnalyticsHeroLog[]\n sources: AnalyticsHeroSource[]\n}\n\nexport function AnalyticsHeroVisual({\n logs,\n sources,\n className,\n ...props\n}: AnalyticsHeroVisualProps) {\n return (\n \n \n \n \n \n \n \n \n )\n}\n\nexport interface AnalyticsHeroProps extends React.ComponentProps<\"section\"> {\n data?: AnalyticsHeroChartDatum[]\n sources?: AnalyticsHeroSource[]\n logs?: AnalyticsHeroLog[]\n logsTimestamp?: string\n title?: string\n description?: string\n deployLabel?: string\n demoLabel?: string\n}\n\nexport function AnalyticsHero({\n data = ANALYTICS_HERO_CHART_DATA,\n sources = ANALYTICS_HERO_SOURCES,\n logs = ANALYTICS_HERO_LOGS,\n title,\n description,\n deployLabel,\n demoLabel,\n className,\n ...props\n}: AnalyticsHeroProps) {\n const [hovered, setHovered] = useState(null)\n const chartRef = useRef(null)\n const sectionRef = useRef(null)\n const [visible, setVisible] = useState(false)\n\n useEffect(() => {\n const timeout = setTimeout(() => setVisible(true), 60)\n return () => clearTimeout(timeout)\n }, [])\n\n const lineX = useMemo(() => {\n if (hovered === null || !chartRef.current || !sectionRef.current) {\n return null\n }\n const chartRect = chartRef.current.getBoundingClientRect()\n const sectionRect = sectionRef.current.getBoundingClientRect()\n const xRatio = hovered / (data.length - 1)\n return chartRect.left - sectionRect.left + xRatio * chartRect.width\n }, [data.length, hovered])\n\n const handleHover = useCallback((index: number | null) => {\n setHovered(index)\n }, [])\n\n return (\n \n \n \n \n \n \n \n {lineX !== null ? (\n \n ) : null}\n {hovered !== null ? (\n \n \n \n ) : null}\n \n \n
\n \n
\n \n \n \n \n )\n}\n\nexport default AnalyticsHero\n", "type": "registry:ui" } ] }