pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix feature carousel dynamic styles

Browse source
This commit is contained in:
jeffvli 2023-06-13 18:38:55 -07:00
parent 23f4bfde99
commit 5877b8cc6f
1 changed files with 42 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
src/renderer/components/feature-carousel/index.tsx
View file

@ -171,10 +171,10 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
>
<TitleWrapper>
<TextTitle
lh="5rem"
lh="3.5rem"
order={1}
overflow="hidden"
sx={{ fontSize: '4rem' }}
sx={{ fontSize: '3.5rem' }}
weight={900}
>
{currentItem?.name}
@ -203,40 +203,10 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
<Badge size="lg">{currentItem?.releaseYear}</Badge>
<Badge size="lg">{currentItem?.songCount} tracks</Badge>
</Group>
</Stack>
</InfoColumn>
</Grid>
<BackgroundImage
draggable="false"
src={currentItem?.imageUrl || undefined}
/>
<BackgroundImageOverlay />
</Carousel>
)}
</AnimatePresence>
<Group
spacing="sm"
sx={{ bottom: '1rem', position: 'absolute', right: '1rem', zIndex: 20 }}
>
<Group position="apart">
<Button
radius="lg"
size="md"
variant="outline"
onClick={handlePrevious}
>
<RiArrowLeftSLine size="2rem" />
</Button>
<Button
radius="lg"
size="md"
variant="outline"
onClick={handleNext}
>
<RiArrowRightSLine size="2rem" />
</Button>
<Button
radius="lg"
size="md"
size="lg"
style={{ borderRadius: '5rem' }}
variant="outline"
onClick={(e) => {
e.preventDefault();
@ -254,7 +224,36 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
>
Play
</Button>
<Group spacing="sm">
<Button
radius="lg"
size="sm"
variant="outline"
onClick={handlePrevious}
>
<RiArrowLeftSLine size="2rem" />
</Button>
<Button
radius="lg"
size="sm"
variant="outline"
onClick={handleNext}
>
<RiArrowRightSLine size="2rem" />
</Button>
</Group>
</Group>
</Stack>
</InfoColumn>
</Grid>
<BackgroundImage
draggable="false"
src={currentItem?.imageUrl || undefined}
/>
<BackgroundImageOverlay />
</Carousel>
)}
</AnimatePresence>
</Wrapper>
);
};