This card features a beautiful frosted glass effect with backdrop blur. It works great in both light and dark modes.
+Perfect for highlighting important content or creating visual depth in your documentation.
+Content with glassmorphism effect.
+You now have access to 30+ production-ready components with complete documentation.
++ Brief introduction explaining what this page covers. +
+ ++ Get started with [Product Name] in under 5 minutes. +
+ ++ Complete reference for the REST API. +
+ +--- + +## Authentication + +[Auth documentation...] + +--- + +## Endpoints + +### Get User + ++ Learn how to build a complete integration in 30 minutes. +
+ ++ Learn how authentication works and best practices. +
+ +--- + +## Overview + +[High-level explanation...] + ++ Last updated: {new Date().toLocaleDateString()} +
++ Understanding these fundamental concepts will help you build robust, scalable smart contract systems with Compose. +
+ ++ The building blocks of the Compose platform. +
+ +{endpoint}
+ {description}
+ )} +{param.name}
+ {param.type}
+ {param.required && (
+ required
+ )}
+ + {param.description} +
+ )} +
+ {JSON.stringify(response, null, 2)}
+
+ )}
+ {path}
+ {description}
+ )} + {params.length > 0 && ( +{param.name}
+ {param.required && (
+ required
+ )}
+ {param.description && (
+ - {param.description}
+ )}
+ | Parameter | + {showTypes &&Type | } + {showRequired &&Required | } +Description | +
|---|---|---|---|
+ {param.name}
+ |
+ {showTypes && (
+
+ {param.type || 'any'}
+ |
+ )}
+ {showRequired && (
+ + {param.required ? ( + Yes + ) : ( + No + )} + | + )} +
+ {param.description || param.desc || '-'}
+ {param.default !== undefined && (
+
+ Default:
+ )}
+ {param.example && (
+ {String(param.default)}
+
+ Example:
+ )}
+ {String(param.example)}
+ |
+
| Property | + {showTypes &&Type | } + {showRequired &&Required | } +Description | +
|---|---|---|---|
+ {prop.name}
+ |
+ {showTypes && (
+
+ {prop.type || 'any'}
+ |
+ )}
+ {showRequired && (
+ + {prop.required ? ( + Yes + ) : ( + No + )} + | + )} +
+ {prop.description || prop.desc || '-'}
+ {prop.default !== undefined && (
+
+ Default:
+ )}
+ {prop.example && (
+ {String(prop.default)}
+
+ Example:
+ )}
+ {String(prop.example)}
+ |
+
+ {codeContent}
+
+ {needsExpansion && (
+
+ )}
+
+ {prompt}
+ {command}
+
+ | Feature | + {columns.map((col, index) => ( +
+
+ {col.highlight && Popular}
+
+ {col.name}
+ |
+ ))}
+
|---|---|
|
+ {feature.name}
+ {feature.description && (
+ {feature.description}
+ )}
+ |
+ {feature.values.map((value, colIndex) => (
+ + {typeof value === 'boolean' ? ( + + {value ? 'β' : 'β'} + + ) : ( + {value} + )} + | + ))} +
{error}
+{diagram}
+ {description}
+ )} + {children} +{subtitle}
+ )} + {children} ++ {children} +
+ ); +} + + diff --git a/docs/src/components/docs/DocSubtitle/styles.module.css b/docs/src/components/docs/DocSubtitle/styles.module.css new file mode 100644 index 00000000..c0f85378 --- /dev/null +++ b/docs/src/components/docs/DocSubtitle/styles.module.css @@ -0,0 +1,19 @@ +.subtitle { + font-size: 1.25rem; + line-height: 1.7; + color: var(--ifm-color-emphasis-700); + margin: 0 0 1.5rem 0; + max-width: 900px; +} + +.subtitle--left { + text-align: left; + margin-left: 0; + margin-right: auto; +} + +[data-theme='dark'] .subtitle { + color: rgba(255, 255, 255, 0.85); +} + + diff --git a/docs/src/components/docs/IconGallery/index.js b/docs/src/components/docs/IconGallery/index.js new file mode 100644 index 00000000..17418dbc --- /dev/null +++ b/docs/src/components/docs/IconGallery/index.js @@ -0,0 +1,109 @@ +import React from 'react'; +import Icon from '../../ui/Icon'; + +/** + * IconGallery Component - Displays all available icons in a grid layout + * Automatically discovers icons from the static/icons directory + */ +export default function IconGallery() { + // List of all available icons (without .svg extension) + const icons = [ + 'arrow-down-right', + 'arrow-right-small', + 'arrow-right', + 'arrow-up-right', + 'book', + 'books', + 'box-detailed', + 'chart', + 'chat', + 'checkmark', + 'chevron-down-small', + 'chevron-down', + 'chevron-up', + 'clipboard', + 'clock', + 'coin', + 'community', + 'compose', + 'composition', + 'cross', + 'cube-detailed', + 'cube', + 'cycle', + 'diamond-native', + 'diamond', + 'discord', + 'dot', + 'download', + 'eye', + 'geometric-diamond', + 'github', + 'globe', + 'graduation', + 'heart', + 'key', + 'layers-simple', + 'layers', + 'library', + 'lightbulb', + 'lightning', + 'lock', + 'memo', + 'mobile', + 'no-entry', + 'package', + 'padlock', + 'palette', + 'plug', + 'puzzle', + 'read-first', + 'rocket', + 'save', + 'scroll', + 'settings', + 'shield', + 'simplicity', + 'siren', + 'sparkles', + 'star', + 'target', + 'thumbs-down', + 'thumbs-up', + 'users', + 'warning', + 'wave', + 'wrench', + ]; + + return ( +
+ {iconName}
+
+ {item.description}
+ )} +