diff options
Diffstat (limited to 'app/assets/javascripts/security_configuration/components/training_provider_list.vue')
-rw-r--r-- | app/assets/javascripts/security_configuration/components/training_provider_list.vue | 36 |
1 files changed, 36 insertions, 0 deletions
diff --git a/app/assets/javascripts/security_configuration/components/training_provider_list.vue b/app/assets/javascripts/security_configuration/components/training_provider_list.vue new file mode 100644 index 00000000000..160540f6989 --- /dev/null +++ b/app/assets/javascripts/security_configuration/components/training_provider_list.vue @@ -0,0 +1,36 @@ +<script> +import { GlCard, GlToggle, GlLink } from '@gitlab/ui'; + +export default { + components: { + GlCard, + GlToggle, + GlLink, + }, + props: { + providers: { + type: Array, + required: true, + }, + }, +}; +</script> + +<template> + <ul class="gl-list-style-none gl-m-0 gl-p-0"> + <li v-for="{ id, isEnabled, name, description, url } in providers" :key="id" class="gl-mb-6"> + <gl-card> + <div class="gl-display-flex"> + <gl-toggle :value="isEnabled" :label="__('Training mode')" label-position="hidden" /> + <div class="gl-ml-5"> + <h3 class="gl-font-lg gl-m-0 gl-mb-2">{{ name }}</h3> + <p> + {{ description }} + <gl-link :href="url" target="_blank">{{ __('Learn more.') }}</gl-link> + </p> + </div> + </div> + </gl-card> + </li> + </ul> +</template> |