User Components

import { Collapse } from '../../../theme/components/user'

<Collapse title='Lorem ipsum'> Lorem ipsum dolor sit amet, vidit suscipit at mei. </Collapse>
<Collapse title='Lorem ipsum'>
  <div slot='before' class='mt-2'>Are you sure you want to see?</div>
  <div>Lorem ipsum dolor sit amet, vidit suscipit at mei.</div>
</Collapse>

import { Aside } from '../../../theme/components/user'

<Aside>No type selected will default to 'note'. 😉</Aside>
<Aside type="tip">
Other content is also supported in aside! 😍

// ```js
// A code snippet, for example.
// ```
</Aside>
<Aside type='caution' title='You should know it!'>Is your code buggy again? 🤨</Aside>
<Aside type="danger">Have you used `rm -rf` to clean your computer? 😡</Aside>

import { Tabs, TabItem } from '../../../theme/components/user';

<Tabs>
  <TabItem label="Stars">Sirius, Vega, Betelgeuse</TabItem>
  <TabItem label="Moons">Io, Europa, Ganymede</TabItem>
</Tabs>

import { MdxRepl } from '../../../theme/components/user'

// Width is optional; using width parameter to set
// all elements inside the MDX Repl component.
// (slot desc is not included this parameter)
<MdxRepl width='100%'>
<p>Hello</p>
<Fragment slot='desc'>
  ```html
  <p>Hello</p>
  ```
</Fragment>
</MdxRepl>

import { CardList } from '../../../theme/components/user'

<CardList title='A list' list={
  [{title: 'I am hidden!'}]
} collapse />
<CardList title='A list' list={
  [
    { title: 'Lorem ipsum', link: '#list' },
    { title: 'Dolor sit amet', children: [{
      title: 'Vidit suscipit', link: '#'
    }] }
  ]
} />

import { Timeline } from '../../../theme/components/user'

<Timeline events={
  [
    { date: 'August 2021', content: 'Hello' },
    { date: 'August 2022', content: '<i>World!</i>' },
  ]
} />

import { Steps } from '../../../theme/components/user'

How to Yi Jian San Lian:

<Steps>
1. Dian Zan
2. Tou Bi
3. Shou Cang
  
  Or GuanZhu sometimes.
</Steps>

import { Button } from '../../../theme/components/user'

<div class='flex gap-x-2'>
  <Button as='div' title='Simple' />
  <Button as='a' href='#button' title='Link style' style='ahead' class='not-prose' />
  <Button as='div' title='Back' style='back' />
  <Button as='div' title='Pill style' style='pill' />
  <Button as='div' style='pill'><i>Italic</i></Button>
</div>

import { Spoiler } from '../../../theme/components/user'

<Spoiler>No one can find me.</Spoiler> But I am exposed here.

import { FormattedDate } from '../../../theme/components/user'

<FormattedDate date={new Date('2021-08-01')} dateTimeOptions={{ month: 'short' }} />

import { Label } from '../../../theme/components/user'

<Label title='Hello' />

import { Svg } from '../../../theme/components/user'

<Svg src={import('@/assets/icons/key.svg?raw')} />

import { Icon } from '../../../theme/components/user'

Single use: <Icon name='rss' class='inline' />

Preview all icons available (click button to copy):

import { Icons as allIcons } from '../../../theme/libs'
import { Button } from '../../../theme/components/user'

<div class='flex flex-wrap gap-2'>
{
  Object.keys(allIcons).map(icon => {
    const script = `navigator.clipboard.writeText('${icon}');document.dispatchEvent(new CustomEvent('toast',{detail:{message:'Copied "${icon}" to clipboard!'}}))`
    return (
      <Button as='button' type='button' class='cursor-pointer' onclick={script}>
        <Icon slot='before' name={icon} />
        <span>{icon}</span>
      </Button>
    )
  })
}
</div>