CodeBlock

codeblock-1779394025689.tsx

'use client'
import { useState } from 'react'

const SAMPLE = `import { GradientButton } from 'empire-ui'

export default function App() {
  return (
    <GradientButton
      label="Get Started"
      onClick={() => console.log('clicked')}
    />
  )
}`

export default function CodeBlock({ code = SAMPLE, language = 'tsx' }) {
  const [copied, setCopied] = useState(false)
  const copy = async () => {
    await navigator.clipboard.writeText(code)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }
  return (
    <div style={{ background:'#1e1e2e', borderRadius:'14px', overflow:'hidden', maxWidth:'500px' }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:'10px 16px', background:'#16162a', borderBottom:'1px solid #2d2d3d' }}>
        <div style={{ display:'flex', gap:'6px' }}>
          {['#ef4444','#f59e0b','#10b981'].map(c => <div key={c} style={{ width:'12px', height:'12px', borderRadius:'50%', background:c }} />)}
        </div>
        <span style={{ color:'#64748b', fontSize:'12px', fontFamily:'monospace' }}>{language}</span>
        <button onClick={copy} style={{
          background:copied ? '#10b981' : '#2d2d3d', border:'none', borderRadius:'6px',
          color:copied ? '#fff' : '#94a3b8', padding:'4px 10px', cursor:'pointer', fontSize:'12px', fontWeight:600,
        }}>{copied ? '✓' : '📋'}</button>
      </div>
      <pre style={{ margin:0, padding:'18px 20px', overflowX:'auto', fontSize:'13px', lineHeight:1.6, color:'#e2e8f0', fontFamily:'monospace' }}>
        <code>{code}</code>
      </pre>
    </div>
  )
}

Component info

CategoryCode

Frameworkreact

TierFREE

Copies0

About

Syntax-highlighted code block with copy button and language badge

More from Code

'use client'
import { useState } from 'react'

const EXAMPLES = {
  tsx: {
    label: 'TypeScript',
    code: `import { useState } from 'react'

interface ButtonProps {
  variant?: 'primary' | 'ghost'
  children: React.ReactNode
  onClick?: () => voi

CodeBlock

Code

'use client';
import { useState, useRef, useEffect } from 'react';

export default function TerminalPrompt() {
  const [history, setHistory] = useState([
    { type: 'output', text: 'Welcome to Empire Terminal v2.0.0' },
    { type: 'output', text: '

TerminalPrompt

Code

'use client'
import { useState } from 'react'

const SAMPLE = { user:{ name:'Alice', role:'admin', active:true }, plan:'pro', components:17500, tags:['react','typescript','tailwind'] }

function JsonNode({ data, depth = 0 }) {
  const [open, setOpen]

JsonViewer

Code

'use client'
import { useState, useEffect } from 'react'

const SEQUENCE = [
  { type:'input', text:'npm install empire-ui', delay:80 },
  { type:'output', text:'Installing dependencies...', delay:0 },
  { type:'output', text:'✓ Added 1 package in 0.

CommandLine

Code