Callout

import { type ComponentPropsWithoutRef } from 'react'

import { cn } from '@amineslab/ui/utils'

import { Callout, type CalloutColor } from '@amineslab/ui'

const calloutDescriptions: Record<CalloutColor, string> = {
    neutral: '본문을 이해하는 데 필요한 배경이나 참고 사항을 덧붙입니다.',
    info: '시작하기 전에 확인할 정보와 조건을 안내합니다.',
    talk: '직접 경험한 내용이나 본문에 덧붙일 이야기를 전합니다.',
    help: '작업을 더 쉽게 진행할 수 있는 팁과 도움말을 제공합니다.',
    success: '정상적으로 완료되기 위한 조건과 권장 방법을 설명합니다.',
    warning: '계속하기 전에 알아야 할 제한과 주의 사항을 설명합니다.',
    danger: '데이터 삭제처럼 되돌릴 수 없는 작업의 영향을 안내합니다.',
};

const calloutColors = ['neutral', 'info', 'talk', 'help', 'success', 'warning', 'danger'] as const;

function ExampleStack({ className, compact = false, fullWidth = false, ...props }: ComponentPropsWithoutRef<'div'> & {
    compact?: boolean;
    fullWidth?: boolean;
}) {
    return (<div {...props} className={cn('grid', compact ? 'w-auto gap-2' : fullWidth ? 'w-full gap-4' : 'w-full max-w-[360px] gap-3', className)}/>);
}

export default function ExamplePreview() {
  return ((<ExampleStack fullWidth>
          {calloutColors.map((color) => (<Callout key={color} color={color}>
              {calloutDescriptions[color]}
            </Callout>))}
        </ExampleStack>))
}

import { type ComponentPropsWithoutRef } from 'react'

import { cn } from '@amineslab/ui/utils'

import { Callout } from '@amineslab/ui'

function InlineCode({ className, ...props }: ComponentPropsWithoutRef<'code'>) {
    return (<code {...props} className={cn('rounded-sm bg-section-secondary px-1 py-0.5 text-code-3 text-brand-900 [word-break:normal]', className)}/>);
}

function ExampleStack({ className, compact = false, fullWidth = false, ...props }: ComponentPropsWithoutRef<'div'> & {
    compact?: boolean;
    fullWidth?: boolean;
}) {
    return (<div {...props} className={cn('grid', compact ? 'w-auto gap-2' : fullWidth ? 'w-full gap-4' : 'w-full max-w-[360px] gap-3', className)}/>);
}

export default function ExamplePreview() {
  return ((<ExampleStack fullWidth>
          <Callout color="talk">
            <p>
              처음 접하는 분도 따라올 수 있도록 <strong>개념부터 차근차근</strong> 설명합니다.
            </p>
          </Callout>
          <Callout color="info">
            <p>
              예제에는 <strong>가상 데이터</strong>를 사용합니다.{' '}
              <InlineCode>example.com</InlineCode>을 실제 설정에 맞게 변경하세요.
            </p>
          </Callout>
        </ExampleStack>))
}

import { type ComponentPropsWithoutRef } from 'react'

import { cn } from '@amineslab/ui/utils'

import { Callout } from '@amineslab/ui'

function ExampleStack({ className, compact = false, fullWidth = false, ...props }: ComponentPropsWithoutRef<'div'> & {
    compact?: boolean;
    fullWidth?: boolean;
}) {
    return (<div {...props} className={cn('grid', compact ? 'w-auto gap-2' : fullWidth ? 'w-full gap-4' : 'w-full max-w-[360px] gap-3', className)}/>);
}

export default function ExamplePreview() {
  return ((<ExampleStack fullWidth>
          {(['sm', 'md', 'lg'] as const).map((size) => (<Callout key={size} color="info" size={size} title={size}>
              안내의 길이와 주변 콘텐츠에 맞춰 여백을 선택합니다.
            </Callout>))}
        </ExampleStack>))
}

import { type ComponentPropsWithoutRef } from 'react'

import { cn } from '@amineslab/ui/utils'

import { Callout } from '@amineslab/ui'

import { BookOpen } from '@amineslab/ui/icons'

function ExampleStack({ className, compact = false, fullWidth = false, ...props }: ComponentPropsWithoutRef<'div'> & {
    compact?: boolean;
    fullWidth?: boolean;
}) {
    return (<div {...props} className={cn('grid', compact ? 'w-auto gap-2' : fullWidth ? 'w-full gap-4' : 'w-full max-w-[360px] gap-3', className)}/>);
}

export default function ExamplePreview() {
  return ((<ExampleStack fullWidth>
          <Callout icon={<BookOpen />} title="사용 가이드" action={<a href="/getting-started/theming">테마 가이드 읽기</a>}>
            자세한 설정 방법을 확인하세요.
          </Callout>
          <Callout icon={null}>아이콘 없이 간결하게 표시합니다.</Callout>
        </ExampleStack>))
}