From a726e694beeb6469c50ebcb41abcfde6999a5d0f Mon Sep 17 00:00:00 2001 From: Iqro-dev Date: Thu, 24 Oct 2024 15:02:59 +0200 Subject: [PATCH 01/11] feat(carousel): move arrows up and extend text width --- app/components/items/list/items-list.tsx | 2 +- app/components/items/misc/item-name.tsx | 4 +- app/components/ui/carousel.tsx | 4 +- tests/snapshots/item-card.spec.tsx.snap | 12 +-- tests/snapshots/item-name.spec.tsx.snap | 8 +- tests/snapshots/item-top-card.spec.tsx.snap | 28 ++--- tests/snapshots/items-list.spec.tsx.snap | 108 ++++++++++---------- tests/snapshots/items-section.spec.tsx.snap | 72 ++++++------- 8 files changed, 119 insertions(+), 119 deletions(-) diff --git a/app/components/items/list/items-list.tsx b/app/components/items/list/items-list.tsx index 031cb318..af14df2a 100644 --- a/app/components/items/list/items-list.tsx +++ b/app/components/items/list/items-list.tsx @@ -84,7 +84,7 @@ function ItemsList({ - + {carouselItems.slice(0, 3).map(item => ( diff --git a/app/components/items/misc/item-name.tsx b/app/components/items/misc/item-name.tsx index e52dce14..5fb16803 100644 --- a/app/components/items/misc/item-name.tsx +++ b/app/components/items/misc/item-name.tsx @@ -1,8 +1,8 @@ 'use client' +import type { AlbumEntity } from '@app/api/types' import { LinkButton } from '@app/components/common/buttons' import { cn } from '@app/utils/cn' -import type { AlbumEntity } from '@app/api/types' namespace ItemName { export type Props = Readonly< @@ -15,7 +15,7 @@ function ItemName({ name, href, className }: ItemName.Props) {

diff --git a/app/components/ui/carousel.tsx b/app/components/ui/carousel.tsx index 3b7b0091..55e156db 100644 --- a/app/components/ui/carousel.tsx +++ b/app/components/ui/carousel.tsx @@ -210,7 +210,7 @@ const CarouselPrevious = React.forwardRef< className={cn( 'absolute h-8 w-8 rounded-full hover:bg-white', orientation === 'horizontal' - ? '-left-12 top-1/2 -translate-y-1/2' + ? '-left-12 top-1/3 -translate-y-1/2' : '-top-12 left-1/2 -translate-x-1/2 rotate-90', className )} @@ -239,7 +239,7 @@ const CarouselNext = React.forwardRef< className={cn( 'absolute h-8 w-8 rounded-full hover:bg-white', orientation === 'horizontal' - ? '-right-12 top-1/2 -translate-y-1/2' + ? '-right-12 top-1/3 -translate-y-1/2' : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90', className )} diff --git a/tests/snapshots/item-card.spec.tsx.snap b/tests/snapshots/item-card.spec.tsx.snap index 79f26afa..ff8724c8 100644 --- a/tests/snapshots/item-card.spec.tsx.snap +++ b/tests/snapshots/item-card.spec.tsx.snap @@ -26,7 +26,7 @@ exports[`ItemCard > should match snapshot as album 1`] = ` href="/artist/undefined" >

Album 1

@@ -86,7 +86,7 @@ exports[`ItemCard > should match snapshot as album 1`] = ` href="/artist/undefined" >

Album 1

@@ -203,7 +203,7 @@ exports[`ItemCard > should match snapshot as artist 1`] = ` href="/artist/123" >

Darkthrone

@@ -263,7 +263,7 @@ exports[`ItemCard > should match snapshot as artist 1`] = ` href="/artist/123" >

Darkthrone

@@ -380,7 +380,7 @@ exports[`ItemCard > should match snapshot as track 1`] = ` href="/track/123" >

Track 1

@@ -447,7 +447,7 @@ exports[`ItemCard > should match snapshot as track 1`] = ` href="/track/123" >

Track 1

diff --git a/tests/snapshots/item-name.spec.tsx.snap b/tests/snapshots/item-name.spec.tsx.snap index 6e1a0d54..91f15e0d 100644 --- a/tests/snapshots/item-name.spec.tsx.snap +++ b/tests/snapshots/item-name.spec.tsx.snap @@ -10,7 +10,7 @@ exports[`ItemName > should match snapshot 1`] = ` href="" >

A Dark Forgotten Past

@@ -23,7 +23,7 @@ exports[`ItemName > should match snapshot 1`] = ` href="" >

A Dark Forgotten Past

@@ -93,7 +93,7 @@ exports[`ItemName > should match snapshot with long name 1`] = ` href="" >

Dark Medieval Times (Remastered 2021)

@@ -106,7 +106,7 @@ exports[`ItemName > should match snapshot with long name 1`] = ` href="" >

Dark Medieval Times (Remastered 2021)

diff --git a/tests/snapshots/item-top-card.spec.tsx.snap b/tests/snapshots/item-top-card.spec.tsx.snap index 516b31cb..65467b7a 100644 --- a/tests/snapshots/item-top-card.spec.tsx.snap +++ b/tests/snapshots/item-top-card.spec.tsx.snap @@ -35,7 +35,7 @@ exports[`ItemTopCard > should match snapshot as album 1`] = ` href="/artist/undefined" >

Album 1

@@ -83,7 +83,7 @@ exports[`ItemTopCard > should match snapshot as album 1`] = ` href="/artist/undefined" >

Album 1

@@ -188,7 +188,7 @@ exports[`ItemTopCard > should match snapshot as artist 1`] = ` href="/artist/123" >

Darkthrone

@@ -255,7 +255,7 @@ exports[`ItemTopCard > should match snapshot as artist 1`] = ` href="/artist/123" >

Darkthrone

@@ -379,7 +379,7 @@ exports[`ItemTopCard > should match snapshot as top 2 1`] = ` href="/album/undefined?highlighted-track-id=123" >

Track 1

@@ -532,7 +532,7 @@ exports[`ItemTopCard > should match snapshot as top 2 1`] = ` href="/album/undefined?highlighted-track-id=123" >

Track 1

@@ -742,7 +742,7 @@ exports[`ItemTopCard > should match snapshot as top 3 1`] = ` href="/album/undefined?highlighted-track-id=123" >

Track 1

@@ -901,7 +901,7 @@ exports[`ItemTopCard > should match snapshot as top 3 1`] = ` href="/album/undefined?highlighted-track-id=123" >

Track 1

@@ -1117,7 +1117,7 @@ exports[`ItemTopCard > should match snapshot as track 1`] = ` href="/album/undefined?highlighted-track-id=123" >

Track 1

@@ -1173,7 +1173,7 @@ exports[`ItemTopCard > should match snapshot as track 1`] = ` href="/album/undefined?highlighted-track-id=123" >

Track 1

@@ -1286,7 +1286,7 @@ exports[`ItemTopCard > should match snapshot as track with play time 1`] = ` href="/album/undefined?highlighted-track-id=123" >

Track 1

@@ -1367,7 +1367,7 @@ exports[`ItemTopCard > should match snapshot as track with play time 1`] = ` href="/album/undefined?highlighted-track-id=123" >

Track 1

@@ -1505,7 +1505,7 @@ exports[`ItemTopCard > should match snapshot as track with play time and plays 1 href="/album/undefined?highlighted-track-id=123" >

Track 1

@@ -1586,7 +1586,7 @@ exports[`ItemTopCard > should match snapshot as track with play time and plays 1 href="/album/undefined?highlighted-track-id=123" >

Track 1

diff --git a/tests/snapshots/items-list.spec.tsx.snap b/tests/snapshots/items-list.spec.tsx.snap index c9f32833..2541936c 100644 --- a/tests/snapshots/items-list.spec.tsx.snap +++ b/tests/snapshots/items-list.spec.tsx.snap @@ -713,7 +713,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = ` href="/album/undefined?highlighted-track-id=2" >

Track 1

@@ -796,7 +796,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = ` href="/album/undefined?highlighted-track-id=123" >

Track 1

@@ -883,7 +883,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = ` href="/album/undefined?highlighted-track-id=3" >

Track 1

@@ -940,7 +940,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
should match snapshot with playTime and top 1`] = ` href="/album/undefined?highlighted-track-id=123" >

Track 1

@@ -1074,7 +1074,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = ` href="/album/undefined?highlighted-track-id=2" >

Track 1

@@ -1163,7 +1163,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = ` href="/album/undefined?highlighted-track-id=3" >

Track 1

@@ -1220,7 +1220,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `