Function CodeStep

apps/docs/src/components/mdx/mdx-components.tsx:30–46

({ children, step }: { children: any; step: number })

import { useTranslation } from 'react-i18next'

function CodeStep({ children, step }: { children: any; step: number }) {
  return (
    <span
      data-step={step}
      css={[
        tw`relative rounded border-b-2 border-opacity-60 bg-opacity-10 px-[6px] py-[1.5px] dark:bg-opacity-20`,
        step === 1 && tw`bg-blue-40 border-blue-40 text-blue-60 dark:text-blue-30`,
        step === 2 && tw`bg-yellow-40 border-yellow-40 text-yellow-60 dark:text-yellow-30`,
        step === 3 && tw`bg-purple-40 border-purple-40 text-purple-60 dark:text-purple-30`,
        step === 4 && tw`bg-green-40 border-green-40 text-green-60 dark:text-green-30`,
      ]}
      className="code-step"
    >
      {children}
    </span>
  )
}

const P = (p: JSX.IntrinsicElements['p']) => <p tw="my-4 whitespace-pre-wrap" {...p} />