Untitled

<script setup lang="ts">
import RedSlash from '@/assets/icons/redSlash.svg';
import BlueSlash from '@/assets/icons/blueSlash.svg';
import GreenSlash from '@/assets/icons/greenSlash.svg';
import { toRefs } from 'vue';
const props = defineProps({
  group: { required: true }
});
const { group } = toRefs(props);
</script>

<template>
  <div class="seminar-card">
    <div class="icon">
      <div v-if="group === 'youthgroup'">
      <RedSlash />
    </div>
    <div v-if="group === 'elementary'">
      <BlueSlash />
    </div>
    <div v-if="group === 'kindergarten'">
      <GreenSlash />
    </div>
    </div>
    <div class="group">Youth Group</div>
    <div class="pastor">E.John Kim</div>
    <div class="church">SVA</div>
    <div class="year">2022</div>
    <button type="button" class="playlist-button">
      <h3 class="button-text">GO TO PLAYLIST</h3>
    </button>
  </div>
</template>

<style lang="scss" scoped>
.icon{
  position: absolute;
}
.button-text{
  color: var(--white, #FFF);
  font-size: 14px;
  font-weight: 700;
}
.playlist-button{
  border-radius: 5px;
  background: var(--blue-primary, #3283FF);
  width: 289px;
  height: 37px;
  z-index: 3;
}
.year{
  font-size: 14px;
  font-weight: 400;
}
.church{
  font-size: 12px;
  font-weight: 400;
}
.pastor{
  color: var(--grey-primary, #393939);
  font-size: 22px;
  font-weight: 700;
}
.group{
  font-size: 15px;
  font-weight: 700;
  color: #3283FF;
}
.seminar-card{
  width: 309px;
  height: 210px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
</style>