profiles LiveUpdatesTeaser.vue

0% Statements 0/30
0% Branches 0/1
0% Functions 0/1
0% Lines 0/30
Press n or j to go to the next uncovered block, b, p or k for the previous block.

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  <template>
  <a
    v-if="hasAssignment"
    href="#"
    @click.prevent="scroll"
    :class="['live-updates-teaser', variant]"
  >
    📡 Want live match updates? →
  </a>
</template>
 
<script>
import { computed } from 'vue';
import { useAuthStore } from '@/stores/auth';
 
export default {
  name: 'LiveUpdatesTeaser',
  props: {
    // 'hero' = white text on dark hero card  |  'light' = blue link on light bg
    variant: { type: String, default: 'light' },
  },
  setup() {
    const authStore = useAuthStore();
 
    const hasAssignment = computed(
      () =>
        !!(authStore.state.profile?.team_id || authStore.state.profile?.club_id)
    );
 
    const scroll = () => {
      document
        .getElementById('live-updates-section')
        ?.scrollIntoView({ behavior: 'smooth', block: 'start' });
    };
 
    return { hasAssignment, scroll };
  },
};
</script>
 
<style scoped>
.live-updates-teaser {
  display: inline-block;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s;
}
 
/* On a dark hero card */
.live-updates-teaser.hero {
  color: rgba(255, 255, 255, 0.85);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
}
.live-updates-teaser.hero:hover {
  color: white;
  border-bottom-color: white;
}
 
/* On a light background */
.live-updates-teaser.light {
  color: #0ea5e9;
  border-bottom: 1px dashed #7dd3fc;
}
.live-updates-teaser.light:hover {
  color: #0284c7;
  border-bottom-color: #0284c7;
}
</style>