Components

Code Window

Code Window

Component

index.mdx
 ---
  title: Hello World
  ---
  
  # Yo what's up

Dependencies

npmi lucide-react

Configuration and Re-usability

codeWindowData.tsx:

import CodeBox from "./codeWindow"
 
export default function CodeBoxExample() {
// Code
const exampleCode = ` ---
  title: Hello World
  ---
  
  # Yo what's up`
  
    return (
      <div className="p-4">
        {/**Component Calling*/}
        <CodeBox
          code={exampleCode}
          fileName="index"
          fileExtension="mdx"
        />
      </div>
    )
  }

tailwind.config.ts:

import type { Config } from "tailwindcss";
 
// Code of the tailwind.config.ts...
 
const config: Config = {
  darkMode: "class",
  // Rest...
};
 

tailwind.config.js:

// Rest of the code
 
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  // Rest...
};
 

Usage Methods

  1. Props for customisation: Add props to customise colours, font size, and other style options without having to modify the component.
  2. Error Handling: Handle errors in case copying to the clipboard fails or the language is not supported.