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