68 lines
2.6 KiB
TypeScript
68 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import { MockUsers } from '../data/MockUsers';
|
|
|
|
const ProfilePage: React.FC = () => {
|
|
// Find Neo Quantum in MockUsers
|
|
const profileUser = MockUsers.find(user => user.name === "Neo Quantum");
|
|
|
|
// Default values if user not found
|
|
const defaultName = "TestUser";
|
|
const defaultEmail = "user@example.com";
|
|
const defaultDreamCount = 0;
|
|
const defaultStreakDays = 0;
|
|
|
|
return (
|
|
<div className="page min-h-screen p-4">
|
|
<div className="dreamPanel flex flex-col items-center p-6">
|
|
{/* Profile Picture */}
|
|
<div className="w-32 h-32 rounded-full overflow-hidden mb-4 border-4 border-accent">
|
|
<img
|
|
src={profileUser ? `/assets/profiles/${profileUser.profilePicture}` : `https://ui-avatars.com/api/?name=${defaultName}&background=random&color=fff&size=128`}
|
|
alt={profileUser ? profileUser.name : defaultName}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
|
|
{/* User Information */}
|
|
<div className="text-center">
|
|
<h2 className="text-xl font-bold mb-2">{profileUser ? profileUser.name : defaultName}</h2>
|
|
<p className="text-text-muted mb-4">{profileUser ? profileUser.email : defaultEmail}</p>
|
|
|
|
<div className="grid grid-cols-2 gap-4 mt-6 text-center">
|
|
<div className="dreamPanel">
|
|
<p className="font-bold text-2xl">{profileUser ? profileUser.dreamCount : defaultDreamCount}</p>
|
|
<p className="text-sm text-text-muted">Dreams</p>
|
|
</div>
|
|
<div className="dreamPanel">
|
|
<p className="font-bold text-2xl">{profileUser ? profileUser.streakDays : defaultStreakDays}</p>
|
|
<p className="text-sm text-text-muted">Days Streak</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-8">
|
|
<h3 className="text-lg font-semibold mb-2">Account Settings</h3>
|
|
<div className="dreamPanel text-left">
|
|
<div className="flex justify-between items-center py-2">
|
|
<span>Notifications</span>
|
|
<label className="theme-toggle">
|
|
<input type="checkbox" defaultChecked />
|
|
<span className="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div className="flex justify-between items-center py-2">
|
|
<span>Privacy</span>
|
|
<label className="theme-toggle">
|
|
<input type="checkbox" />
|
|
<span className="slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProfilePage;
|