more feature carousel optimizations

- decrease title size
- only show first artist
This commit is contained in:
jeffvli
2025-12-12 00:54:29 -08:00
parent e147a78ee0
commit ce6155fe47
@@ -17,7 +17,6 @@ import { Badge } from '/@/shared/components/badge/badge';
import { Group } from '/@/shared/components/group/group'; import { Group } from '/@/shared/components/group/group';
import { Image } from '/@/shared/components/image/image'; import { Image } from '/@/shared/components/image/image';
import { Stack } from '/@/shared/components/stack/stack'; import { Stack } from '/@/shared/components/stack/stack';
import { TextTitle } from '/@/shared/components/text-title/text-title';
import { Text } from '/@/shared/components/text/text'; import { Text } from '/@/shared/components/text/text';
import { Album, LibraryItem } from '/@/shared/types/domain-types'; import { Album, LibraryItem } from '/@/shared/types/domain-types';
import { Play } from '/@/shared/types/types'; import { Play } from '/@/shared/types/types';
@@ -105,9 +104,9 @@ const CarouselItem = ({ album }: CarouselItemProps) => {
> >
<div className={styles.content}> <div className={styles.content}>
<div className={styles.titleSection}> <div className={styles.titleSection}>
<TextTitle className={styles.title} fw={700} lineClamp={2} order={4}> <Text className={styles.title} fw={700} lineClamp={2} size="lg" ta="center">
{album.name} {album.name}
</TextTitle> </Text>
</div> </div>
<div className={styles.imageSection}> <div className={styles.imageSection}>
@@ -123,16 +122,11 @@ const CarouselItem = ({ album }: CarouselItemProps) => {
<div className={styles.metadataSection}> <div className={styles.metadataSection}>
<Stack gap="sm"> <Stack gap="sm">
{album.albumArtists.slice(0, 1).map((artist) => ( {album.albumArtists?.[0] && (
<Text <Text className={styles.artist} fw={500} size="md">
className={styles.artist} {album.albumArtists[0].name}
fw={500}
key={`artist-${artist.id}`}
size="md"
>
{artist.name}
</Text> </Text>
))} )}
<Group gap="xs" justify="center" wrap="wrap"> <Group gap="xs" justify="center" wrap="wrap">
{album.genres?.slice(0, 2).map((genre) => ( {album.genres?.slice(0, 2).map((genre) => (
<Badge <Badge