{"version":3,"file":"SongsByLanguageArtCover-Ly2VJCRy.js","sources":["../../Vue/src/components/SongsByLanguageArtCover.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nconst props = defineProps<{\r\n  title: string;\r\n}>();\r\n\r\nconst id = uniqueId(\"artcover\");\r\nconst titleSplit = computed(() => props.title.split(\" \"));\r\nconst title1 = computed(\r\n  () => (titleSplit.value.length && titleSplit.value[0]) || props.title,\r\n);\r\nconst title2 = computed(\r\n  () => (titleSplit.value.length > 1 && titleSplit.value[1]) || \"\",\r\n);\r\n</script>\r\n\r\n<template>\r\n  <svg\r\n    class=\"songs-by-language-art-cover bg\"\r\n    height=\"100%\"\r\n    width=\"100%\"\r\n    viewBox=\"0 0 100 100\"\r\n  >\r\n    <defs>\r\n      <linearGradient\r\n        :id=\"`gradient${id}`\"\r\n        x1=\"0\"\r\n        y1=\"100%\"\r\n        x2=\"100%\"\r\n        y2=\"0\"\r\n      >\r\n        <stop\r\n          offset=\"0%\"\r\n          stop-color=\"#c6edfa\"\r\n        />\r\n        <stop\r\n          offset=\"50%\"\r\n          stop-color=\"#8be5f8\"\r\n        />\r\n        <stop\r\n          offset=\"100%\"\r\n          stop-color=\"#7261f8\"\r\n        />\r\n      </linearGradient>\r\n    </defs>\r\n    <text\r\n      x=\"10\"\r\n      y=\"20\"\r\n      class=\"title\"\r\n      :class=\"{ 'title-sm': !!title2 }\"\r\n      dominant-baseline=\"auto\"\r\n      text-anchor=\"left\"\r\n      fill=\"white\"\r\n    >\r\n      {{ title1 }}\r\n    </text>\r\n    <text\r\n      v-if=\"title2\"\r\n      x=\"10\"\r\n      y=\"35\"\r\n      class=\"title title-sm\"\r\n      dominant-baseline=\"auto\"\r\n      text-anchor=\"left\"\r\n      fill=\"white\"\r\n    >\r\n      {{ title2 }}\r\n    </text>\r\n    <foreignObject\r\n      width=\"30\"\r\n      height=\"30\"\r\n      x=\"79\"\r\n      y=\"75\"\r\n    >\r\n      <FAIcon class=\"fa-light fa-globe\" />\r\n    </foreignObject>\r\n  </svg>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n.bg {\r\n  @apply aspect-square rounded-lg;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-image: linear-gradient(\r\n    195deg,\r\n    #48b4c1 0%,\r\n    #48b1bf 22.4485%,\r\n    #4791a9 42.93%,\r\n    #477997 62.12%,\r\n    #46678b 76.07%,\r\n    #465c83 86.31%,\r\n    #465981 100%\r\n  );\r\n  animation: fadeIn 0.2s ease forwards;\r\n}\r\n\r\n.title {\r\n  @apply font-display font-bold leading-4 text-white;\r\n  line-height: 10px;\r\n  font-size: 15px;\r\n}\r\n.title.title-sm {\r\n  font-size: 13px;\r\n}\r\n\r\n.fa-globe {\r\n  @apply text-light-100/50;\r\n}\r\n\r\n@keyframes fadeIn {\r\n  from {\r\n    opacity: 0;\r\n  }\r\n  to {\r\n    opacity: 1;\r\n  }\r\n}\r\n</style>\r\n"],"names":["props","__props","id","uniqueId","titleSplit","computed","title1","title2"],"mappings":"8dACA,MAAMA,EAAQC,EAIRC,EAAKC,EAAS,UAAU,EACxBC,EAAaC,EAAS,IAAML,EAAM,MAAM,MAAM,GAAG,CAAC,EAClDM,EAASD,EACb,IAAOD,EAAW,MAAM,QAAUA,EAAW,MAAM,CAAC,GAAMJ,EAAM,KAAA,EAE5DO,EAASF,EACb,IAAOD,EAAW,MAAM,OAAS,GAAKA,EAAW,MAAM,CAAC,GAAM,EAAA"}