feat(front): favorites toggler on map list items

momentum-mod · Mar 15, 2024 · 67feb23 · 67feb23
1 parent ecc7efe
commit 67feb23
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/apps/frontend/src/app/components/map-list/map-list-item.component.html b/apps/frontend/src/app/components/map-list/map-list-item.component.html
@@ -5,9 +5,12 @@
       [src]="map.thumbnail?.small"
       class="h-full w-full rounded-t border-b border-black border-opacity-5 transition-all group-hover:brightness-110"
     />
+    <button type="button" class="m-2 ml-auto mt-auto" (click)="toggleMapInFavorites()">
+      <m-icon [icon]="inFavorites ? 'star' : 'star-outline'" />
+    </button>
     @if (isReleasedMap(map) && !isAdminPage) {
       @if (map.currentModeLeaderboards; as lb) {
-        <div class="m-2 ml-auto mt-auto flex flex-wrap gap-2">
+        <div class="m-2 ml-auto mt-auto flex h-6 w-6 flex-wrap gap-2">
           <!-- prettier-ignore -->
           <div
           class="flex h-10 min-w-[2.5rem] rounded border border-white border-opacity-10 px-2 backdrop-blur-md shadow"

diff --git a/apps/frontend/src/app/components/map-list/map-list-item.component.ts b/apps/frontend/src/app/components/map-list/map-list-item.component.ts
@@ -25,6 +25,7 @@ import { extractPrefixFromMapName } from '@momentum/util-fn';
 import { PluralPipe, TimeAgoPipe } from '../../pipes';
 import { TooltipDirective } from '../../directives';
 import { FontSizeLerpDirective } from '../../directives/font-size-lerp.directive';
+import { IconComponent } from '../../icons';
 
 @Component({
   selector: 'm-map-list-item',
@@ -37,7 +38,8 @@ import { FontSizeLerpDirective } from '../../directives/font-size-lerp.directive
     TimeAgoPipe,
     PluralPipe,
     TooltipDirective,
-    FontSizeLerpDirective
+    FontSizeLerpDirective,
+    IconComponent
   ]
 })
 export class MapListItemComponent implements OnChanges {