Skip to content

gah-code/ui-maxing

Repository files navigation

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',
  },
},

About

No description or website provided.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published