SpeedDial

---
import { SpeedDial } from '@santi020k/lumen-astro'
---

<div class="speed-dial-example">
  <div class="speed-dial-example__copy">
    <span>Project canvas</span>
    <strong>What would you like to add?</strong>
    <small>Open the quick-create menu to choose an action.</small>
  </div>

  <SpeedDial
    actions={[
      { icon: 'file-plus-2', label: 'New document', value: 'document' },
      { icon: 'folder-plus', label: 'New folder', value: 'folder' },
      { icon: 'image-plus', label: 'Upload media', value: 'media' }
    ]}
    defaultOpen
    label="Create new"
  />
</div>

<style>
  .speed-dial-example {
    display: flex;
    width: min(100%, 42rem);
    min-height: 17rem;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-inline: auto;
    padding: 2rem;
    border: 1px solid hsl(var(--line));
    border-radius: 1rem;
    background: hsl(var(--surface) / 0.78);
    box-shadow: var(--ui-shadow-md);
  }

  .speed-dial-example__copy {
    display: grid;
    align-self: flex-start;
    gap: 0.35rem;
  }

  .speed-dial-example__copy span {
    color: hsl(var(--brand));
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .speed-dial-example__copy strong {
    color: hsl(var(--ink));
    font-size: 1.1rem;
  }

  .speed-dial-example__copy small {
    max-width: 23rem;
    color: hsl(var(--ink-muted));
    line-height: 1.55;
  }

  @media (max-width: 36rem) {
    .speed-dial-example {
      min-height: 20rem;
      padding: 1.25rem;
    }

    .speed-dial-example__copy {
      max-width: 11rem;
    }
  }
</style>

import { SpeedDial } from '@santi020k/lumen-react'

export const Example = () => (
  <>
    <div className="speed-dial-example">
      <div className="speed-dial-example__copy">
        <span>Project canvas</span>
        <strong>What would you like to add?</strong>
        <small>Open the quick-create menu to choose an action.</small>
      </div>

      <SpeedDial
        actions={[
          { icon: 'file-plus-2', label: 'New document', value: 'document' },
          { icon: 'folder-plus', label: 'New folder', value: 'folder' },
          { icon: 'image-plus', label: 'Upload media', value: 'media' }
        ]}
        defaultOpen
        label="Create new"
      />
    </div>
  </>
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<div class="speed-dial-example">
  <div class="speed-dial-example__copy">
    <span>Project canvas</span>
    <strong>What would you like to add?</strong>
    <small>Open the quick-create menu to choose an action.</small>
  </div>

  <lumen-speed-dial
    actions={[
      { icon: 'file-plus-2', label: 'New document', value: 'document' },
      { icon: 'folder-plus', label: 'New folder', value: 'folder' },
      { icon: 'image-plus', label: 'Upload media', value: 'media' }
    ]}
    default-open
    label="Create new"></lumen-speed-dial>
</div>