1import Link from 'next/link'
 2import clsx from 'clsx'
 3
 4import { Heading } from '@/components/Heading'
 5
 6export const a = Link
 7export { Button } from '@/components/Button'
 8export { CodeGroup, Code as code, Pre as pre } from '@/components/Code'
 9
10export const h2 = function H2(props) {
11  return <Heading level={2} {...props} />
12}
13
14function InfoIcon(props) {
15  return (
16    <svg viewBox="0 0 16 16" aria-hidden="true" {...props}>
17      <circle cx="8" cy="8" r="8" strokeWidth="0" />
18      <path
19        fill="none"
20        strokeLinecap="round"
21        strokeLinejoin="round"
22        strokeWidth="1.5"
23        d="M6.75 7.75h1.5v3.5"
24      />
25      <circle cx="8" cy="4" r=".5" fill="none" />
26    </svg>
27  )
28}
29
30export function Note({ children }) {
31  return (
32    <div className="my-6 flex gap-2.5 rounded-2xl border border-emerald-500/20 bg-emerald-50/50 p-4 leading-6 text-emerald-900 dark:border-emerald-500/30 dark:bg-emerald-500/5 dark:text-emerald-200 dark:[--tw-prose-links-hover:theme(colors.emerald.300)] dark:[--tw-prose-links:theme(colors.white)]">
33      <InfoIcon className="mt-1 h-4 w-4 flex-none fill-emerald-500 stroke-white dark:fill-emerald-200/20 dark:stroke-emerald-200" />
34      <div className="[&>:first-child]:mt-0 [&>:last-child]:mb-0">
35        {children}
36      </div>
37    </div>
38  )
39}
40
41export function Row({ children }) {
42  return (
43    <div className="grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:max-w-none xl:grid-cols-2">
44      {children}
45    </div>
46  )
47}
48
49export function Col({ children, sticky = false }) {
50  return (
51    <div
52      className={clsx(
53        '[&>:first-child]:mt-0 [&>:last-child]:mb-0',
54        sticky && 'xl:sticky xl:top-24'
55      )}
56    >
57      {children}
58    </div>
59  )
60}
61
62export function Properties({ children }) {
63  return (
64    <div className="my-6">
65      <ul
66        role="list"
67        className="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 dark:divide-white/5"
68      >
69        {children}
70      </ul>
71    </div>
72  )
73}
74
75export function Property({ name, type, children }) {
76  return (
77    <li className="m-0 px-0 py-4 first:pt-0 last:pb-0">
78      <dl className="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
79        <dt className="sr-only">Name</dt>
80        <dd>
81          <code>{name}</code>
82        </dd>
83        <dt className="sr-only">Type</dt>
84        <dd className="font-mono text-xs text-zinc-400 dark:text-zinc-500">
85          {type}
86        </dd>
87        <dt className="sr-only">Description</dt>
88        <dd className="w-full flex-none [&>:first-child]:mt-0 [&>:last-child]:mb-0">
89          {children}
90        </dd>
91      </dl>
92    </li>
93  )
94}