diff --git a/app/components/items/cards/item-card.tsx b/app/components/items/cards/item-card.tsx index 259f2081..a6527a8c 100644 --- a/app/components/items/cards/item-card.tsx +++ b/app/components/items/cards/item-card.tsx @@ -1,10 +1,11 @@ 'use client' -import { ItemImage, ItemName, ItemArtists } from '../misc' +import { ItemArtists, ItemImage, ItemName } from '../misc' -import { Card } from '@app/components/ui/card' -import { SpotifyLink } from '@app/components/common' import type { AlbumEntity, ArtistEntity, TrackEntity } from '@app/api/types' +import { SpotifyLink } from '@app/components/common' +import { Card } from '@app/components/ui/card' +import { cn } from '@app/utils/cn' interface ItemCardAlbum extends Pick { @@ -46,13 +47,16 @@ function ItemCard({ -
+
+<<<<<<< HEAD
{albumType ? (
@@ -65,8 +69,28 @@ function ItemCard({
)} +======= + {album ?? albumType ? ( +
+ {albumType && ( +
+ {new Date(releaseDate).getFullYear()} •  + {albumType} +
+ )} + + {album && ( +
+ +
+ )} + + {(album ?? artists) && } +
+ ) : ( +>>>>>>> 809dab4 (feat(items-list): add new card view) -
+ )}
) diff --git a/app/components/items/list/items-list.skeleton.tsx b/app/components/items/list/items-list.skeleton.tsx index c7d504b4..c108bee4 100644 --- a/app/components/items/list/items-list.skeleton.tsx +++ b/app/components/items/list/items-list.skeleton.tsx @@ -25,7 +25,7 @@ function ItemsListSkeleton({ }: ItemsListSkeleton.Props) { return (
- {view === View.CARD && ( + {view === View.TOP && ( <>
@@ -87,6 +87,21 @@ function ItemsListSkeleton({ ))}
)} + + {view === View.CARD && ( +
+ {Array.from({ length: 10 }) + .fill(0) + .map((_, index) => ( + + ))} +
+ )}
) } diff --git a/app/components/items/list/items-list.stories.tsx b/app/components/items/list/items-list.stories.tsx index 37a6970e..db7a9d01 100644 --- a/app/components/items/list/items-list.stories.tsx +++ b/app/components/items/list/items-list.stories.tsx @@ -141,7 +141,7 @@ export const Skeleton: ItemsListStory = { } export const SkeletonWithTop: ItemsListStory = { - render: () => , + render: () => , } export const SkeletonWithArtists: ItemsListStory = { diff --git a/app/components/items/list/items-list.tsx b/app/components/items/list/items-list.tsx index 72d64dc0..981d2ff0 100644 --- a/app/components/items/list/items-list.tsx +++ b/app/components/items/list/items-list.tsx @@ -1,9 +1,13 @@ 'use client' +<<<<<<< HEAD import type { HtmlHTMLAttributes } from 'react' import { ItemTopCard } from '../cards' import { formatItems } from '../helpers' +======= +import { ItemCard, ItemTopCard } from '../cards' +>>>>>>> 809dab4 (feat(items-list): add new card view) import type { ItemPosition } from '../misc' import { ItemsListElement } from './items-list-element' @@ -25,6 +29,7 @@ import { Separator } from '@app/components/ui/separator' import { cn } from '@app/utils/cn' namespace ItemsList { +<<<<<<< HEAD export type Props = Readonly< Pick, 'className'> & { items: @@ -39,11 +44,25 @@ namespace ItemsList { genresDisplayLength?: number } > +======= + export interface Props { + items: + | ArtistEntity[] + | TrackEntity[] + | RigtchStatsResponse + isTop?: boolean + isCard?: boolean + positionSize?: ItemPosition.Props['size'] + positionClassName?: string + lastItemSeparator?: boolean + } +>>>>>>> 809dab4 (feat(items-list): add new card view) } function ItemsList({ items, isTop, + isCard, positionSize, className, positionClassName, @@ -90,9 +109,16 @@ function ItemsList({ )} -
+
{sortedItems.slice(isTop ? 3 : 0).map((item, index, items) => (
+<<<<<<< HEAD {/* @ts-expect-error: conditional types are already handled */} +======= + {isCard ? ( + + ) : ( + /* @ts-expect-error: conditional types are already handled */ + + )} +>>>>>>> 809dab4 (feat(items-list): add new card view) - {items.length === index + 1 ? ( + {isCard ? null : items.length === index + 1 ? ( lastItemSeparator ? ( ) : null diff --git a/app/components/items/misc/item-artists.tsx b/app/components/items/misc/item-artists.tsx index 1a2e5934..863a80ab 100644 --- a/app/components/items/misc/item-artists.tsx +++ b/app/components/items/misc/item-artists.tsx @@ -1,8 +1,8 @@ 'use client' +import type { ArtistEntity } from '@app/api/types' import { LinkButton } from '@app/components/common/buttons' import { cn } from '@app/utils/cn' -import type { ArtistEntity } from '@app/api/types' namespace ItemArtists { export type Props = Readonly< @@ -14,7 +14,7 @@ namespace ItemArtists { function ItemArtists({ artists, className }: ItemArtists.Props) { return ( - <> + {artists.map(({ name, id }, index) => ( , } ))} - + ) } diff --git a/app/profile/components/common/selects/select-view.tsx b/app/profile/components/common/selects/select-view.tsx index a202eb23..0256d00d 100644 --- a/app/profile/components/common/selects/select-view.tsx +++ b/app/profile/components/common/selects/select-view.tsx @@ -1,7 +1,7 @@ 'use client' import { usePathname, useRouter, useSearchParams } from 'next/navigation' -import { LuLayers, LuList } from 'react-icons/lu' +import { LuLayers, LuList, LuStar } from 'react-icons/lu' import type { ProfileSelectProps } from './props' @@ -19,15 +19,20 @@ import { formatSearchParams } from '@app/utils/formatters' export function SelectView({ initialValue }: ProfileSelectProps) { const viewOptions = [ { - icon: , - value: View.CARD, - label: 'Card', + icon: , + value: View.TOP, + label: 'Top', }, { icon: , value: View.LIST, label: 'List', }, + { + icon: , + value: View.CARD, + label: 'Card', + }, ] const pathname = usePathname() diff --git a/app/profile/enums/view.ts b/app/profile/enums/view.ts index 26b6e304..dc2245ca 100644 --- a/app/profile/enums/view.ts +++ b/app/profile/enums/view.ts @@ -1,4 +1,5 @@ export enum View { LIST = 'list', + TOP = 'TOP', CARD = 'card', } diff --git a/app/profile/sections/items-section.tsx b/app/profile/sections/items-section.tsx index a55d2ba4..df44ef41 100644 --- a/app/profile/sections/items-section.tsx +++ b/app/profile/sections/items-section.tsx @@ -1,6 +1,5 @@ import { NoDataAlert } from '../components/common' -import { DefaultSection } from '@app/sections' import type { AlbumEntity, ArtistEntity, @@ -9,6 +8,7 @@ import type { } from '@app/api/types' import { ItemsList } from '@app/components/items/list' import { View } from '@app/profile/enums' +import { DefaultSection } from '@app/sections' namespace ItemsSection { export type Props = Readonly< @@ -31,7 +31,11 @@ function ItemsSection({ return ( {items.length > 0 && ( - + )} {items.length === 0 && } diff --git a/tests/snapshots/item-artists.spec.tsx.snap b/tests/snapshots/item-artists.spec.tsx.snap index 77accd4d..8b67c252 100644 --- a/tests/snapshots/item-artists.spec.tsx.snap +++ b/tests/snapshots/item-artists.spec.tsx.snap @@ -5,6 +5,24 @@ exports[`ItemArtists > should match snapshot with artist entity 1`] = ` "asFragment": [Function], "baseElement":
+ + + + Darkthrone + + + +
+ , + "container": , "container":
@@ -23,6 +42,8 @@ exports[`ItemArtists > should match snapshot with artist entity 1`] = ` > Darkthrone +======= +>>>>>>> 809dab4 (feat(items-list): add new card view)
, "debug": [Function], @@ -84,6 +105,57 @@ exports[`ItemArtists > should match snapshot with multiple artist entities 1`] = "asFragment": [Function], "baseElement":
+ + + + Darkthrone + + + , + + + + + Darkthrone + + + , + + + + + Darkthrone + + + , + + + + + Darkthrone + + + +
+ , + "container": , "container":
@@ -168,6 +241,8 @@ exports[`ItemArtists > should match snapshot with multiple artist entities 1`] = > Darkthrone +======= +>>>>>>> 809dab4 (feat(items-list): add new card view)
, "debug": [Function], diff --git a/tests/snapshots/item-card.spec.tsx.snap b/tests/snapshots/item-card.spec.tsx.snap index 79f26afa..e58bf87f 100644 --- a/tests/snapshots/item-card.spec.tsx.snap +++ b/tests/snapshots/item-card.spec.tsx.snap @@ -20,7 +20,9 @@ exports[`ItemCard > should match snapshot as album 1`] = ` style="color: transparent; min-height: 200px; max-height: 200px; min-width: 200px; max-width: 200px; object-fit: cover;" width="200" /> -
+
should match snapshot as album 1`] = ` Album 1

+<<<<<<< HEAD
@@ -95,6 +98,8 @@ exports[`ItemCard > should match snapshot as album 1`] = ` class="flex flex-row justify-between" >
+======= +>>>>>>> 809dab4 (feat(items-list): add new card view)
+ , + "container": , "debug": [Function], "findAllByAltText": [Function], @@ -197,7 +258,9 @@ exports[`ItemCard > should match snapshot as artist 1`] = ` style="color: transparent; min-height: 200px; max-height: 200px; min-width: 200px; max-width: 200px; object-fit: cover;" width="200" /> -
+
should match snapshot as artist 1`] = ` Darkthrone

+<<<<<<< HEAD
@@ -272,6 +336,8 @@ exports[`ItemCard > should match snapshot as artist 1`] = ` class="flex flex-row justify-between" >
+======= +>>>>>>> 809dab4 (feat(items-list): add new card view)
+ , + "container": , "debug": [Function], "findAllByAltText": [Function], @@ -374,7 +496,9 @@ exports[`ItemCard > should match snapshot as track 1`] = ` style="color: transparent; min-height: 200px; max-height: 200px; min-width: 200px; max-width: 200px; object-fit: cover;" width="200" /> -
+
should match snapshot as track 1`] = `
+<<<<<<< HEAD + >>>>>> 809dab4 (feat(items-list): add new card view) > - Darkthrone - - + + + Darkthrone + + + +
@@ -168,6 +215,7 @@ exports[`ItemHeaderSection > should match snapshot with artists 1`] = ` class="w-full text-xl" > by  +<<<<<<< HEAD should match snapshot with artists 1`] = ` > Darkthrone +======= + +>>>>>>> 809dab4 (feat(items-list): add new card view) - , + + Darkthrone + + + , + +<<<<<<< HEAD should match snapshot with artists 1`] = ` > Darkthrone +======= +>>>>>>> 809dab4 (feat(items-list): add new card view) - , + + Darkthrone + + + , + +<<<<<<< HEAD should match snapshot with artists 1`] = ` > Darkthrone +======= +>>>>>>> 809dab4 (feat(items-list): add new card view) - , + + Darkthrone + + + , + + + + + Darkthrone + +<<<<<<< HEAD should match snapshot with artists 1`] = ` > Darkthrone +======= +>>>>>>> 809dab4 (feat(items-list): add new card view)
diff --git a/tests/snapshots/item-top-card.spec.tsx.snap b/tests/snapshots/item-top-card.spec.tsx.snap index 793a116c..1c0cea36 100644 --- a/tests/snapshots/item-top-card.spec.tsx.snap +++ b/tests/snapshots/item-top-card.spec.tsx.snap @@ -384,6 +384,7 @@ exports[`ItemTopCard > should match snapshot as top 2 1`] = ` Track 1

+<<<<<<< HEAD should match snapshot as top 2 1`] = ` > Darkthrone +======= + + + + Darkthrone + + +>>>>>>> 809dab4 (feat(items-list): add new card view)
should match snapshot as top 2 1`] = ` Track 1

+<<<<<<< HEAD should match snapshot as top 2 1`] = ` > Darkthrone +======= + + + + Darkthrone + + +>>>>>>> 809dab4 (feat(items-list): add new card view)
should match snapshot as top 3 1`] = ` Track 1

+<<<<<<< HEAD should match snapshot as top 3 1`] = ` > Darkthrone +======= + + + + Darkthrone + + +>>>>>>> 809dab4 (feat(items-list): add new card view)
should match snapshot as top 3 1`] = ` Track 1

+<<<<<<< HEAD should match snapshot as top 3 1`] = ` > Darkthrone +======= + + + + Darkthrone + + +>>>>>>> 809dab4 (feat(items-list): add new card view)
should match snapshot as track 1`] = ` Track 1

+<<<<<<< HEAD should match snapshot as track 1`] = ` > Darkthrone +======= + + + + Darkthrone + + +>>>>>>> 809dab4 (feat(items-list): add new card view)
should match snapshot as track 1`] = ` Track 1

+<<<<<<< HEAD should match snapshot as track 1`] = ` > Darkthrone +======= + + + + Darkthrone + + +>>>>>>> 809dab4 (feat(items-list): add new card view)
should match snapshot as track with play time 1`] = ` Track 1

+<<<<<<< HEAD should match snapshot as track with play time 1`] = ` > Darkthrone +======= + + + + Darkthrone + + +>>>>>>> 809dab4 (feat(items-list): add new card view)
should match snapshot as track with play time 1`] = ` Track 1

+<<<<<<< HEAD should match snapshot as track with play time 1`] = ` > Darkthrone +======= + + + + Darkthrone + + +>>>>>>> 809dab4 (feat(items-list): add new card view)
should match snapshot as track with play time and plays 1 Track 1

+<<<<<<< HEAD should match snapshot as track with play time and plays 1 > Darkthrone +======= + + + + Darkthrone + + +>>>>>>> 809dab4 (feat(items-list): add new card view)
should match snapshot as track with play time and plays 1 Track 1

+<<<<<<< HEAD should match snapshot as track with play time and plays 1 > Darkthrone +======= + + + + Darkthrone + + +>>>>>>> 809dab4 (feat(items-list): add new card view)
should match snapshot with artists 1`] = ` class="flex w-full items-center justify-between" >
+<<<<<<< HEAD should match snapshot with artists 1`] = ` > Darkthrone +======= + +>>>>>>> 809dab4 (feat(items-list): add new card view) - , + + Darkthrone + + + , + +<<<<<<< HEAD should match snapshot with artists 1`] = ` > Mayhem +======= +>>>>>>> 809dab4 (feat(items-list): add new card view) - , + + Mayhem + + + , + +<<<<<<< HEAD should match snapshot with artists 1`] = ` > Darkthrone +======= +>>>>>>> 809dab4 (feat(items-list): add new card view) - , + + Darkthrone + + + , + + + + + Darkthrone + +<<<<<<< HEAD should match snapshot with artists 1`] = ` > Darkthrone +======= +>>>>>>> 809dab4 (feat(items-list): add new card view)
diff --git a/tests/snapshots/items-list.spec.tsx.snap b/tests/snapshots/items-list.spec.tsx.snap index cc7fdb90..d3bc43af 100644 --- a/tests/snapshots/items-list.spec.tsx.snap +++ b/tests/snapshots/items-list.spec.tsx.snap @@ -59,6 +59,7 @@ exports[`ItemsList > should match snapshot with playTime 1`] = ` class="flex w-full items-center justify-between" >
+<<<<<<< HEAD should match snapshot with playTime 1`] = ` > Darkthrone +======= + + + + Darkthrone + + +>>>>>>> 809dab4 (feat(items-list): add new card view)