vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-15 21:16:17 +02:00
Code Issues Packages Projects Releases Wiki Activity

redesign feature carousel to be more compact

Browse Source
This commit is contained in:
jeffvli
2025-12-11 21:25:35 -08:00
parent a4dbeff5ea
commit aa435bbfc4
2 changed files with 144 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/feature-carousel/feature-carousel.tsx
+12 -30
View File
@@ -23,25 +23,9 @@ import { Album, LibraryItem } from '/@/shared/types/domain-types';
import { Play } from '/@/shared/types/types';
const containerVariants = {
animate: (custom: { isNext: boolean }) => ({
transition: {
delayChildren: 0.1,
staggerChildren: 0.3,
staggerDirection: custom.isNext ? 1 : -1,
},
}),
exit: (custom: { isNext: boolean }) => ({
transition: {
staggerChildren: 0.3,
staggerDirection: custom.isNext ? 1 : -1,
},
}),
initial: (custom: { isNext: boolean }) => ({
transition: {
staggerChildren: 0.3,
staggerDirection: custom.isNext ? -1 : 1,
},
}),
animate: {},
exit: {},
initial: {},
};
const itemVariants = {
@@ -49,23 +33,22 @@ const itemVariants = {
opacity: 1,
scale: 1,
transition: {
duration: 0.4,
duration: 0.2,
ease: 'easeOut' as const,
},
y: 0,
},
exit: {
opacity: 0,
scale: 0.8,
transition: {
duration: 0.3,
ease: 'easeIn' as const,
},
y: -20,
y: 0,
},
initial: {
opacity: 0,
y: 20,
y: 0,
},
};
@@ -122,7 +105,7 @@ const CarouselItem = ({ album }: CarouselItemProps) => {
>
<div className={styles.content}>
<div className={styles.titleSection}>
<TextTitle className={styles.title} fw={800} lineClamp={2} order={3}>
<TextTitle className={styles.title} fw={700} lineClamp={2} order={4}>
{album.name}
</TextTitle>
</div>
@@ -143,25 +126,25 @@ const CarouselItem = ({ album }: CarouselItemProps) => {
{album.albumArtists.slice(0, 1).map((artist) => (
<Text
className={styles.artist}
fw={600}
fw={500}
key={`artist-${artist.id}`}
size="xl"
size="md"
>
{artist.name}
</Text>
))}
<Group gap="sm" justify="center" wrap="wrap">
<Group gap="xs" justify="center" wrap="wrap">
{album.genres?.slice(0, 2).map((genre) => (
<Badge
key={`genre-${genre.id}`}
size="lg"
size="sm"
variant="transparent"
>
{genre.name}
</Badge>
))}
{album.releaseYear && (
<Badge size="lg" variant="transparent">
<Badge size="sm" variant="transparent">
{album.releaseYear}
</Badge>
)}
@@ -245,7 +228,6 @@ export const FeatureCarousel = ({ data, onNearEnd }: FeatureCarouselProps) => {
<motion.div
animate="animate"
className={styles.carousel}
custom={directionRef.current}
exit="exit"
initial="initial"
key={`carousel-${startIndex}`}