Skip to content

Commit 53f38b8

Browse files
Inlet-backInlet-back
authored
Merge pull request #44 from kc3hack/feature/issue-43-dashboard-ui
feat(frontend): update dashboard UI #43
2 parents de87d78 + f2cf40f commit 53f38b8

File tree

6 files changed

+152
-36
lines changed

6 files changed

+152
-36
lines changed

‎frontend/src/app/(dashboard)/layout.tsx‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎frontend/src/app/dashboard/layout.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { AppSidebar } from '@/features/dashboard/components/AppSidebar';
2+
3+
export const metadata = {
4+
title: 'Dashboard',
5+
description: 'Your personal dashboard',
6+
};
7+
8+
export default function DashboardLayout({
9+
children,
10+
}: {
11+
children: React.ReactNode;
12+
}) {
13+
return (
14+
<div className="min-h-screen bg-[#FDFEF0]">
15+
{/* Top Header Bar - Full Width */}
16+
<header className="sticky top-0 z-50 flex h-16 w-full items-center justify-end bg-[#559C71] px-6 text-white shadow-md">
17+
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-white text-gray-600 shadow-sm">
18+
👤
19+
</div>
20+
</header>
21+
22+
<div className="flex">
23+
<AppSidebar />
24+
25+
{/* Main Content Area */}
26+
<div className="flex-1 p-8 sm:ml-64">
27+
{children}
28+
</div>
29+
</div>
30+
</div>
31+
);
32+
}

frontend/src/app/(dashboard)/page.tsx renamed to frontend/src/app/dashboard/page.tsx

File renamed without changes.

‎frontend/src/features/dashboard/components/AcquiredBadges.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
'use client';
2+
3+
export function AcquiredBadges() {
4+
return (
5+
<div className="mt-8">
6+
<h3 className="mb-4 text-xl font-bold text-[#2C5F2D]">取得バッチ</h3>
7+
<div className="flex items-center justify-between rounded-xl border-2 border-[#2C5F2D] bg-[#FDFEF0] px-12 py-8 shadow-sm">
8+
{/* Trophy */}
9+
<div className="flex flex-col items-center">
10+
<div className="text-6xl drop-shadow-md">🏆</div>
11+
</div>
12+
13+
{/* Medals */}
14+
<div className="flex gap-8">
15+
<div className="flex flex-col items-center gap-2">
16+
<span className="text-xl font-bold text-blue-600">V</span>
17+
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-yellow-400 text-3xl font-bold text-white shadow-md border-4 border-yellow-200">
18+
1
19+
</div>
20+
</div>
21+
<div className="flex flex-col items-center gap-2">
22+
<span className="text-xl font-bold text-blue-600">V</span>
23+
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-gray-400 text-3xl font-bold text-white shadow-md border-4 border-gray-200">
24+
2
25+
</div>
26+
</div>
27+
<div className="flex flex-col items-center gap-2">
28+
<span className="text-xl font-bold text-blue-600">V</span>
29+
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-amber-700 text-3xl font-bold text-white shadow-md border-4 border-amber-600">
30+
3
31+
</div>
32+
</div>
33+
</div>
34+
</div>
35+
</div>
36+
);
37+
}

‎frontend/src/features/dashboard/components/AppSidebar.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
'use client';
2+
3+
import Link from 'next/link';
4+
5+
export function AppSidebar() {
6+
return (
7+
<aside className="fixed left-0 top-16 z-40 h-[calc(100vh-4rem)] w-64 -translate-x-full transition-transform sm:translate-x-0 bg-[#559C71] text-white">
8+
<div className="flex h-full flex-col overflow-y-auto px-3 py-4">
9+
{/* Navigation Items */}
10+
<ul className="space-y-4 font-medium">
11+
{/* Home - Active state */}
12+
<li>
13+
<Link
14+
href="/dashboard"
15+
className="flex items-center rounded-r-full bg-[#B8CAA8] p-3 text-gray-900 group"
16+
>
17+
<div className="flex h-10 w-10 items-center justify-center text-2xl">🏠</div>
18+
<span className="ml-3 text-lg text-[#D16B36]">ホーム</span>
19+
</Link>
20+
</li>
21+
22+
{/* Exercises */}
23+
<li>
24+
<Link
25+
href="/exercises"
26+
className="flex items-center rounded-lg p-3 text-white hover:bg-[#468B62] group"
27+
>
28+
<div className="flex h-10 w-10 items-center justify-center text-2xl">📝</div>
29+
<span className="ml-3 text-lg">演習</span>
30+
</Link>
31+
</li>
32+
33+
{/* Grades */}
34+
<li>
35+
<Link
36+
href="/grades"
37+
className="flex items-center rounded-lg p-3 text-white hover:bg-[#468B62] group"
38+
>
39+
<div className="flex h-10 w-10 items-center justify-center text-2xl">🔖</div>
40+
<span className="ml-3 text-lg">成績</span>
41+
</Link>
42+
</li>
43+
</ul>
44+
</div>
45+
</aside>
46+
);
47+
}

‎frontend/src/features/dashboard/components/DashboardContainer.tsx‎

Lines changed: 36 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,7 @@
88
import { useEffect, useState } from 'react';
99
import type { UserStatus } from '../types';
1010
import { fetchUserDashboard } from '../api/mock';
11-
import { StatusCard } from './StatusCard';
12-
import { BadgeList } from './BadgeList';
13-
import { SkillRoadmap } from './SkillRoadmap';
11+
import { AcquiredBadges } from './AcquiredBadges';
1412

1513
interface DashboardContainerProps {
1614
userId?: string;
@@ -42,11 +40,11 @@ export function DashboardContainer({ userId = 'default-user' }: DashboardContain
4240

4341
if (loading) {
4442
return (
45-
<div className="flex min-h-screen items-center justify-center bg-gray-50 dark:bg-gray-900">
43+
<div className="flex min-h-screen items-center justify-center bg-[#FDFEF0]">
4644
<div className="text-center">
47-
<div className="mb-4 inline-flex h-12 w-12 animate-spin rounded-full border-4 border-gray-300 border-t-blue-600 dark:border-gray-700 dark:border-t-blue-400" />
48-
<p className="text-gray-600 dark:text-gray-400">
49-
ダッシュボードを読み込み中...
45+
<div className="mb-4 inline-flex h-12 w-12 animate-spin rounded-full border-4 border-gray-300 border-t-[#559C71]" />
46+
<p className="text-[#559C71]">
47+
Loading...
5048
</p>
5149
</div>
5250
</div>
@@ -55,27 +53,46 @@ export function DashboardContainer({ userId = 'default-user' }: DashboardContain
5553

5654
if (error || !userStatus) {
5755
return (
58-
<div className="flex min-h-screen items-center justify-center bg-gray-50 dark:bg-gray-900">
59-
<div className="rounded-lg bg-white p-8 text-center shadow-lg dark:bg-gray-800">
60-
<p className="text-red-600 dark:text-red-400">
61-
{error || 'ダッシュボードの読み込みに失敗しました'}
56+
<div className="flex min-h-screen items-center justify-center bg-[#FDFEF0]">
57+
<div className="rounded-lg bg-white p-8 text-center shadow-lg">
58+
<p className="text-red-600">
59+
{error || 'Error loading dashboard'}
6260
</p>
6361
</div>
6462
</div>
6563
);
6664
}
6765

6866
return (
69-
<main className="min-h-screen bg-gray-50 px-4 py-8 dark:bg-gray-900">
70-
<div className="mx-auto max-w-6xl space-y-8">
71-
{/* ステータスカード */}
72-
<StatusCard userStatus={userStatus} />
67+
<main className="min-h-screen bg-[#FDFEF0] px-4 py-8">
68+
<div className="mx-auto max-w-5xl space-y-12">
69+
{/* Header Section */}
70+
<div className="flex flex-col gap-4">
71+
<h1 className="text-4xl font-bold tracking-tight text-[#2C5F2D]">こんにちは</h1>
72+
73+
{/* Continue Button aligned right */}
74+
<div className="flex flex-col items-end self-end w-full max-w-xs">
75+
<span className="mb-2 text-sm font-bold text-[#2C5F2D]">前回の続きから</span>
76+
<button className="group flex w-full items-center justify-between rounded-full border-2 border-[#2C5F2D] bg-white px-6 py-3 text-lg font-bold text-[#2C5F2D] shadow-sm transition-colors hover:bg-gray-50">
77+
<span>演習タイトル</span>
78+
<span className="text-2xl">→</span>
79+
</button>
80+
</div>
81+
</div>
7382

74-
{/* バッジ一覧 */}
75-
<BadgeList badges={userStatus.badges} />
83+
{/* Tree Image Section */}
84+
<div className="flex justify-center py-8">
85+
{/* Using a placeholder for the tree image based on the mockup description */}
86+
<div className="relative h-64 w-64">
87+
{/* Fallback to a large tree emoji if no image provided */}
88+
<div className="flex h-full w-full items-center justify-center text-[10rem]">
89+
🌳
90+
</div>
91+
</div>
92+
</div>
7693

77-
{/* スキルロードマップ */}
78-
<SkillRoadmap skills={userStatus.skillRoadmap} />
94+
{/* Acquired Badges Section */}
95+
<AcquiredBadges />
7996
</div>
8097
</main>
8198
);

0 commit comments

Comments
 (0)