AXIS
Agentic UI/CodeBlock

CodeBlock

AI가 생성한 코드를 표시하는 블록 컴포넌트입니다. 복사 버튼, 라인 번호, 파일명 표시를 지원합니다.

Installation

bash
npx axis-cli add code-block --agentic

Interactive Demo

use-user.ts
1import { useState, useEffect } from 'react'
2

3interface User {
4  id: string
5  name: string
6  email: string
7}
8

9export function useUser(userId: string) {
10  const [user, setUser] = useState<User | null>(null)
11  const [loading, setLoading] = useState(true)
12

13  useEffect(() => {
14    fetch(`/api/users/${userId}`)
15      .then(res => res.json())
16      .then(data => {
17        setUser(data)
18        setLoading(false)
19      })
20  }, [userId])
21

22  return { user, loading }
23}

Variants

파일명 + 라인 번호

example.js
1const greeting = "Hello!"
2console.log(greeting)

언어만 표시

sql
SELECT * FROM users
WHERE active = true
ORDER BY created_at DESC

최대 높이 제한

scrollable.ts
1import { useState, useEffect } from 'react'
2

3interface User {
4  id: string
5  name: string
6  email: string
7}
8

9export function useUser(userId: string) {
10  const [user, setUser] = useState<User | null>(null)
11  const [loading, setLoading] = useState(true)
12

13  useEffect(() => {
14    fetch(`/api/users/${userId}`)
15      .then(res => res.json())
16      .then(data => {
17        setUser(data)
18        setLoading(false)
19      })
20  }, [userId])
21

22  return { user, loading }
23}

Usage

tsx
import { CodeBlock } from '@axis-ds/agentic-ui'

export function Example() {
  return (
    <CodeBlock
      code={`function hello() {
  console.log('Hello, World!')
}`}
      language="typescript"
      filename="hello.ts"
      showLineNumbers
    />
  )
}

Props

codeRequired
Type:string

표시할 코드 문자열

language
Type:string
Default:-

언어 힌트 (표시용)

filename
Type:string
Default:-

파일 이름

showLineNumbers
Type:boolean
Default:false

라인 번호 표시 여부

onCopy
Type:(code: string) => void
Default:-

복사 콜백

maxHeight
Type:string
Default:-

최대 높이 (CSS 값)

className
Type:string
Default:-

추가 CSS 클래스