diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/registry/title_area.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/registry/title_area.vue | 66 |
1 files changed, 66 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/registry/title_area.vue b/app/assets/javascripts/vue_shared/components/registry/title_area.vue new file mode 100644 index 00000000000..cc33b8f85cd --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/registry/title_area.vue @@ -0,0 +1,66 @@ +<script> +import { GlAvatar } from '@gitlab/ui'; + +export default { + name: 'TitleArea', + components: { + GlAvatar, + }, + props: { + avatar: { + type: String, + default: null, + required: false, + }, + title: { + type: String, + default: null, + required: false, + }, + }, + data() { + return { + metadataSlots: [], + }; + }, + mounted() { + this.metadataSlots = Object.keys(this.$slots).filter(k => k.startsWith('metadata_')); + }, +}; +</script> + +<template> + <div class="gl-display-flex gl-justify-content-space-between gl-py-3"> + <div class="gl-flex-direction-column"> + <div class="gl-display-flex"> + <gl-avatar v-if="avatar" :src="avatar" shape="rect" class="gl-align-self-center gl-mr-4" /> + + <div class="gl-display-flex gl-flex-direction-column"> + <h1 class="gl-font-size-h1 gl-mt-3 gl-mb-2" data-testid="title"> + <slot name="title">{{ title }}</slot> + </h1> + + <div + v-if="$slots['sub-header']" + class="gl-display-flex gl-align-items-center gl-text-gray-500 gl-mt-1" + > + <slot name="sub-header"></slot> + </div> + </div> + </div> + + <div class="gl-display-flex gl-flex-wrap gl-align-items-center gl-mt-3"> + <div + v-for="(row, metadataIndex) in metadataSlots" + :key="metadataIndex" + class="gl-display-flex gl-align-items-center gl-mr-5" + > + <slot :name="row"></slot> + </div> + </div> + </div> + <div v-if="$slots['right-actions']" class="gl-mt-3"> + <slot name="right-actions"></slot> + </div> + </div> +</template> |