diff options
Diffstat (limited to 'app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_card.vue')
-rw-r--r-- | app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_card.vue | 52 |
1 files changed, 52 insertions, 0 deletions
diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_card.vue b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_card.vue new file mode 100644 index 00000000000..db694a66afd --- /dev/null +++ b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_card.vue @@ -0,0 +1,52 @@ +<script> +import { GlCard } from '@gitlab/ui'; +import { imagePath } from '~/lib/utils/common_utils'; +import { ACTION_LABELS, ACTION_SECTIONS } from '../constants'; + +import LearnGitlabSectionLink from './learn_gitlab_section_link.vue'; + +export default { + name: 'LearnGitlabSectionCard', + components: { GlCard, LearnGitlabSectionLink }, + i18n: { + ...ACTION_SECTIONS, + }, + props: { + section: { + required: true, + type: String, + }, + actions: { + required: true, + type: Object, + }, + }, + computed: { + sortedActions() { + return Object.entries(this.actions).sort( + (a1, a2) => ACTION_LABELS[a1[0]].position - ACTION_LABELS[a2[0]].position, + ); + }, + }, + methods: { + svg(section) { + return imagePath(`learn_gitlab/section_${section}.svg`); + }, + }, +}; +</script> +<template> + <gl-card class="gl-pt-0 learn-gitlab-section-card"> + <div class="learn-gitlab-section-card-header"> + <img :src="svg(section)" /> + <h2 class="gl-font-lg gl-mb-3">{{ $options.i18n[section].title }}</h2> + <p class="gl-text-gray-700 gl-mb-6">{{ $options.i18n[section].description }}</p> + </div> + <learn-gitlab-section-link + v-for="[action, value] in sortedActions" + :key="action" + :action="action" + :value="value" + /> + </gl-card> +</template> |