Header.vine.ts - domsonic

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 import { computed } from 'vue'

import fallbackImage from '../assets/fallback.svg';

export const Header = ({ hover, image = fallbackImage }: {
  image?: string,
  hover?: string,
}) => {
  const emit = vineEmits([ 'click' ])
  const style = computed(() => ({ '--backdrop-image': `url('${image}')` }))

  return vine`
    <div class="header" :style="style">
      <div class="backdrop" />
      <img
        class="album-cover"
        :src="image"
        :title="hover"
        @click="$emit('click')"
      >
      <div class="details">
        <slot />
      </div>
    </div>
  `
}