feat(callout): Move Callout component to nextra/components (shuding#1864

)

Co-authored-by: Dimitri POSTOLOV <en3m@ya.ru>
Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>

package.json

@@ -110,6 +110,7 @@
     "@mdx-js/mdx": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
     "@napi-rs/simple-git": "^0.1.8",
+    "clsx": "^1.2.1",
     "github-slugger": "^2.0.0",
     "graceful-fs": "^4.2.10",
     "gray-matter": "^4.0.3",

src/components/button.tsx

@@ -1,18 +1,19 @@
 import type { ComponentProps, ReactElement } from 'react'
+import cn from 'clsx'
 
 export const Button = ({
   children,
-  className = '',
+  className,
   ...props
 }: ComponentProps<'button'>): ReactElement => {
   return (
     <button
-      className={[
+      className={cn(
         'nextra-button nx-transition-all active:nx-opacity-50',
         'nx-bg-primary-700/5 nx-border nx-border-black/5 nx-text-gray-600 hover:nx-text-gray-900 nx-rounded-md nx-p-1.5',
         'dark:nx-bg-primary-300/10 dark:nx-border-white/10 dark:nx-text-gray-400 dark:hover:nx-text-gray-50',
         className
-      ].join(' ')}
+      )}
       {...props}
     >
       {children}

src/components/callout.tsx

@@ -0,0 +1,60 @@
+import type { ReactElement, ReactNode } from 'react'
+import cn from 'clsx'
+
+import { InformationCircleIcon } from '../icons'
+
+const TypeToEmoji = {
+  default: '💡',
+  error: '🚫',
+  info: <InformationCircleIcon className="nx-mt-1" />,
+  warning: '⚠️'
+}
+
+type CalloutType = keyof typeof TypeToEmoji
+
+const classes: Record<CalloutType, string> = {
+  default: cn(
+    'nx-border-orange-100 nx-bg-orange-50 nx-text-orange-800 dark:nx-border-orange-400/30 dark:nx-bg-orange-400/20 dark:nx-text-orange-300'
+  ),
+  error: cn(
+    'nx-border-red-200 nx-bg-red-100 nx-text-red-900 dark:nx-border-red-200/30 dark:nx-bg-red-900/30 dark:nx-text-red-200'
+  ),
+  info: cn(
+    'nx-border-blue-200 nx-bg-blue-100 nx-text-blue-900 dark:nx-border-blue-200/30 dark:nx-bg-blue-900/30 dark:nx-text-blue-200'
+  ),
+  warning: cn(
+    'nx-border-yellow-100 nx-bg-yellow-50 nx-text-yellow-900 dark:nx-border-yellow-200/30 dark:nx-bg-yellow-700/30 dark:nx-text-yellow-200'
+  )
+}
+
+type CalloutProps = {
+  type?: CalloutType
+  emoji?: string | ReactElement
+  children: ReactNode
+}
+
+export function Callout({
+  children,
+  type = 'default',
+  emoji = TypeToEmoji[type]
+}: CalloutProps): ReactElement {
+  return (
+    <div
+      className={cn(
+        'nextra-callout nx-overflow-x-auto nx-mt-6 nx-flex nx-rounded-lg nx-border nx-py-2 ltr:nx-pr-4 rtl:nx-pl-4',
+        'contrast-more:nx-border-current contrast-more:dark:nx-border-current',
+        classes[type]
+      )}
+    >
+      <div
+        className="nx-select-none nx-text-xl ltr:nx-pl-3 ltr:nx-pr-2 rtl:nx-pr-3 rtl:nx-pl-2"
+        style={{
+          fontFamily: '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+        }}
+      >
+        {emoji}
+      </div>
+      <div className="nx-w-full nx-min-w-0 nx-leading-7">{children}</div>
+    </div>
+  )
+}

src/components/code.tsx

@@ -1,19 +1,20 @@
 import type { ComponentProps, ReactElement } from 'react'
+import cn from 'clsx'
 
 export const Code = ({
   children,
-  className = '',
+  className,
   ...props
 }: ComponentProps<'code'>): ReactElement => {
   const hasLineNumbers = 'data-line-numbers' in props
   return (
     <code
-      className={[
+      className={cn(
         'nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em]',
         'dark:nx-border-white/10 dark:nx-bg-white/10',
-        hasLineNumbers ? '[counter-reset:line]' : '',
+        hasLineNumbers && '[counter-reset:line]',
         className
-      ].join(' ')}
+      )}
       // always show code blocks in ltr
       dir="ltr"
       {...props}

src/components/index.ts

@@ -1,4 +1,5 @@
 export { Button } from './button'
+export { Callout } from './callout'
 export { CopyToClipboard } from './copy-to-clipboard'
 export { Code } from './code'
 export { Pre } from './pre'

src/components/pre.tsx

@@ -3,10 +3,11 @@ import { useCallback, useRef } from 'react'
 import { CopyToClipboard } from './copy-to-clipboard'
 import { Button } from './button'
 import { WordWrapIcon } from '../icons'
+import cn from 'clsx'
 
 export const Pre = ({
   children,
-  className = '',
+  className,
   hasCopyCode,
   filename,
   ...props
@@ -34,23 +35,23 @@ export const Pre = ({
         </div>
       )}
       <pre
-        className={[
+        className={cn(
           'nx-bg-primary-700/5 nx-mb-4 nx-overflow-x-auto nx-rounded-xl nx-font-medium nx-subpixel-antialiased dark:nx-bg-primary-300/10 nx-text-[.9em]',
           'contrast-more:nx-border contrast-more:nx-border-primary-900/20 contrast-more:nx-contrast-150 contrast-more:dark:nx-border-primary-100/40',
           filename ? 'nx-pt-12 nx-pb-4' : 'nx-py-4',
           className
-        ].join(' ')}
+        )}
         ref={preRef}
         {...props}
       >
         {children}
       </pre>
       <div
-        className={[
+        className={cn(
           'nx-opacity-0 nx-transition [div:hover>&]:nx-opacity-100 focus-within:nx-opacity-100',
           'nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0',
           filename ? 'nx-top-8' : 'nx-top-0'
-        ].join(' ')}
+        )}
       >
         <Button
           onClick={toggleWordWrap}