ui-maxing

TASK

• Installed necessary MDX and Prism dependencies
• Updated vite.config.js to include MDX plugin
• Created example MDX file in src/pages
• Imported example MDX file in App component
• Set up MDXProvider and ThemeProvider in main.jsx
• Created theme.js with Prism styles
• Registered Prism component in components.js"

Documentation: UI Maxxing Components

This documentation provides an overview of the reusable components (Card, Button, and CodeBlock) integrated into your UI Maxing project. Each component leverages Theme UI for dynamic styling.

---

Components

1. Card

A flexible container for displaying content like text, images, or actions.

Usage

import Card from '../components/Card';

<Card>
  <h3>Card Title</h3>
  <p>This is a reusable card component styled with Theme UI.</p>
</Card>

Props

Prop	Type	Default	Description
children	node	Required	Content to be displayed in the card.

Theme Styles

The Card component uses the following styles from theme.js:

styles: {
  card: {
    backgroundColor: 'background',
    borderColor: 'muted',
    borderRadius: '8px',
    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
    fontSize: '1rem',
  },
},

---

2. Button

A customizable button component with support for styling variants.

Usage

import Button from '../components/Button';

<Button variant="primary" onClick={() => alert('Primary Button Clicked')}>
  Click Me
</Button>

<Button variant="secondary" onClick={() => alert('Secondary Button Clicked')}>
  Learn More
</Button>

Props

Prop	Type	Default	Description
children	node	Required	Content inside the button.
variant	string	'primary'	Style variant (e.g., primary, secondary).
...props	any	N/A	Additional props like onClick.

Theme Styles

Button styles are defined under buttons in theme.js:

buttons: {
  primary: {
    backgroundColor: 'primary',
    color: 'background',
    '&:hover': {
      backgroundColor: 'secondary',
    },
  },
  secondary: {
    backgroundColor: 'secondary',
    color: 'background',
    '&:hover': {
      backgroundColor: 'primary',
    },
  },
},

---

3. CodeBlock

A component for rendering styled code snippets with syntax highlighting.

Usage

import CodeBlock from '../components/CodeBlock';

<CodeBlock />

Props

Prop	Type	Default	Description
children	node	Optional	Custom code snippet to display.

Theme Styles

The CodeBlock component uses pre and code styles from theme.js:

styles: {
  pre: {
    fontSize: '0.9rem',
    padding: '1rem',
    backgroundColor: 'codeBg',
    borderRadius: '8px',
    overflowX: 'auto',
    color: 'codeText',
    code: {
      fontFamily: 'Menlo, Monaco, Consolas, "Courier New", monospace',
    },
  },
  code: {
    color: 'inherit',
  },
},

---

Theme Customization

All components dynamically pull styles from the theme.js configuration. Modify theme.js to adjust the look and feel of the components.

Example theme.js:

export default {
  colors: {
    text: '#333',
    background: '#fff',
    primary: '#07c',
    secondary: '#ff4081',
    muted: '#f6f8fa',
    codeBg: '#282c34',
    codeText: '#61dafb',
  },
  styles: { ... },
  buttons: { ... },
};

---

1. Alert

A versatile component for displaying contextual messages like info, success, or warnings.

Usage

import Alert from '../components/Alert';

<Alert variant="info">This is an informational alert.</Alert>
<Alert variant="success">Operation completed successfully!</Alert>
<Alert variant="warning">Please proceed with caution.</Alert>

---

2. Blockquote

A component for highlighting quotes or references in a stylish way.

Usage

import Blockquote from '../components/Blockquote';

<Blockquote>
  "The only way to do great work is to love what you do." – Steve Jobs
</Blockquote>

---

3. Table

A responsive table component for displaying data in an organized manner.

Usage

import Table from '../components/Table';

<Table
  headers={['Feature', 'Description']}
  rows={[
    ['MDX Support', 'Embed React components in Markdown.'],
    ['Theme UI', 'Style components with a theme-based system.'],
    ['PrismJS', 'Syntax highlighting for code snippets.'],
  ]}
/>

---

Theme Updates

These components use new theme values. Update theme.js with the following:

colors: {
  success: '#28a745',
  successBg: '#e6f4ea',
  successText: '#155724',
  warning: '#ffc107',
  warningBg: '#fff3cd',
  warningText: '#856404',
},
styles: {
  blockquote: {
    fontStyle: 'italic',
    borderLeft: '4px solid',
    paddingLeft: '1rem',
  },
},