fix: add favorite button to recent CollectionEntry (#151)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
antfu-collective · May 16, 2023 · 1560c79 · 1560c79
1 parent 37f64b0
commit 1560c79
Showing 1 changed file with 23 additions and 25 deletions.
diff --git a/src/components/CollectionEntry.vue b/src/components/CollectionEntry.vue
@@ -2,17 +2,10 @@
 import type { CollectionInfo, PresentType } from '../data'
 import { isFavoritedCollection, removeRecentCollection, toggleFavoriteCollection } from '../store'
 
-const props = defineProps<{
+defineProps<{
   collection: CollectionInfo
   type?: PresentType
 }>()
-
-function onAction() {
-  if (props.type === 'recent')
-    removeRecentCollection(props.collection.id)
-  else
-    toggleFavoriteCollection(props.collection.id)
-}
 </script>
 
 <template>
@@ -44,24 +37,29 @@ function onAction() {
       spacing="m-1"
       class="ma justify-center opacity-75 flex-wrap pointer-events-none"
     />
-    <button
-      class="group"
-      absolute top--1px right--1px p2 border="~ transparent" hover="bg-base border-primary"
-      :title="type === 'recent' ? 'Remove from recent' : type === 'favorite' || isFavoritedCollection(collection.id) ? 'Remove from favorites' : 'Add to favorites'"
-      @click.prevent="onAction"
+    <div
+      absolute top--1px right--1px
+      flex="~ items-center"
+      op0 hover="op100 transition-all"
     >
-      <div
+      <button
+        class="group"
+        border="~ primary" p2 bg-base
+        :title="isFavoritedCollection(collection.id) ? 'Remove from favorites' : 'Add to favorites'"
+        @click.prevent="toggleFavoriteCollection(collection.id)"
+      >
+        <div v-if="isFavoritedCollection(collection.id)" i-carbon-star-filled op50 group-hover="op100" />
+        <div v-else i-carbon-star op50 group-hover="op100" />
+      </button>
+      <button
         v-if="type === 'recent'"
-        i-carbon-delete op0 group-hover="op100"
-      />
-      <div
-        v-else-if="type === 'favorite' || isFavoritedCollection(collection.id)"
-        i-carbon-star-filled op0 group-hover="op100"
-      />
-      <div
-        v-else
-        i-carbon-star op0 group-hover="op100"
-      />
-    </button>
+        class="group"
+        border="~ primary" p2 bg-base ml--1px
+        :title="type === 'recent' ? 'Remove from recent' : type === 'favorite' || isFavoritedCollection(collection.id) ? 'Remove from favorites' : 'Add to favorites'"
+        @click.prevent="removeRecentCollection(collection.id)"
+      >
+        <div i-carbon-delete op50 group-hover="op100" />
+      </button>
+    </div>
   </RouterLink>
 </template>