From b4c726e45b422e61aa55f9810aa0439e2debef02 Mon Sep 17 00:00:00 2001 From: n4mlz Date: Tue, 1 Sep 2026 12:19:55 +0900 Subject: [PATCH 1/3] =?UTF-8?q?:sparkles:=20=E3=83=80=E3=83=83=E3=82=B7?= =?UTF-8?q?=E3=83=A5=E3=83=9C=E3=83=BC=E3=83=89=E3=81=AE=E3=83=8A=E3=83=93?= =?UTF-8?q?=E3=82=B2=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3=E3=81=A8=E3=83=AD?= =?UTF-8?q?=E3=83=BC=E3=83=87=E3=82=A3=E3=83=B3=E3=82=B0=E8=A1=A8=E7=A4=BA?= =?UTF-8?q?=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/musics/loading.tsx | 5 ++++ components/dashboard-home.tsx | 38 ++++++++---------------- components/dashboard-layout.tsx | 41 ++++++++++++++++++++++++++ components/music-list-loading.tsx | 33 +++++++++++++++++++++ components/music-list.tsx | 48 ++++++++++--------------------- 5 files changed, 106 insertions(+), 59 deletions(-) create mode 100644 app/musics/loading.tsx create mode 100644 components/dashboard-layout.tsx create mode 100644 components/music-list-loading.tsx diff --git a/app/musics/loading.tsx b/app/musics/loading.tsx new file mode 100644 index 0000000..fc84ba2 --- /dev/null +++ b/app/musics/loading.tsx @@ -0,0 +1,5 @@ +import MusicListLoading from "@/components/music-list-loading"; + +export default function Loading() { + return ; +} diff --git a/components/dashboard-home.tsx b/components/dashboard-home.tsx index ed8d0cc..f8519ae 100644 --- a/components/dashboard-home.tsx +++ b/components/dashboard-home.tsx @@ -1,36 +1,22 @@ -"use client"; - -import AppLayout from "@cloudscape-design/components/app-layout"; import Button from "@cloudscape-design/components/button"; import Container from "@cloudscape-design/components/container"; import ContentLayout from "@cloudscape-design/components/content-layout"; import Header from "@cloudscape-design/components/header"; import SpaceBetween from "@cloudscape-design/components/space-between"; -import TopNavigation from "@cloudscape-design/components/top-navigation"; + +import DashboardLayout from "@/components/dashboard-layout"; export default function DashboardHome({ userName }: { userName: string }) { return ( -
- - XLAIR Dashboard}> - - -
管理者用ダッシュボードへようこそ、{userName} さん。
- - - - - - } - /> -
+ + XLAIR Dashboard}> + + +
管理者用ダッシュボードへようこそ、{userName} さん。
+ + + + + ); } diff --git a/components/dashboard-layout.tsx b/components/dashboard-layout.tsx new file mode 100644 index 0000000..a14733a --- /dev/null +++ b/components/dashboard-layout.tsx @@ -0,0 +1,41 @@ +"use client"; + +import AppLayout from "@cloudscape-design/components/app-layout"; +import SideNavigation from "@cloudscape-design/components/side-navigation"; +import TopNavigation from "@cloudscape-design/components/top-navigation"; +import type { ReactNode } from "react"; + +const navigationItems = [ + { type: "link" as const, text: "ホーム", href: "/" }, + { type: "link" as const, text: "楽曲管理", href: "/musics" }, +]; + +export default function DashboardLayout({ + activeHref, + children, +}: { + activeHref: string; + children: ReactNode; +}) { + return ( +
+ + + } + // Remove toolsHide when an AppLayout tools panel is introduced. + toolsHide + content={children} + /> +
+ ); +} diff --git a/components/music-list-loading.tsx b/components/music-list-loading.tsx new file mode 100644 index 0000000..768ff6a --- /dev/null +++ b/components/music-list-loading.tsx @@ -0,0 +1,33 @@ +import Container from "@cloudscape-design/components/container"; +import ContentLayout from "@cloudscape-design/components/content-layout"; +import Header from "@cloudscape-design/components/header"; +import Skeleton from "@cloudscape-design/components/skeleton"; +import SpaceBetween from "@cloudscape-design/components/space-between"; + +import DashboardLayout from "@/components/dashboard-layout"; + +const skeletonRows = Array.from({ length: 8 }, (_, index) => index); + +export default function MusicListLoading() { + return ( + + 楽曲管理}> + +
+ + {skeletonRows.map((row) => ( +
+ + + + + +
+ ))} + +
+ + + + ); +} diff --git a/components/music-list.tsx b/components/music-list.tsx index 9ab6cb5..5097f11 100644 --- a/components/music-list.tsx +++ b/components/music-list.tsx @@ -1,14 +1,13 @@ "use client"; -import AppLayout from "@cloudscape-design/components/app-layout"; import Button from "@cloudscape-design/components/button"; import Container from "@cloudscape-design/components/container"; import ContentLayout from "@cloudscape-design/components/content-layout"; import Header from "@cloudscape-design/components/header"; import SpaceBetween from "@cloudscape-design/components/space-between"; -import TopNavigation from "@cloudscape-design/components/top-navigation"; import dynamic from "next/dynamic"; +import DashboardLayout from "@/components/dashboard-layout"; import type { MusicListResponse } from "@/lib/api"; const MusicTable = dynamic(() => import("@/components/music-table"), { @@ -30,36 +29,19 @@ export default function MusicList({ : undefined; return ( -
- - ホーム} variant="h1"> - 楽曲管理 - - } - > - - - -
- -
- - - - } - /> -
+ + 楽曲管理}> + + + + {nextPageHref ? ( +
+ +
+ ) : null} + + + + ); } From 1785ccced50b36a571e7b70d2a2efdf4368a655e Mon Sep 17 00:00:00 2001 From: n4mlz Date: Tue, 1 Sep 2026 12:20:43 +0900 Subject: [PATCH 2/3] =?UTF-8?q?:bug:=20=E3=83=AD=E3=83=BC=E3=83=87?= =?UTF-8?q?=E3=82=A3=E3=83=B3=E3=82=B0=E8=A1=A8=E7=A4=BA=E3=82=92=E3=83=AC?= =?UTF-8?q?=E3=82=B9=E3=83=9D=E3=83=B3=E3=82=B7=E3=83=96=E3=81=AB=E8=AA=BF?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/music-list-loading.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/components/music-list-loading.tsx b/components/music-list-loading.tsx index 768ff6a..769adeb 100644 --- a/components/music-list-loading.tsx +++ b/components/music-list-loading.tsx @@ -16,7 +16,10 @@ export default function MusicListLoading() {
{skeletonRows.map((row) => ( -
+
From cc13db5fbba27ad797a320681b46ccfce4f19faa Mon Sep 17 00:00:00 2001 From: n4mlz Date: Tue, 1 Sep 2026 12:23:56 +0900 Subject: [PATCH 3/3] =?UTF-8?q?:recycle:=20=E3=83=AD=E3=83=BC=E3=83=87?= =?UTF-8?q?=E3=82=A3=E3=83=B3=E3=82=B0=E8=A1=A8=E7=A4=BA=E3=82=92=E3=82=B9?= =?UTF-8?q?=E3=83=94=E3=83=8A=E3=83=BC=E3=81=AB=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/music-list-loading.tsx | 27 ++++++++------------------- 1 file changed, 8 insertions(+), 19 deletions(-) diff --git a/components/music-list-loading.tsx b/components/music-list-loading.tsx index 769adeb..fb30409 100644 --- a/components/music-list-loading.tsx +++ b/components/music-list-loading.tsx @@ -1,33 +1,22 @@ import Container from "@cloudscape-design/components/container"; import ContentLayout from "@cloudscape-design/components/content-layout"; import Header from "@cloudscape-design/components/header"; -import Skeleton from "@cloudscape-design/components/skeleton"; -import SpaceBetween from "@cloudscape-design/components/space-between"; +import Spinner from "@cloudscape-design/components/spinner"; import DashboardLayout from "@/components/dashboard-layout"; -const skeletonRows = Array.from({ length: 8 }, (_, index) => index); - export default function MusicListLoading() { return ( 楽曲管理}> -
- - {skeletonRows.map((row) => ( -
- - - - - -
- ))} - +
+ + 楽曲一覧を読み込み中