feat: add wishlist

2026-09-30 19:15:57 +02:00
parent ab3bbb6338
commit 1f6061b998
57 changed files with 638 additions and 232 deletions
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const props = defineProps<{
+  title: string
+  subtitle?: string | null
+}>()
+
+const background = computed(() => {
+  let hue = 0
+  for (const char of props.title) hue = (hue * 31 + char.codePointAt(0)!) % 360
+  return `linear-gradient(155deg, hsl(${hue} 38% 40%), hsl(${(hue + 24) % 360} 42% 22%))`
+})
+</script>
+
+<template>
+  <div
+    class="relative size-full overflow-hidden text-white [container-type:inline-size]"
+    :style="{ background }"
+    role="img"
+    :aria-label="`Cover of ${title}`"
+  >
+    <span class="absolute inset-y-0 left-[7cqw] w-px bg-white/25" aria-hidden="true" />
+    <div class="flex size-full flex-col justify-between gap-1 p-[8cqw] pl-[12cqw]">
+      <span class="font-serif text-[clamp(0.5rem,11cqw,1.05rem)] leading-tight font-semibold text-balance wrap-anywhere line-clamp-6">
+        {{ title }}
+      </span>
+      <span v-if="subtitle" class="text-[clamp(0.4rem,7cqw,0.7rem)] leading-tight tracking-wide text-white/75 uppercase wrap-anywhere line-clamp-2">
+        {{ subtitle }}
+      </span>
+    </div>
+  </div>
+</template>