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.
Feedback
Feedback element
Longer description of the feedback message.
<Feedback
icon
variant="success"
title="Feedback element"
description="Longer description of the feedback message."
/>
Tables are used to display data in a structured format.
Table
Name
Type
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"]
]
}}
/>
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.
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'));
```
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.
InlineCode
const x = 10;
// Full component syntax
<InlineCode>
const x = 10;
</InlineCode>
// Short syntax example
`const x = 10;`
Accordions are used to toggle between hiding and showing content.
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>
}
]}
/>
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.
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.
src/product/mdx.tsx
const components = {
// Add new components
p: createParagraph as any,
h1: createHeading("h1") as any,
...
Media,
SmartLink,
};
