extends ../../layouts/LayoutComponent


prepend scripts
  script(src=`${CWD}vendors/lottie/lottie.min.js`) 

append content
  +PageHeader({ title: 'Animated Icons' })
    p.mt-2 #{name} uses <b>Lottie Web</b> for animated icons. Lottie web render After Effects animations natively on Web, Android, and iOS, and React Native.
    a(href='https://github.com/airbnb/lottie-web' target='_blank').btn.btn-link.ps-0.btn-sm Lottie Documentation
      span.fas.fa-chevron-right.ms-1.fs-11

  .card.mb-3
    .card-header
      h5.mb-0 Javascript
    .card-body.bg-body-tertiary
      +ComponentCardLib
        script(src=`vendors/lottie/lottie.min.js`)
  
  +ComponentCard({
    title: 'Example',
    anchor: true,
    description:"You can update colors, animation duration, and other stuff from this excellent editor.",
    url:'https://lottiefiles.com/editor',
    linkText:'Lottie Editor'
  }).mb-3
    .row.align-items-center
      .col-lg-4
        .lottie.mx-auto( style="width: 120px; height: 120px" data-options!={ path: `${CWD}assets/img/animated-icons/check-primary-light.json` })
      .col-lg-4.mt-5.mt-lg-0
        .lottie.mx-auto( style="width: 130px; height: 130px" data-options!={ path: `${CWD}assets/img/animated-icons/warning-light.json` })
      .col-lg-4
        .lottie.mx-auto( style="width: 220px; height: 220px" data-options!={ path: `${CWD}assets/img/animated-icons/heart.json` })
  
  +ComponentCard({
    title: 'Loading Animation Example',
    anchor: true,
    url:'https://lottiefiles.com/loading',
    linkText:'Get More Animations',
    bodyClass:'bg-body-tertiary overflow-hidden'
  }).mb-3
    .row.align-items-center
      .col-lg-4
        .lottie.mx-auto( style="width: 120px; height: 120px" data-options!={ path: `${CWD}assets/img/animated-icons/infinite-loop.json` })
      .col-lg-4.mt-5.mt-lg-0
        .lottie.mx-auto( style="width: 130px; height: 130px" data-options!={ path: `${CWD}assets/img/animated-icons/loading-square.json` })
      .col-lg-4
        .lottie.mx-auto( style="width: 220px; height: 220px" data-options!={ path: `${CWD}assets/img/animated-icons/loading.json` })
  
  
  +ComponentCard({
    title: 'Featured Animation Example',
    anchor: true,
    url:'https://lottiefiles.com/featured',
    linkText:'Get More Animations',
    bodyClass:'bg-body-tertiary overflow-hidden'
  })
    .row.align-items-center
      .col-lg-4
        .lottie.mx-auto( style="width: 120px; height: 120px" data-options!={ path: `${CWD}assets/img/animated-icons/shopping-list.json` })
      .col-lg-4.mt-5.mt-lg-0
        .lottie.mx-auto( style="width: 130px; height: 130px" data-options!={ path: `${CWD}assets/img/animated-icons/sleeping-404.json` })
      .col-lg-4
        .lottie.mx-auto( style="width: 220px; height: 220px" data-options!={ path: `${CWD}assets/img/animated-icons/star-feedback.json` })