[FEAT] review and normailise title of the topBar

Signed-off-by: Edouard DUPIN <yui.heero@gmail.com>
This commit is contained in:
Edouard DUPIN 2025-03-22 12:11:51 +01:00
parent 4eff2e55ef
commit 693d59ab68
9 changed files with 38 additions and 51 deletions

View File

@ -45,7 +45,7 @@ export const AlbumDetailPage = () => {
if (!dataAlbum) {
return (
<>
<TopBar title="Album detail" />
<TopBar title="Album detail" titleLink="/album" />
<PageLayoutInfoCenter>
Fail to load artist id: {albumId}
</PageLayoutInfoCenter>
@ -54,7 +54,7 @@ export const AlbumDetailPage = () => {
}
return (
<>
<TopBar title="Album detail">
<TopBar title="Album detail" titleLink="/album">
<Button
{...BUTTON_TOP_BAR_PROPERTY}
onClick={() =>

View File

@ -28,7 +28,7 @@ export const AlbumsPage = () => {
if (isLoading) {
return (
<>
<TopBar title="All Albums" />
<TopBar title="All Albums" titleLink="/home" />
<PageLayoutInfoCenter>No Album available</PageLayoutInfoCenter>
</>
);
@ -36,7 +36,7 @@ export const AlbumsPage = () => {
return (
<>
<TopBar title="All Albums">
<TopBar title="All Albums" titleLink="/home">
<SearchInput onChange={setFilterTitle} />
</TopBar>
<PageLayout>

View File

@ -55,33 +55,27 @@ export const ArtistAlbumDetailPage = () => {
}
return (
<>
<TopBar title={dataArtist ? undefined : 'Album detail'}>
<TopBar
title={dataArtist ? dataArtist?.name : 'Album detail'}
titleLink={dataArtist ? `/artist/${dataArtist.id}` : undefined}
titleIcon={
<Covers
data={dataArtist?.covers}
size="35px"
borderRadius="full"
iconEmpty={<MdPerson />}
/>
}
>
{dataArtist && (
<>
<Button
{...BUTTON_TOP_BAR_PROPERTY}
marginRight="auto"
onClick={() => navigate(`/artist/${dataArtist.id}`)}
>
<Covers
data={dataArtist?.covers}
size="35px"
borderRadius="full"
iconEmpty={<MdPerson />}
/>
<Text fontSize="24px" fontWeight="bold">
{dataArtist?.name}
</Text>
</Button>
<Button
{...BUTTON_TOP_BAR_PROPERTY}
onClick={() =>
navigate(`/album/${albumId}/edit-album/${dataAlbum.id}`)
}
>
<MdEdit />
</Button>
</>
<Button
{...BUTTON_TOP_BAR_PROPERTY}
onClick={() =>
navigate(`/album/${albumId}/edit-album/${dataAlbum.id}`)
}
>
<MdEdit />
</Button>
)}
</TopBar>
<PageLayout>

View File

@ -32,7 +32,7 @@ export const ArtistDetailPage = () => {
if (!dataArtist) {
return (
<>
<TopBar title="Artist detail" />
<TopBar title="Artists" titleLink="/artist" />
<PageLayoutInfoCenter>
Fail to load artist id: {artistId}
</PageLayoutInfoCenter>
@ -41,19 +41,12 @@ export const ArtistDetailPage = () => {
}
return (
<>
<TopBar>
<TopBar
title="Artists"
titleLink="/artist/all"
titleIcon={<MdGroup height="full" />}
>
<>
<Button
{...BUTTON_TOP_BAR_PROPERTY}
marginRight="auto"
onClick={() => navigate(`/artist/all`)}
>
<MdGroup height="full" />
<Text fontSize="24px" fontWeight="bold">
Artists
</Text>
</Button>
<Button
{...BUTTON_TOP_BAR_PROPERTY}
onClick={() =>

View File

@ -63,7 +63,7 @@ export const ArtistsPage = () => {
return (
<>
<TopBar title="All artists">
<TopBar title="All artists" titleLink="/home">
<SearchInput onChange={setFilterName} />
<Tooltip.Root aria-label="Random play">
<Button {...BUTTON_TOP_BAR_PROPERTY} onClick={onRandomPlay}>

View File

@ -45,7 +45,7 @@ export const GenderDetailPage = () => {
if (!dataGender) {
return (
<>
<TopBar title="Gender detail" />
<TopBar title="Gender detail" titleLink="/gender" />
<PageLayoutInfoCenter>
Fail to load artist id: {genderId}
</PageLayoutInfoCenter>
@ -54,7 +54,7 @@ export const GenderDetailPage = () => {
}
return (
<>
<TopBar title="Gender detail">
<TopBar title="Gender detail" titleLink="/gender">
<Button
{...BUTTON_TOP_BAR_PROPERTY}
onClick={() =>

View File

@ -23,7 +23,7 @@ export const GendersPage = () => {
if (isLoading) {
return (
<>
<TopBar title="All Genders" />
<TopBar title="All Genders" titleLink="/home" />
<PageLayoutInfoCenter>No Gender available</PageLayoutInfoCenter>
</>
);
@ -31,7 +31,7 @@ export const GendersPage = () => {
return (
<>
<TopBar title="All Genders">
<TopBar title="All Genders" titleLink="/home">
<SearchInput onChange={setFilterTitle} />
</TopBar>
<PageLayout>

View File

@ -97,7 +97,7 @@ export const OnAirPage = () => {
if (!playTrackList || playTrackList.length == 0) {
return (
<>
<TopBar title="Album detail" />
<TopBar title="On Air ..." titleLink="/home" />
<PageLayoutInfoCenter>
No data is currently playing...
</PageLayoutInfoCenter>
@ -106,7 +106,7 @@ export const OnAirPage = () => {
}
return (
<>
<TopBar title="On Air ...">
<TopBar title="On Air ..." titleLink="/home">
<Button {...BUTTON_TOP_BAR_PROPERTY} onClick={clean}>
<LuTrash2 />
</Button>

View File

@ -42,7 +42,7 @@ export const TrackSelectionPage = () => {
};
return (
<>
<TopBar title="All Tracks" />
<TopBar title="All Tracks" titleLink="/home" />
<PageLayout>
<HStack
wrap="wrap"