Code Snippet

import { CodeSnippet } from '@peppermint-design/devreadykit';

export default function App() {
  const code = `function hello() {
  console.log("Hello, World!");
}`;

  return (
    <CodeSnippet
      tabs={[
        {
          id: "javascript",
          label: "javascript",
          language: "javascript",
          code,
        },
      ]}
    />
  );
}

<CodeSnippet 
  tabs={[{
    id: "javascript",
    label: "javascript",
    language: "javascript",
    code: `const greeting = "Hello, World!";\nconsole.log(greeting);`,
  }]}
/>

<CodeSnippet 
  tabs={[{
    id: "python",
    label: "python",
    language: "python",
    code: `def hello():\n    print("Hello, World!")\n\nhello()`,
  }]}
/>

<CodeSnippet 
  tabs={[{
    id: "css",
    label: "css",
    language: "css",
    code: `.button {\\n  background-color: #007bff;\\n  color: white;\\n  padding: 10px 20px;\\n}`,
  }]}
/>

<CodeSnippet 
  tabs={[{
    id: "utility",
    label: "utility",
    language: "javascript",
    code: `function calculateSum(a, b) {\n  return a + b;\n}\n\nconst result = calculateSum(5, 3);\nconsole.log(result);`,
  }]}
  collapsible={false}
/>

function ApiResponse({ data }) {
  const jsonCode = JSON.stringify(data, null, 2);

  return (
    <CodeSnippet 
      tabs={[{
        id: "response",
        label: "json",
        language: "json",
        code: jsonCode,
      }]}
      collapsible={false}
    />
  );
}

function InstallationCode() {
  const installCode = `npm install @peppermint-design/devreadykit

# or with yarn
  yarn add @peppermint-design/devreadykit

# or with pnpm
  pnpm add @peppermint-design/devreadykit`;

  return (
    <CodeSnippet 
      tabs={[{
        id: "bash",
        label: "bash",
        language: "bash",
        code: installCode,
      }]}
      copyButtonLabel="Copy command"
    />
  );
}

function ComponentExample() {
  const reactCode = `import { Button } from '@peppermint-design/devreadykit';

export default function MyComponent() {
  return (
    <Button 
      variant="filled" 
      color="primary"
      onClick={() => console.log('Clicked!')}
    >
      Click me
    </Button>
  );
}`;

  return (
    <CodeSnippet 
      tabs={[{
        id: "tsx",
        label: "tsx",
        language: "tsx",
        code: reactCode,
      }]}
      collapsible={false}
      copyButtonLabel="Copy component"
    />
  );
}