Magic Portfolio will replace some default HTML elements to Once UI components to integrate better in the design and add additional functionality. Furthermore, many common Once UI components are already imported and available for use.
Feedback
The feedback component is used to display critical information to visitors.
Use the CodeBlock component to display code snippets with code highlighting, preview, and copy to clipboard functionality. Use the InlineCode component for inline code snippets.
CodeBlock
The code block component works based on Once UI's CodeBlock. You can access it with the complete syntax for full customization, or by using the standard markdown syntax (triple backticks) with pre-configured props.
The InlineCode is another Once UI component that you can access either through the complete syntax or the short syntax (backticks). Usually the standard markdown syntax is recommended, since it doesn't have that much configuration options.
SmartLink provides an enhanced way to link to internal and external resources. You can access it with the SmartLink component for full customization or with the standard markdown syntax.
Write formulas in LaTeX between double dollar signs. Inline, E=mc2 sits in the sentence; on lines of their own, they render as a centered block:L=N1k=1∑N∣zk−zˉk∣Single dollar signs stay plain text, so prices like $20 are safe.
Custom components
Since Magic Portfolio is based on Once UI, you can use all the components provided by Once UI in the .mdx files, but you need to import them first in the src/product/mdx.tsx file and pass it to the components object.
<Feedback
showIcon
variant="success"
title="Feedback element"
description="Longer description of the feedback message."
/>
Table
Description
title
string
The title of the document
summary
string
A brief summary of the document content
updatedAt
string
The date when the document was last updated
navLabel
string
The label used in navigation menus
<Table
data={{
headers: [
{ content: "Name", key: "name", sortable: true },
{ content: "Type", key: "type", sortable: true },
{ content: "Description", key: "description" }
],
rows: [
["title", "string", "The title of the document"],
["summary", "string", "A brief summary of the document content"],
["updatedAt", "string", "The date when the document was last updated"],
["navLabel", "string", "The label used in navigation menus"]
]
}}
/>
CodeBlock
// Full component syntax
<CodeBlock
codes={[
{
code: "console.log('Hello, World!');",
language: "javascript",
label: "Example"
}
]}
/>
// Short syntax example
```tsx
function greeting(name) {
return `Hello, ${name}!`;
}
console.log(greeting('World'));
```
InlineCode
const x = 10;
// Full component syntax
<InlineCode>
const x = 10;
</InlineCode>
// Short syntax example
`const x = 10;`
Accordion
Section 1
This is the content for section 1. You can include any components here.
Section 2
This is the content for section 2. Accordions are great for FAQs and other expandable content.
Section 3
This is the content for section 3. They help save space by hiding content until needed.
<AccordionGroup
items={[
{
title: "Section 1",
content: <Text>This is the content for section 1.</Text>
},
{
title: "Section 2",
content: <Text>This is the content for section 2.</Text>
},
{
title: "Section 3",
content: <Text>This is the content for section 3.</Text>
}
]}
/>
