{"id":23886557,"url":"https://github.com/gah-code/ui-maxing","last_synced_at":"2026-04-17T08:03:54.548Z","repository":{"id":249341626,"uuid":"830898021","full_name":"gah-code/ui-maxing","owner":"gah-code","description":null,"archived":false,"fork":false,"pushed_at":"2025-01-18T00:02:29.000Z","size":84,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-18T00:25:53.853Z","etag":null,"topics":["mdx","prism","systax-highlight","vite"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gah-code.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-19T08:24:53.000Z","updated_at":"2025-01-18T00:02:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"7a174e94-3a6b-4219-8f31-8fc4bf4c543d","html_url":"https://github.com/gah-code/ui-maxing","commit_stats":null,"previous_names":["gah-code/ui-maxing"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gah-code%2Fui-maxing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gah-code%2Fui-maxing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gah-code%2Fui-maxing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gah-code%2Fui-maxing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gah-code","download_url":"https://codeload.github.com/gah-code/ui-maxing/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240266856,"owners_count":19774075,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mdx","prism","systax-highlight","vite"],"created_at":"2025-01-04T06:37:08.867Z","updated_at":"2026-04-17T08:03:54.392Z","avatar_url":"https://github.com/gah-code.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ui-maxing\n\n## TASK\n\n- Installed necessary MDX and Prism dependencies\n- Updated vite.config.js to include MDX plugin\n- Created example MDX file in src/pages\n- Imported example MDX file in App component\n- Set up MDXProvider and ThemeProvider in main.jsx\n- Created theme.js with Prism styles\n- Registered Prism component in components.js\"\n\n### **Documentation: UI Maxxing Components**\n\nThis 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.\n\n---\n\n## **Components**\n\n### **1. Card**\n\nA flexible container for displaying content like text, images, or actions.\n\n#### **Usage**\n\n```jsx\nimport Card from '../components/Card';\n\n\u003cCard\u003e\n  \u003ch3\u003eCard Title\u003c/h3\u003e\n  \u003cp\u003eThis is a reusable card component styled with Theme UI.\u003c/p\u003e\n\u003c/Card\u003e\n```\n\n#### **Props**\n\n| Prop       | Type    | Default  | Description                      |\n|------------|---------|----------|----------------------------------|\n| `children` | `node`  | Required | Content to be displayed in the card. |\n\n#### **Theme Styles**\n\nThe `Card` component uses the following styles from `theme.js`:\n\n```javascript\nstyles: {\n  card: {\n    backgroundColor: 'background',\n    borderColor: 'muted',\n    borderRadius: '8px',\n    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',\n    fontSize: '1rem',\n  },\n},\n```\n\n---\n\n### **2. Button**\n\nA customizable button component with support for styling variants.\n\n#### **Usage**\n\n```jsx\nimport Button from '../components/Button';\n\n\u003cButton variant=\"primary\" onClick={() =\u003e alert('Primary Button Clicked')}\u003e\n  Click Me\n\u003c/Button\u003e\n\n\u003cButton variant=\"secondary\" onClick={() =\u003e alert('Secondary Button Clicked')}\u003e\n  Learn More\n\u003c/Button\u003e\n```\n\n#### **Props**\n\n| Prop       | Type       | Default   | Description                                  |\n|------------|------------|-----------|----------------------------------------------|\n| `children` | `node`     | Required  | Content inside the button.                  |\n| `variant`  | `string`   | `'primary'` | Style variant (e.g., `primary`, `secondary`). |\n| `...props` | `any`      | N/A       | Additional props like `onClick`.            |\n\n#### **Theme Styles**\n\nButton styles are defined under `buttons` in `theme.js`:\n\n```javascript\nbuttons: {\n  primary: {\n    backgroundColor: 'primary',\n    color: 'background',\n    '\u0026:hover': {\n      backgroundColor: 'secondary',\n    },\n  },\n  secondary: {\n    backgroundColor: 'secondary',\n    color: 'background',\n    '\u0026:hover': {\n      backgroundColor: 'primary',\n    },\n  },\n},\n```\n\n---\n\n### **3. CodeBlock**\n\nA component for rendering styled code snippets with syntax highlighting.\n\n#### **Usage**\n\n```jsx\nimport CodeBlock from '../components/CodeBlock';\n\n\u003cCodeBlock /\u003e\n```\n\n#### **Props**\n\n| Prop       | Type    | Default  | Description                          |\n|------------|---------|----------|--------------------------------------|\n| `children` | `node`  | Optional | Custom code snippet to display.      |\n\n#### **Theme Styles**\n\nThe `CodeBlock` component uses `pre` and `code` styles from `theme.js`:\n\n```javascript\nstyles: {\n  pre: {\n    fontSize: '0.9rem',\n    padding: '1rem',\n    backgroundColor: 'codeBg',\n    borderRadius: '8px',\n    overflowX: 'auto',\n    color: 'codeText',\n    code: {\n      fontFamily: 'Menlo, Monaco, Consolas, \"Courier New\", monospace',\n    },\n  },\n  code: {\n    color: 'inherit',\n  },\n},\n```\n\n---\n\n## **Theme Customization**\n\nAll components dynamically pull styles from the `theme.js` configuration. Modify `theme.js` to adjust the look and feel of the components.\n\nExample `theme.js`:\n\n```javascript\nexport default {\n  colors: {\n    text: '#333',\n    background: '#fff',\n    primary: '#07c',\n    secondary: '#ff4081',\n    muted: '#f6f8fa',\n    codeBg: '#282c34',\n    codeText: '#61dafb',\n  },\n  styles: { ... },\n  buttons: { ... },\n};\n```\n\n---\n\n## **1. Alert**\n\nA versatile component for displaying contextual messages like info, success, or warnings.\n\n#### **Usage**\n\n```mdx\nimport Alert from '../components/Alert';\n\n\u003cAlert variant=\"info\"\u003eThis is an informational alert.\u003c/Alert\u003e\n\u003cAlert variant=\"success\"\u003eOperation completed successfully!\u003c/Alert\u003e\n\u003cAlert variant=\"warning\"\u003ePlease proceed with caution.\u003c/Alert\u003e\n```\n\n---\n\n## **2. Blockquote**\n\nA component for highlighting quotes or references in a stylish way.\n\n#### **Usage**\n\n```mdx\nimport Blockquote from '../components/Blockquote';\n\n\u003cBlockquote\u003e\n  \"The only way to do great work is to love what you do.\" – Steve Jobs\n\u003c/Blockquote\u003e\n```\n\n---\n\n## **3. Table**\n\nA responsive table component for displaying data in an organized manner.\n\n#### **Usage**\n\n```mdx\nimport Table from '../components/Table';\n\n\u003cTable\n  headers={['Feature', 'Description']}\n  rows={[\n    ['MDX Support', 'Embed React components in Markdown.'],\n    ['Theme UI', 'Style components with a theme-based system.'],\n    ['PrismJS', 'Syntax highlighting for code snippets.'],\n  ]}\n/\u003e\n```\n\n---\n\n### **Theme Updates**\n\nThese components use new theme values. Update `theme.js` with the following:\n\n```javascript\ncolors: {\n  success: '#28a745',\n  successBg: '#e6f4ea',\n  successText: '#155724',\n  warning: '#ffc107',\n  warningBg: '#fff3cd',\n  warningText: '#856404',\n},\nstyles: {\n  blockquote: {\n    fontStyle: 'italic',\n    borderLeft: '4px solid',\n    paddingLeft: '1rem',\n  },\n},\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgah-code%2Fui-maxing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgah-code%2Fui-maxing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgah-code%2Fui-maxing/lists"}