mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-29 07:20:43 +00:00
zeekay
6c65e3e941
Every import, the catalog pin and the docs name @hanzo/app and github.com/hanzoai/app. lib/rooms.ts is lib/app.ts and components/rooms.tsx is components/app.tsx.
214 lines
19 KiB
TypeScript
214 lines
19 KiB
TypeScript
'use client'
|
|
|
|
import type { ReactElement } from 'react'
|
|
import { motion } from '@/components/motion'
|
|
import { ExternalLink, Package } from 'lucide-react'
|
|
import { Box, Text, YStack, XStack } from '@hanzo/ui'
|
|
import { Grid } from '@hanzo/ui/grid'
|
|
import { Line } from '@/components/type'
|
|
import { More } from '@hanzo/ui/marketing'
|
|
import { mix } from '@hanzo/app/lib/mix'
|
|
|
|
interface SDK {
|
|
language: string;
|
|
name: string;
|
|
package: string;
|
|
registry: string;
|
|
url: string;
|
|
installCommand: string;
|
|
docsUrl?: string;
|
|
}
|
|
|
|
interface SDKSectionProps {
|
|
productName: string;
|
|
sdks: SDK[];
|
|
}
|
|
|
|
/** Every mark is drawn at 24 and filled with the tile's own ink. */
|
|
const LOGO = { width: 24, height: 24 }
|
|
|
|
const languageLogos: Record<string, ReactElement> = {
|
|
python: (
|
|
<svg {...LOGO} viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M14.25.18l.9.2.73.26.59.3.45.32.34.34.25.34.16.33.1.3.04.26.02.2-.01.13V8.5l-.05.63-.13.55-.21.46-.26.38-.3.31-.33.25-.35.19-.35.14-.33.1-.3.07-.26.04-.21.02H8.77l-.69.05-.59.14-.5.22-.41.27-.33.32-.27.35-.2.36-.15.37-.1.35-.07.32-.04.27-.02.21v3.06H3.17l-.21-.03-.28-.07-.32-.12-.35-.18-.36-.26-.36-.36-.35-.46-.32-.59-.28-.73-.21-.88-.14-1.05-.05-1.23.06-1.22.16-1.04.24-.87.32-.71.36-.57.4-.44.42-.33.42-.24.4-.16.36-.1.32-.05.24-.01h.16l.06.01h8.16v-.83H6.18l-.01-2.75-.02-.37.05-.34.11-.31.17-.28.25-.26.31-.23.38-.2.44-.18.51-.15.58-.12.64-.1.71-.06.77-.04.84-.02 1.27.05zm-6.3 1.98l-.23.33-.08.41.08.41.23.34.33.22.41.09.41-.09.33-.22.23-.34.08-.41-.08-.41-.23-.33-.33-.22-.41-.09-.41.09zm13.09 3.95l.28.06.32.12.35.18.36.27.36.35.35.47.32.59.28.73.21.88.14 1.04.05 1.23-.06 1.23-.16 1.04-.24.86-.32.71-.36.57-.4.45-.42.33-.42.24-.4.16-.36.09-.32.05-.24.02-.16-.01h-8.22v.82h5.84l.01 2.76.02.36-.05.34-.11.31-.17.29-.25.25-.31.24-.38.2-.44.17-.51.15-.58.13-.64.09-.71.07-.77.04-.84.01-1.27-.04-1.07-.14-.9-.2-.73-.25-.59-.3-.45-.33-.34-.34-.25-.34-.16-.33-.1-.3-.04-.25-.02-.2.01-.13v-5.34l.05-.64.13-.54.21-.46.26-.38.3-.32.33-.24.35-.2.35-.14.33-.1.3-.06.26-.04.21-.02.13-.01h5.84l.69-.05.59-.14.5-.21.41-.28.33-.32.27-.35.2-.36.15-.36.1-.35.07-.32.04-.28.02-.21V6.07h2.09l.14.01zm-6.47 14.25l-.23.33-.08.41.08.41.23.33.33.23.41.08.41-.08.33-.23.23-.33.08-.41-.08-.41-.23-.33-.33-.23-.41-.08-.41.08z"/>
|
|
</svg>
|
|
),
|
|
javascript: (
|
|
<svg {...LOGO} viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z"/>
|
|
</svg>
|
|
),
|
|
typescript: (
|
|
<svg {...LOGO} viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z"/>
|
|
</svg>
|
|
),
|
|
go: (
|
|
<svg {...LOGO} viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M1.811 10.231c-.047 0-.058-.023-.035-.059l.246-.315c.023-.035.081-.058.128-.058h4.172c.046 0 .058.035.035.07l-.199.303c-.023.036-.082.07-.117.07zM.047 11.306c-.047 0-.059-.023-.035-.058l.245-.316c.023-.035.082-.058.129-.058h5.328c.047 0 .07.035.058.07l-.093.28c-.012.047-.058.07-.105.07zm2.828 1.075c-.047 0-.059-.035-.035-.07l.163-.292c.023-.035.07-.07.117-.07h2.337c.047 0 .07.035.07.082l-.023.28c0 .047-.047.082-.082.082zm12.129-2.36c-.736.187-1.239.327-1.963.514-.176.046-.187.058-.34-.117-.174-.199-.303-.327-.548-.444-.737-.362-1.45-.257-2.115.175-.795.514-1.204 1.274-1.192 2.22.011.935.654 1.706 1.577 1.835.795.105 1.46-.175 1.987-.77.105-.13.198-.27.315-.434H10.47c-.245 0-.304-.152-.222-.35.152-.362.432-.97.596-1.274a.315.315 0 01.292-.187h4.253c-.023.316-.023.631-.07.947a4.983 4.983 0 01-.958 2.29c-.841 1.11-1.94 1.8-3.33 1.986-1.145.152-2.209-.07-3.143-.77-.865-.655-1.356-1.52-1.484-2.595-.152-1.274.222-2.419.993-3.424.83-1.086 1.928-1.776 3.272-2.02 1.098-.2 2.15-.07 3.096.571.62.41 1.063.97 1.356 1.648.07.105.023.164-.117.2z"/>
|
|
</svg>
|
|
),
|
|
rust: (
|
|
<svg {...LOGO} viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M23.8344 11.4951l-1.0752-.6894a14.0314 14.0314 0 00-.0341-.4539l.9338-.8209a.3762.3762 0 00-.1656-.6269l-1.1969-.4009a9.4961 9.4961 0 00-.1099-.4476l.7749-.9529a.3762.3762 0 00-.2854-.601l-1.2548-.1679a10.3554 10.3554 0 00-.1849-.4249l.5875-1.0546a.3762.3762 0 00-.3976-.5516l-1.2422.0642c-.0783-.1361-.1598-.2695-.245-.3999l.3764-1.1208a.3762.3762 0 00-.4964-.4787l-1.1599.2867a10.171 10.171 0 00-.3001-.3635l.1498-1.1456a.3762.3762 0 00-.5781-.3853l-1.0123.4948c-.1126-.1066-.2279-.2101-.3459-.3104l-.0812-1.1248a.3762.3762 0 00-.6378-.274l-.8032.6879a9.6263 9.6263 0 00-.3837-.2436l-.3052-1.0617a.3762.3762 0 00-.6725-.1459l-.5463.8547c-.1395-.066-.2816-.1285-.426-.1871l-.5159-.9562a.3762.3762 0 00-.6818.0033l-.5026.9622c-.1449.0611-.2874.1259-.4274.1942l-.557-.8483a.3762.3762 0 00-.6703.1569l-.2918 1.0662c-.1336.0818-.2645.1668-.3926.2546l-.8125-.6786a.3762.3762 0 00-.6334.2839l-.0684 1.1266c-.1168.1017-.2307.2064-.3419.3141l-1.0212-.4836a.3762.3762 0 00-.5724.3941l.1629 1.1443c-.0966.1206-.1902.244-.2808.3704l-1.1725-.2753a.3762.3762 0 00-.4878.4876l.3883 1.1138a9.8145 9.8145 0 00-.2146.4106l-1.2545-.0536a.3762.3762 0 00-.3891.5587l.602 1.0424c-.0588.1451-.1147.2922-.1668.4416l-1.2629.1812a.3762.3762 0 00-.2768.607l.789.9365c-.0395.1539-.0763.3094-.1094.4663l-1.1931.4114a.3762.3762 0 00-.1549.6296l.9464.8071c-.0186.1548-.0332.3108-.0438.4681l-1.0568.6997a.3762.3762 0 00-.0246.6303l1.0692.6754a8.8276 8.8276 0 00.0562.4683l-.8866.8339a.3762.3762 0 00.1074.6309l1.2091.3853c.0448.1518.0935.3019.146.4501l-.6861.9452a.3762.3762 0 00.2339.5912l1.2668.1505c.0749.1417.1533.2812.2352.4182l-.4602 1.0262a.3762.3762 0 00.3519.5331l1.2513-.0788c.1032.1305.2094.2582.3188.383l-.2178 1.0725a.3762.3762 0 00.4566.4503l1.1638-.3029c.1226.1145.248.2258.3765.334l.0319 1.0804a.3762.3762 0 00.5426.3453l1.0104-.5173c.1369.0987.2765.1942.4187.2864l.2788 1.0461a.3762.3762 0 00.6063.2221l.7954-.7128c.1458.0755.2944.1478.4454.2166l.5159.9706a.3762.3762 0 00.6439.0854l.5261-.8929c.1539.0533.3097.1029.4674.1489l.7371.8532a.3762.3762 0 00.6537-.0617l.2131-1.0387c.1593.0263.32.0488.4819.0676l.9313.7003a.3762.3762 0 00.6357-.2275l-.1088-1.0678a9.1745 9.1745 0 00.4786-.0586l1.0912.5123a.3762.3762 0 00.5926-.3807l-.4191-1.0376c.1486-.0575.2951-.1183.4393-.1823l1.2104.2906a.3762.3762 0 00.5254-.5166l-.7122-.9534c.1289-.0856.2555-.1742.3796-.2659l1.2822.0426a.3762.3762 0 00.4359-.6299l-.9776-.8309c.1016-.1089.2003-.2207.2961-.3354l1.3038-.2063a.3762.3762 0 00.3274-.7159zm-6.7782 5.3449a.6751.6751 0 01-.6641-.796c.0355-.1815.126-.3486.2633-.4861l.0069-.0072c.1344-.1373.3001-.2302.4801-.2693a.6751.6751 0 01.6659.2644c.1328.1802.1827.4094.1372.6272a.6751.6751 0 01-.6641.4871c.0076.0003.0152.0003.0228.0003a.6751.6751 0 01-.248-.02zm-.3879-2.0367l.0012-.0005c.152-.0598.3051-.1163.4594-.1695l-.1831-.8515h1.0855l-.2076.8563c.1451.0501.2887.1032.4307.1595l.5748-.6822.7607.6482-.5928.6949c.1199.0961.238.1953.3537.2977l.7709-.4622.4844.9004-.7844.4716a8.2011 8.2011 0 01.2493.4064l.8851-.243.2053.9615-.8959.2463c.0588.1526.1142.3066.1663.4618l.9158-.0027v.9814l-.9232-.0025a7.2666 7.2666 0 01-.1258.4652l.8534.2827-.22.963-.8678-.287a7.1648 7.1648 0 01-.2186.4172l.7328.4921-.4981.8936-.748-.5022a6.5503 6.5503 0 01-.303.3812l.5638.7093-.6885.6665-.5788-.7282c-.1136.108-.2297.213-.3481.3151l.3635.8613-.8453.4796-.3768-.8893a5.8862 5.8862 0 01-.3944.2448l.1427.9258-.9487.231-.1579-.9488a5.7227 5.7227 0 01-.4385.1374l-.0814.9611-.98.0058.0654-.9735a5.6813 5.6813 0 01-.4546-.0466l-.2971.9306-.9371-.233.2865-.9005a5.1614 5.1614 0 01-.4325-.1661l-.5-.8594.8495-.4946-.3295-.5673a8.0556 8.0556 0 01-2.5315-.8459.6751.6751 0 01.0152-1.2066.6751.6751 0 01.5696.0167 6.8585 6.8585 0 002.7174.7261.6751.6751 0 01.5951.5287.6751.6751 0 01-.0841.5178 6.8629 6.8629 0 00-.3879-.2287l.5012-.8619.8633.4974-.4825.8294a6.0336 6.0336 0 00.4063.1869l.3065-.9107.9293.2401-.2984.8878a6.0478 6.0478 0 00.4344.0661l.0992-.9635.9587.0069-.0836.9574a5.951 5.951 0 00.4379-.1156l-.1178-.9369.9543-.2254.1361.9284a6.2253 6.2253 0 00.4074-.2209l-.3537-.8767.8595-.4691.3747.8625a6.4068 6.4068 0 00.3656-.319l-.5741-.7218.7031-.6519.5996.7527a6.6299 6.6299 0 00.303-.4024l-.7599-.5103.5137-.882.7788.5231a7.0481 7.0481 0 00.227-.4653l-.8862-.2939.3002-.9418.9024.2996a7.5653 7.5653 0 00.1432-.4937l-.9427-.0028V10.81l.9481-.0021a8.0631 8.0631 0 00-.1065-.4911l-.9156.2511-.2181-.9518.9047-.2481a8.3535 8.3535 0 00-.2186-.4572l-.8222.4936-.4707-.8832.809-.4854a8.7519 8.7519 0 00-.3149-.3997l-.6769.5754-.6884-.6478.6625-.5626a9.2209 9.2209 0 00-.3918-.3337l-.4959.7082-.8573-.5061.4817-.6876a8.8224 8.8224 0 00-.4449-.2611l-.2834.8963-.9607-.2337.2739-.8672a9.4594 9.4594 0 00-.481-.1841l-.0588.9562-.9869-.0127.0451-.9308a9.7188 9.7188 0 00-.5067-.1047l.1669.9374-.9665.2072-.1825-.9169a9.9367 9.9367 0 00-.5053-.0253l.395.8883-.9025.4173-.4124-.8736a9.4561 9.4561 0 00-.8654.0805l.616.7792-.7821.5828-.6345-.8018a9.9576 9.9576 0 00-.4303.1697l.8082.6452-.6153.7384-.8243-.6588a9.8294 9.8294 0 00-.3879.2379l.9477.4756-.4272.8566-.9625-.4832a10.0373 10.0373 0 00-.3301.2958l1.0338.2836-.2242.9384-1.0456-.2871a10.8053 10.8053 0 00-.2637.3443l1.0639.0685-.0117.9641-1.0719-.0691a11.3045 11.3045 0 00-.1862.3795l1.0348-.1446.202.9499-1.043.1462c-.0478.1321-.0921.2656-.1331.4002l.9503-.356.4129.8887-.9593.3584c-.0331.1376-.0629.2765-.0894.4164l.8161-.5549.6109.7457-.8219.5575a9.5513 9.5513 0 00-.0397.4226l.6393-.7267.7778.6263-.6449.7332c.0091.1401.0212.2794.0365.4178l.4264-.8584.9037.4287-.4324.8698c.028.1379.0587.2751.0925.4112l.1916-.9455.9819.1935-.1987.9521c.0464.1326.0956.264.1476.394l-.055-.9763 1.0021-.0421.0579.9842c.0596.1261.1219.251.187.3745l-.2915-.9312.9599-.3019.3025.9661a8.2533 8.2533 0 00.2175-.3366l-.5113-.8432.8423-.5236.532.8747c.0806-.1069.1584-.2159.2334-.3269l-.7002-.7154.6821-.7218.7263.7416c.0671-.1149.1316-.2317.1935-.3503l-.8459-.5473.4918-.8686.8736.5651c.0528-.1227.1031-.247.1508-.3726l-.9375-.3449.2768-.9471.9643.3553c.0392-.1306.0758-.2625.1099-.3955l-.9728-.1199.0544-.9784 1.0005.1233c.0249-.1358.0473-.2727.0672-.4106l-.9566.1072-.1675-.9655.98-.1097c.0104-.1414.0182-.2837.0233-.4265l-.8875.3179-.3921-.8999.9122-.3268c-.0064-.1445-.0152-.2895-.0267-.4346l-.7805.5114-.5994-.7626.8004-.5244c-.0204-.1424-.0434-.2847-.0688-.4266l-.6362.6743-.7731-.6355.654-.6929c-.0331-.1367-.0686-.2729-.1063-.4083l-.4614.8058-.9008-.4382.4775-.8335c-.0479-.1299-.098-.2589-.1503-.387l-.2636.8967-.9744-.2783.2758-.938c-.0597-.1201-.1216-.2393-.1855-.3576l-.0512.9378-1.0006.0217.055-.9461c-.0703-.1101-.1425-.2193-.2167-.3273l.1693.9181-.9803.1845-.1783-.9655c-.079-.0989-.1598-.1968-.2424-.2935l.3841.8637-.9147.4093-.4037-.9064c-.0867-.0876-.175-.174-.2649-.2591l.5818.7763-.8093.5994-.6102-.814a8.6014 8.6014 0 00-.281-.2215l.7502.6587-.6694.7559-.7839-.6874a7.9655 7.9655 0 00-.2946-.1819l.8807.5162-.5045.8703-.9106-.5343a7.6168 7.6168 0 00-.3012-.1403l.9676.3538-.323.9473-.9985-.3655c-.1039.0357-.2066.0741-.3083.1148l1.0073.1761-.1313.9813-1.0361-.1806a8.6618 8.6618 0 00-.3086.1545l.9981-.0099.0592.9852-1.0275.0097a9.1165 9.1165 0 00-.3015.1936l.9414-.1938.2464.9602-.9665.1988a9.1936 9.1936 0 00-.2868.2314l.8401-.3668.4229.9051-.8635.3764c-.0874.0827-.173.1671-.2567.2532l.6991-.5241.5833.8169-.7172.5378a9.7962 9.7962 0 00-.2194.276l.5256-.664.7218.6962-.5406.6826a10.0485 10.0485 0 00-.1763.2948l.3278-.7724.8332.5486-.3373.7943c-.0506.1032-.0985.2078-.144.3138l.1106-.8509.908.3818-.1148.8831a8.2011 8.2011 0 00-.1065.3279zm-3.4972-3.9059l-.0177.0175a2.4683 2.4683 0 01-1.8359.7706 2.4683 2.4683 0 01-1.8002-.784 2.4683 2.4683 0 01-.6918-1.8341 2.4683 2.4683 0 01.7411-1.7975 2.4683 2.4683 0 011.8359-.7706c.678 0 1.325.2775 1.8002.7839a2.4683 2.4683 0 01.6918 1.8342 2.4683 2.4683 0 01-.7234 1.78z"/>
|
|
</svg>
|
|
),
|
|
};
|
|
|
|
/**
|
|
* A registry's badge, as the two treatments it actually has: PyPI is stated at
|
|
* full strength and everything else at three-quarters. They were four class
|
|
* strings, three of them byte-identical.
|
|
*/
|
|
const QUIET = { bg: 'var(--white-05)', color: mix('var(--foreground)', 70), borderColor: 'var(--border)' } as const
|
|
const PYPI = { bg: 'var(--white-10)', color: 'var(--foreground)', borderColor: 'var(--white-30)' } as const
|
|
const UNKNOWN = { bg: 'var(--neutral-800)', color: 'var(--muted-foreground)', borderColor: 'var(--border)' } as const
|
|
|
|
const REGISTRY: Record<string, typeof QUIET | typeof PYPI> = {
|
|
npm: QUIET,
|
|
pypi: PYPI,
|
|
'crates.io': QUIET,
|
|
'go modules': QUIET,
|
|
}
|
|
|
|
/** The registry an SDK ships through, as a small outlined badge in its tone.
|
|
* `pl`/`pr`, not `px`: this file's `Line` reads `px` as a font size. */
|
|
function Registry({ name }: { name: string }) {
|
|
return (
|
|
<Line
|
|
display="inline-flex"
|
|
items="center"
|
|
pl={8}
|
|
pr={8}
|
|
py={2}
|
|
fontSize="$1"
|
|
rounded={4}
|
|
borderWidth={1}
|
|
borderStyle="solid"
|
|
{...(REGISTRY[name.toLowerCase()] ?? UNKNOWN)}
|
|
lineHeight="calc(1 / 0.75)"
|
|
>
|
|
{name}
|
|
</Line>
|
|
)
|
|
}
|
|
|
|
export function SDKSection({ productName, sdks }: SDKSectionProps) {
|
|
return (
|
|
<motion.section
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<YStack py={64} px={16} $md={{ px: 32 }}>
|
|
<YStack width="100%" maxW={896} mx="auto">
|
|
<XStack items="center" gap={8} mb={8}>
|
|
<Package width={20} height={20} color="var(--foreground)" />
|
|
<Line
|
|
size="sm"
|
|
weight="500"
|
|
caps
|
|
>
|
|
SDKs & Libraries
|
|
</Line>
|
|
</XStack>
|
|
|
|
<Line
|
|
render="h2"
|
|
size="x2"
|
|
weight="700"
|
|
marginBottom={8}
|
|
$md={{ fontSize: 'var(--text-3xl)', lineHeight: '1.2' }}
|
|
>
|
|
Official {productName} SDKs
|
|
</Line>
|
|
<Line render="p" tone="muted" marginBottom={32}>
|
|
Use our official SDKs to integrate {productName} into your application
|
|
</Line>
|
|
|
|
<Grid columns={{ min: 320, max: 2 }} gap={16}>
|
|
{sdks.map((sdk, index) => (
|
|
/* The card an SDK sits in. `hover:border-border` was a hover onto the colour it
|
|
already had, so it is gone rather than translated. */
|
|
<Box
|
|
key={sdk.language}
|
|
render={<motion.div initial={{ opacity: 0, y: 10 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.4, delay: index * 0.1 }} />}
|
|
p={20}
|
|
borderWidth={1}
|
|
borderColor="var(--border)"
|
|
rounded="var(--radius-xl)"
|
|
bg={mix('var(--secondary)', 50)}
|
|
>
|
|
<XStack items="flex-start" justify="space-between" mb={16}>
|
|
<XStack items="center" gap={12}>
|
|
<XStack
|
|
width={40}
|
|
height={40}
|
|
items="center"
|
|
justify="center"
|
|
rounded="var(--radius-lg)"
|
|
bg="var(--neutral-800)"
|
|
$platform-web={{ color: 'color-mix(in oklab, var(--foreground) 80%, transparent)' }}
|
|
>
|
|
{languageLogos[sdk.language.toLowerCase()] || <Package width={20} height={20} />}
|
|
</XStack>
|
|
{/* A stack rather than a div: gui's Text is `display: inline`,
|
|
so the name and the registry badge would share a line
|
|
unless the name is a flex item. `flex-start` keeps the
|
|
badge shrink-wrapped, which is what an inline-flex span
|
|
did inside the block this replaces. */}
|
|
<YStack items="flex-start">
|
|
<Line render="h3" weight="600">
|
|
{sdk.name}
|
|
</Line>
|
|
<Registry name={sdk.registry} />
|
|
</YStack>
|
|
</XStack>
|
|
</XStack>
|
|
|
|
{/* The install line, set in the mono face and allowed to scroll rather than wrap. */}
|
|
<Line
|
|
render="div"
|
|
display="block"
|
|
p={12}
|
|
mb={16}
|
|
rounded="var(--radius-lg)"
|
|
bg="var(--background)"
|
|
fontFamily="$mono"
|
|
fontSize="$2"
|
|
overflowX="auto"
|
|
color={mix('var(--foreground)', 80)}
|
|
lineHeight="calc(1.25 / 0.875)"
|
|
>
|
|
{sdk.installCommand}
|
|
</Line>
|
|
|
|
{/* `More` is the quiet link, and the name lost its `hz-` prefix
|
|
when this document's rules did — these two had kept it, so
|
|
they matched no rule and rendered as full-width blocks
|
|
instead of a pair of inline links. */}
|
|
<XStack gap={12}>
|
|
<More href={sdk.url || '#'} target="_blank" rel="noopener noreferrer">
|
|
<Package width={14} height={14} />
|
|
{sdk.package}
|
|
<ExternalLink width={12} height={12} />
|
|
</More>
|
|
{sdk.docsUrl && (
|
|
<More href={sdk.docsUrl || '#'} target="_blank" rel="noopener noreferrer">
|
|
Docs
|
|
<ExternalLink width={12} height={12} />
|
|
</More>
|
|
)}
|
|
</XStack>
|
|
</Box>
|
|
))}
|
|
</Grid>
|
|
</YStack>
|
|
</YStack>
|
|
</motion.section>
|
|
);
|
|
}
|
|
|
|
export default SDKSection;
|