{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "marketing-feature-code",
"type": "registry:ui",
"description": "Marketing section for code or network policy features",
"dependencies": [
"lucide-react"
],
"files": [
{
"path": "registry/default/ui/marketing-feature-code.tsx",
"content": "\"use client\"\n\nimport { useState } from \"react\"\nimport {\n Check,\n Copy,\n Globe,\n Lock,\n RefreshCw,\n ShieldCheck,\n type LucideIcon,\n} from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype NetworkPolicyFeature = {\n icon: LucideIcon\n title: string\n description: string\n}\n\nconst defaultFeatures: NetworkPolicyFeature[] = [\n {\n icon: ShieldCheck,\n title: \"Dynamic policies:\",\n description: \"allow-all, deny-all, or user-defined rules\",\n },\n {\n icon: Lock,\n title: \"Credentials injected on egress:\",\n description: \"never enter sandbox scope\",\n },\n {\n icon: Globe,\n title: \"Domain-based allowlists\",\n description: \"with wildcard support\",\n },\n {\n icon: RefreshCw,\n title: \"Live policy updates\",\n description: \"without restarting processes\",\n },\n]\n\nconst networkPolicySnippet = `const sandbox = await Sandbox.create({\n\\tnetwork: {\n\\t\\tpolicy: 'allow-all',\n\\t}\n});\n\n// Install dependencies with full network access\nawait sandbox.runCommand({ cmd: 'npm', args: ['install'] });\n\n// Lock down network before running untrusted code\nawait sandbox.setNetworkPolicy({\n\\tpolicy: 'user-defined',\n\\tallowedDomains: ['api.openai.com', '*.vercel.app'],\n\\t// Credentials injected on egress - never in sandbox\n\\ttransformations: [{\n\\t\\tdomain: 'api.openai.com',\n\\t\\theaders: { Authorization: 'Bearer $OPENAI_API_KEY' },\n\\t}],\n});`\n\nfunction NetworkPolicy({\n className,\n ...props\n}: React.ComponentProps<\"section\">) {\n return (\n \n )\n}\n\nfunction NetworkPolicyContainer({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction NetworkPolicyHeader({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction NetworkPolicyEyebrow({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction NetworkPolicyTitle({\n className,\n ...props\n}: React.ComponentProps<\"h2\">) {\n return (\n \n )\n}\n\nfunction NetworkPolicyDescription({\n className,\n ...props\n}: React.ComponentProps<\"p\">) {\n return (\n \n )\n}\n\nfunction NetworkPolicyGrid({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction NetworkPolicyFeatures({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction NetworkPolicyFeatureItem({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction NetworkPolicyFeatureIcon({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nfunction NetworkPolicyFeatureText({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction NetworkPolicyFeatureTitle({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nfunction NetworkPolicyFeatureDescription({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nfunction NetworkPolicyCodeBlock({\n codeToCopy,\n children,\n className,\n ...props\n}: React.ComponentProps<\"div\"> & { codeToCopy?: string }) {\n const [copied, setCopied] = useState(false)\n\n const handleCopy = async () => {\n if (!codeToCopy) return\n\n try {\n await navigator.clipboard.writeText(codeToCopy)\n setCopied(true)\n window.setTimeout(() => setCopied(false), 1800)\n } catch {\n setCopied(false)\n }\n }\n\n return (\n \n \n {copied ? (\n \n ) : (\n \n )}\n \n {children}\n \n )\n}\n\nfunction NetworkPolicyCode({\n className,\n ...props\n}: React.ComponentProps<\"pre\">) {\n return (\n \n )\n}\n\nfunction NetworkPolicyCodeLine({\n children,\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n {children}\n \n )\n}\n\nfunction NetworkPolicyKeyword({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nfunction NetworkPolicyMethod({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nfunction NetworkPolicyString({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nfunction NetworkPolicyComment({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nfunction NetworkPolicySection({\n features = defaultFeatures,\n}: {\n features?: NetworkPolicyFeature[]\n}) {\n return (\n \n \n \n \n \n Enterprise-grade security\n \n \n Network Firewall with Credentials Brokering\n \n \n Control egress traffic with fine-grained network policies that can\n be updated at runtime. Credentials brokering injects secrets into\n outbound requests without exposing them inside the sandbox,\n preventing data exfiltration even when running untrusted code.\n \n \n\n \n \n {features.map((feature) => (\n \n \n \n \n \n \n {feature.title}\n {\" \"}\n \n {feature.description}\n \n \n \n ))}\n \n\n \n \n \n const sandbox ={\" \"}\n await Sandbox.\n create\n {\"({\"}\n \n \n {\"\\t\"}network: {\"{\"}\n \n \n {\"\\t\"}\n policy: 'allow-all',\n \n \n {\"\\t\"}\n {\"}\"},\n \n {\"});\"}\n \n \n \n {\"// Install dependencies with full network access\"}\n \n \n \n await sandbox.\n runCommand\n {\"({ cmd: \"}\n 'npm', args: [\n 'install'] {\"});\"}\n \n \n \n \n {\"// Lock down network before running untrusted code\"}\n \n \n \n await sandbox.\n setNetworkPolicy\n {\"({\"}\n \n \n {\"\\t\"}\n policy:{\" \"}\n 'user-defined',\n \n \n {\"\\t\"}\n allowedDomains: [\n \n 'api.openai.com'\n ,{\" \"}\n '*.vercel.app'],\n \n \n {\"\\t\"}\n \n {\"// Credentials injected on egress - never in sandbox\"}\n \n \n \n {\"\\t\"}\n transformations: [{\"{\"}\n \n \n {\"\\t\\t\"}\n domain:{\" \"}\n 'api.openai.com',\n \n \n {\"\\t\\t\"}\n headers: {\"{\"} Authorization:{\" \"}\n \n 'Bearer $OPENAI_API_KEY'\n {\" \"}\n {\"}\"},\n \n \n {\"\\t\"}\n {\"}],\"}\n \n {\"});\"}\n \n \n \n \n \n )\n}\n\nexport {\n NetworkPolicySection,\n NetworkPolicy,\n NetworkPolicyContainer,\n NetworkPolicyHeader,\n NetworkPolicyEyebrow,\n NetworkPolicyTitle,\n NetworkPolicyDescription,\n NetworkPolicyGrid,\n NetworkPolicyFeatures,\n NetworkPolicyFeatureItem,\n NetworkPolicyFeatureIcon,\n NetworkPolicyFeatureText,\n NetworkPolicyFeatureTitle,\n NetworkPolicyFeatureDescription,\n NetworkPolicyCodeBlock,\n NetworkPolicyCode,\n NetworkPolicyCodeLine,\n NetworkPolicyKeyword,\n NetworkPolicyMethod,\n NetworkPolicyString,\n NetworkPolicyComment,\n}\n",
"type": "registry:ui"
}
]
}