Code Component

import { Code } from '@dashflowx/core'

export default function CodeExample() {
  return (
    <Code>console.log('Hello, World!')</Code>
  )
}

<p>
  Use the <Code>useState</Code> hook to manage component state.
</p>

<Code className="bg-blue-100 text-blue-800 px-2 py-1 rounded">
  npm install package-name
</Code>

<div className="space-y-2">
  <p>JavaScript: <Code>const name = 'John'</Code></p>
  <p>Python: <Code>name = 'John'</Code></p>
  <p>CSS: <Code>color: #ff0000</Code></p>
  <p>HTML: <Code>&lt;div&gt;Content&lt;/div&gt;</Code></p>
</div>

<div className="prose">
  <p>
    To create a new React component, use the following command:
  </p>
  <Code>npx create-react-app my-app</Code>
  <p>
    This will create a new React application in the <Code>my-app</Code> directory.
  </p>
</div>

<div className="space-y-4">
  <h3>API Endpoint</h3>
  <p>
    Make a GET request to: <Code>https://api.example.com/users</Code>
  </p>
  
  <h3>Response Format</h3>
  <p>
    The response will be in JSON format with a <Code>data</Code> property.
  </p>
  
  <h3>Error Codes</h3>
  <ul>
    <li><Code>400</Code> - Bad Request</li>
    <li><Code>401</Code> - Unauthorized</li>
    <li><Code>404</Code> - Not Found</li>
  </ul>
</div>

<div className="space-y-4">
  <h3>Step 1: Install Dependencies</h3>
  <p>
    First, install the required package:
  </p>
  <Code>npm install @dashflowx/core</Code>
  
  <h3>Step 2: Import Component</h3>
  <p>
    Import the component in your file:
  </p>
  <Code>import { Button } from '@dashflowx/core'</Code>
  
  <h3>Step 3: Use Component</h3>
  <p>
    Use the component in your JSX:
  </p>
  <Code>&lt;Button&gt;Click me&lt;/Button&gt;</Code>
</div>

<div className="space-y-4">
  <h3>Environment Variables</h3>
  <p>
    Set the following environment variables:
  </p>
  <ul className="space-y-2">
    <li><Code>NODE_ENV=production</Code></li>
    <li><Code>DATABASE_URL=postgresql://...</Code></li>
    <li><Code>API_KEY=your-api-key</Code></li>
  </ul>
  
  <h3>Configuration File</h3>
  <p>
    Update your <Code>config.json</Code> file:
  </p>
  <Code>{"{ \"port\": 3000, \"debug\": false }"}</Code>
</div>

<div className="space-y-4">
  <h3>Git Commands</h3>
  <div className="space-y-2">
    <p>Clone repository: <Code>git clone https://github.com/user/repo.git</Code></p>
    <p>Check status: <Code>git status</Code></p>
    <p>Add files: <Code>git add .</Code></p>
    <p>Commit changes: <Code>git commit -m "Initial commit"</Code></p>
    <p>Push to remote: <Code>git push origin main</Code></p>
  </div>
</div>

// ✅ Good - Consistent styling
<Code className="bg-gray-100 text-gray-800 px-2 py-1 rounded">
  function example() { return 'Hello'; }
</Code>

// ✅ Good - Actual code
<p>Use <Code>useState</Code> for state management.</p>

// ❌ Avoid - Not actual code
<p>This is <Code>important</Code> information.</p>

// ✅ Good - Short and readable
<Code>npm install</Code>

// ❌ Avoid - Too long for inline code
<Code>npm install react react-dom @types/react @types/react-dom typescript webpack webpack-cli webpack-dev-server html-webpack-plugin</Code>

// ✅ Good - Properly escaped
<Code>&lt;div&gt;Content&lt;/div&gt;</Code>

// ❌ Avoid - Unescaped HTML
<Code><div>Content</div></Code>

// ✅ Good - Accessible
<Code role="code" aria-label="JavaScript code snippet">
  const name = 'John';
</Code>

<Code className="bg-blue-100 text-blue-800 border border-blue-200 px-3 py-1 rounded-lg font-semibold">
  Custom styled code
</Code>

// Light theme
<Code className="bg-gray-100 text-gray-800">Light code</Code>

// Dark theme
<Code className="bg-gray-800 text-gray-100">Dark code</Code>

// Colored theme
<Code className="bg-green-100 text-green-800">Success code</Code>

// Small code
<Code className="text-xs">Small code</Code>

// Large code
<Code className="text-lg">Large code</Code>

// Default code
<Code>Default code</Code>

const [codeSnippet, setCodeSnippet] = useState('console.log("Hello")');

<Code>{codeSnippet}</Code>

const [copied, setCopied] = useState(false);

const copyToClipboard = (text) => {
  navigator.clipboard.writeText(text);
  setCopied(true);
  setTimeout(() => setCopied(false), 2000);
};

<div className="relative inline-block">
  <Code>npm install package</Code>
  <button
    onClick={() => copyToClipboard('npm install package')}
    className="ml-2 text-xs text-gray-500 hover:text-gray-700"
  >
    {copied ? 'Copied!' : 'Copy'}
  </button>
</div>

<Code className="language-javascript bg-gray-900 text-gray-100 p-4 rounded-lg block">
  {`function greet(name) {
  return \`Hello, \${name}!\`;
}`}
</Code>