hanzo.ai/components/zap/ZapCodeExample.tsx

'use client'

/**
 * NO TAILWIND. The copy control's ground on approach is `Cell`, the site's
 * role for exactly that: a hover that changes a FILL is a rule and not a
 * property, since gui's `hoverStyle` paints nothing in this build — and `Cell`
 * adds no geometry, so a ghost icon button wears it as a grid tile does.
 *
 * Everything else is `Band` + `Head` and gui props over @hanzo/design's
 * tokens.
 */

import { motion } from "@/components/motion";
import { Terminal, Copy } from "lucide-react";
import { Box, View, XStack } from '@hanzo/ui'
import { Band, Head, Words } from '@/components/marketing/band'
import { Cell } from '@hanzo/ui/marketing'

/** A window lamp in the terminal's chrome. */
function Lamp() {
  return <Box width={12} height={12} rounded="var(--radius-full)" background="color-mix(in oklab, var(--pure-white) 10%, transparent)" />
}

/** A command's ink and a comment's. */
const SOFT = 'color-mix(in oklab, var(--foreground) 70%, transparent)'

const ZapCodeExample = () => {
  const codeLines = [
    { type: "comment", text: "# Connect 12 MCP servers → 1 ZAP endpoint" },
    { type: "command", text: "$ zapd serve --port 9999" },
    { type: "empty", text: "" },
    { type: "command", text: '$ zapd add mcp --name github --url stdio://gh-mcp' },
    { type: "command", text: '$ zapd add mcp --name slack  --url http://localhost:8080' },
    { type: "command", text: '$ zapd add mcp --name db     --url zap+unix:///tmp/postgres.sock' },
    { type: "empty", text: "" },
    { type: "comment", text: "# Agents connect once: zap://localhost:9999" },
  ];

  return (
    <Band rule={false} pad="$11" measure={896}>
      <Head
        title="Four lines and it is running"
        lede="One daemon in front of the servers you already have. Agents hold a single connection to it."
        measure={896}
      />

      <View
        render={<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: 0.1 }} />}
        display="block"
        position="relative"
      >
        {/* Terminal header */}
        <XStack
          items="center"
          gap={8}
          px={16}
          py={12}
          borderWidth={1}
          borderColor="var(--border)"
          bg="var(--secondary)"
          borderTopLeftRadius="var(--radius-xl)"
          borderTopRightRadius="var(--radius-xl)"
        >
          <XStack gap={6}>
            <Lamp />
            <Lamp />
            <Lamp />
          </XStack>
          {/* Words, not a stack: the label's ink is what the icon draws in. */}
          <Words render="div" display="flex" flexDirection="row" flex={1} items="center" justify="center" gap={8} fontSize="$2" lineHeight="1.4286" color="var(--muted-foreground)">
            <Terminal width={16} height={16} />
            <span>Terminal</span>
          </Words>
          {/* `Cell` — see the file header. */}
          <Cell
            render="button"
            bg="transparent"
            p={4}
            rounded={4}
            hoverStyle={{ bg: "var(--accent)" }}
          >
            <Copy width={16} height={16} color="var(--muted-foreground)" />
          </Cell>
        </XStack>

        {/* Terminal content */}
        <Words
          render="div"
          borderRightWidth={1}
          borderBottomWidth={1}
          borderLeftWidth={1}
          borderColor="var(--border)"
          borderBottomLeftRadius="var(--radius-xl)"
          borderBottomRightRadius="var(--radius-xl)"
          background="color-mix(in oklab, var(--background) 80%, transparent)"
          backdropFilter="blur(8px)"
          p={24}
          fontFamily="$mono"
          fontSize="$2"
          lineHeight="1.4286"
        >
          {codeLines.map((line, index) => (
            <Words key={index} render="div" height={line.type === "empty" ? 16 : undefined} color={line.type === "comment" ? 'var(--muted-foreground)' : SOFT}>
              {line.text}
            </Words>
          ))}
        </Words>

        {/* The halo behind the frame, 16px proud of it on every side. */}
        <Box position="absolute" t={-16} r={-16} b={-16} l={-16} z="var(--z-under)" rounded="var(--radius-2xl)" background="color-mix(in oklab, var(--pure-white) 5%, transparent)" filter="blur(40px)" />
      </View>

      <Words
        render={<motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: 0.2 }} />}
        mt={32}
        align="center"
        color="var(--muted-foreground)"
      >
        <Words fontFamily="$mono" color={SOFT}>zapd</Words> presents the tools and resources of every
        backend as one schema, whether the backend speaks MCP or ZAP.
      </Words>
    </Band>
  );
};

export default ZapCodeExample;