add favorite badge to card

This commit is contained in:
jeffvli
2025-11-19 22:34:50 -08:00
parent ff776293a6
commit 1a4c909cc3
2 changed files with 25 additions and 0 deletions
@@ -53,6 +53,19 @@
}
}
.favorite-badge {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 0;
height: 0;
pointer-events: none;
border-color: var(--theme-colors-primary) transparent transparent transparent;
border-style: solid;
border-width: 24px 24px 0 0;
}
.image {
width: 100%;
height: 100%;
@@ -212,12 +212,16 @@ const CompactItemCard = ({
[styles.isRound]: isRound,
});
const isFavorite =
'userFavorite' in data && (data as { userFavorite: boolean }).userFavorite;
const imageContainerContent = (
<>
<Image
className={clsx(styles.image, { [styles.isRound]: isRound })}
src={imageUrl}
/>
{isFavorite && <div className={styles.favoriteBadge} />}
<AnimatePresence>
{withControls && showControls && (
<ItemCardControls
@@ -400,12 +404,16 @@ const DefaultItemCard = ({
[styles.isRound]: isRound,
});
const isFavorite =
'userFavorite' in data && (data as { userFavorite: boolean }).userFavorite;
const imageContainerContent = (
<>
<Image
className={clsx(styles.image, { [styles.isRound]: isRound })}
src={imageUrl}
/>
{isFavorite && <div className={styles.favoriteBadge} />}
<AnimatePresence>
{withControls && showControls && (
<ItemCardControls
@@ -633,12 +641,16 @@ const PosterItemCard = ({
[styles.isRound]: isRound,
});
const isFavorite =
'userFavorite' in data && (data as { userFavorite: boolean }).userFavorite;
const imageContainerContent = (
<>
<Image
className={clsx(styles.image, { [styles.isRound]: isRound })}
src={imageUrl}
/>
{isFavorite && <div className={styles.favoriteBadge} />}
<AnimatePresence>
{withControls && showControls && data && (
<ItemCardControls