github.com/lucasscarioca/music-stash@v0.0.0-20230829021135-a8b8893b12a5/internal/views/components/playlistCard.html (about)

     1  {{ define "playlistCard" }}
     2  <div
     3    class="max-w-sm group relative rounded-xl overflow-hidden shadow-black hover:shadow-accent-bold shadow-md cursor-pointer transition-shadow duration-300"
     4  >
     5    {{ if .CoverURL }}
     6    <img
     7      class="w-full object-cover group-hover:rotate-3 group-hover:scale-125 transition-transform duration-300"
     8      src="{{ .CoverURL }}"
     9      alt="Album cover"
    10    />
    11    {{ else }}
    12    <img
    13      class="w-full object-cover group-hover:rotate-3 group-hover:scale-125 transition-transform duration-300"
    14      src="https://images.unsplash.com/photo-1605020420620-20c943cc4669?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
    15      alt="Generic cover"
    16    />
    17    {{ end }}
    18    <div
    19      class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black group-hover:from-black/70 group-hover:via-black/60 group-hover:to-black/70"
    20    ></div>
    21    <div
    22      class="absolute inset-0 translate-y-[65%] lg:translate-y-[70%] group-hover:translate-y-0 transition-all p-4 duration-300"
    23    >
    24      <div
    25        class="font-bold text-accent group-hover:text-accent-bold text-xl mb-2"
    26      >
    27        {{ .Title }}
    28      </div>
    29      <p
    30        class="text-primary text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"
    31      >
    32        {{ .Description }}
    33      </p>
    34      <div
    35        class="flex opacity-0 group-hover:opacity-100 transition-opacity duration-300"
    36      >
    37        {{ range .Categories }}
    38        <span
    39          class="inline-block m-1 p-1 bg-accent-light rounded-full text-xs font-semibold text-primary-dark"
    40        >
    41          {{ . }}
    42        </span>
    43        {{ end }}
    44      </div>
    45    </div>
    46  </div>
    47  {{ end}}