https://github.com/gah-code/ui-maxing
https://github.com/gah-code/ui-maxing
mdx prism systax-highlight vite
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/gah-code/ui-maxing
- Owner: gah-code
- License: mit
- Created: 2024-07-19T08:24:53.000Z (10 months ago)
- Default Branch: master
- Last Pushed: 2025-01-18T00:02:29.000Z (4 months ago)
- Last Synced: 2025-01-18T00:25:53.853Z (4 months ago)
- Topics: mdx, prism, systax-highlight, vite
- Language: JavaScript
- Homepage:
- Size: 82 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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**
```jsx
import Card from '../components/Card';
Card Title
This is a reusable card component styled with Theme UI.
```
#### **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`:
```javascript
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**
```jsx
import Button from '../components/Button';
alert('Primary Button Clicked')}>
Click Me
alert('Secondary Button Clicked')}>
Learn More
```
#### **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`:
```javascript
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**
```jsx
import CodeBlock from '../components/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`:
```javascript
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`:
```javascript
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**
```mdx
import Alert from '../components/Alert';
This is an informational alert.
Operation completed successfully!
Please proceed with caution.
```
---
## **2. Blockquote**
A component for highlighting quotes or references in a stylish way.
#### **Usage**
```mdx
import Blockquote from '../components/Blockquote';
"The only way to do great work is to love what you do." – Steve Jobs
```
---
## **3. Table**
A responsive table component for displaying data in an organized manner.
#### **Usage**
```mdx
import Table from '../components/Table';
```
---
### **Theme Updates**
These components use new theme values. Update `theme.js` with the following:
```javascript
colors: {
success: '#28a745',
successBg: '#e6f4ea',
successText: '#155724',
warning: '#ffc107',
warningBg: '#fff3cd',
warningText: '#856404',
},
styles: {
blockquote: {
fontStyle: 'italic',
borderLeft: '4px solid',
paddingLeft: '1rem',
},
},
```