alert.html 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. {% assign icon = include.icon %}
  2. {% unless icon %}
  3. {% if include.type == 'success' %}
  4. {% assign icon = 'check' %}
  5. {% assign title = 'Wow! Everything worked!' %}
  6. {% assign description = 'Your account has been saved!' %}
  7. {% elsif include.type == 'warning' %}
  8. {% assign icon = 'alert-triangle' %}
  9. {% assign title = 'Uh oh, something went wrong' %}
  10. {% assign description = 'Sorry! There was a problem with your request.' %}
  11. {% elsif include.type == 'danger' %}
  12. {% assign icon = 'alert-circle' %}
  13. {% assign title = "I'm so sorry…" %}
  14. {% assign description = 'Something went wrong. Please try again.' %}
  15. {% elsif include.type == 'info' %}
  16. {% assign icon = 'info-circle' %}
  17. {% assign title = 'Did you know?' %}
  18. {% assign description = 'Here is something that you might like to know.' %}
  19. {% endif %}
  20. {% endunless %}
  21. <div class="alert{% if include.important %} alert-important{% endif %} alert-{{ include.type | default: 'primary'}}{%if include.show-close %} alert-dismissible{% endif %}{% if include.avatar %} alert-avatar{% endif %}" role="alert">
  22. {% if include.show-icon or include.person-id %}
  23. <div class="d-flex">
  24. <div>
  25. {% if include.person-id %}{% include ui/avatar.html person-id=include.person-id class="float-start me-3" %}{% endif %}
  26. {% if include.show-icon %}
  27. {% include ui/icon.html icon=icon class="alert-icon" %}
  28. {% endif %}
  29. </div>
  30. <div>
  31. {% endif %}
  32. {% if include.show-description or include.description %}
  33. <h4 class="alert-title">{{ include.text | default: "This is a custom alert box!" }}</h4>
  34. <div class="text-secondary">{{ include.description | default: description }}</div>
  35. {% else %}
  36. {{ include.title | default: title }}
  37. {% endif %}
  38. {% if include.buttons %}
  39. <div class="btn-list">
  40. <a href="#" class="btn btn-{{ include.type | default: 'primary'}}">Okay</a>
  41. <a href="#" class="btn">Cancel</a>
  42. </div>
  43. {% endif %}
  44. {% if include.show-icon or include.person-id %}
  45. </div>
  46. </div>
  47. {% endif %}
  48. {% if include.show-close %}<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>{% endif %}
  49. </div>