feat(hackathon): change "edit profile" to modal dialog
- Add "edit profile" modal dialog that can be triggered from dashboard - Update background overlay for dark mode - Update dark mode for auth callback
This commit is contained in:
Hafid Nur
@@ -176,13 +176,13 @@ const CallbackPage: FC = (): ReactElement => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex justify-center items-center min-h-screen bg-gray-50">
|
<div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950">
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
|
<div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
|
||||||
<h2 className="text-xl font-semibold text-gray-900 mb-2">
|
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
|
||||||
Completing login...
|
Completing login...
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-gray-600">Please wait</p>
|
<p className="text-gray-600 dark:text-gray-400">Please wait</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { FC, ReactElement } from 'react';
|
import { FC, ReactElement, useEffect, useState } from 'react';
|
||||||
import { Link } from 'react-router';
|
import { Link } from 'react-router';
|
||||||
import {
|
import {
|
||||||
useMyTeams,
|
useMyTeams,
|
||||||
@@ -9,16 +9,49 @@ import {
|
|||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
||||||
import { Icon } from '@iconify/react';
|
import { Icon } from '@iconify/react';
|
||||||
|
import ProfilePage from '../profile/page';
|
||||||
|
|
||||||
|
type Invitation = {
|
||||||
|
id: string;
|
||||||
|
team: {
|
||||||
|
id?: string;
|
||||||
|
name?: string;
|
||||||
|
logo?: string;
|
||||||
|
banner?: string;
|
||||||
|
description?: string;
|
||||||
|
city?: string;
|
||||||
|
visibility?: string;
|
||||||
|
leader_id?: string;
|
||||||
|
};
|
||||||
|
inviter: {
|
||||||
|
id?: string;
|
||||||
|
fullname?: string;
|
||||||
|
email?: string;
|
||||||
|
avatar?: string;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
const DashboardPage: FC = (): ReactElement => {
|
const DashboardPage: FC = (): ReactElement => {
|
||||||
const { session } = useAuthStore();
|
const { session } = useAuthStore();
|
||||||
|
const [showProfileModal, setShowProfileModal] = useState(false);
|
||||||
|
// Lock background scroll when profile modal is open
|
||||||
|
useEffect(() => {
|
||||||
|
if (showProfileModal) {
|
||||||
|
const originalOverflow = document.body.style.overflow;
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
return () => {
|
||||||
|
document.body.style.overflow = originalOverflow || '';
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}, [showProfileModal]);
|
||||||
const { data: teamsData } = useMyTeams();
|
const { data: teamsData } = useMyTeams();
|
||||||
const { data: invitationsData } = useMyInvitations();
|
const { data: invitationsData } = useMyInvitations();
|
||||||
const { mutateAsync: respondToInvitation } = useRespondToInvitation();
|
const { mutateAsync: respondToInvitation } = useRespondToInvitation();
|
||||||
|
|
||||||
const user = session?.user;
|
const user = session?.user;
|
||||||
const myTeams = teamsData?.data || [];
|
const myTeams = teamsData?.data || [];
|
||||||
const invitations = invitationsData?.data || [];
|
const invitations: Invitation[] = (invitationsData?.data ||
|
||||||
|
[]) as Invitation[];
|
||||||
|
|
||||||
const handleAcceptInvitation = async (invitationId: string) => {
|
const handleAcceptInvitation = async (invitationId: string) => {
|
||||||
try {
|
try {
|
||||||
@@ -41,225 +74,233 @@ const DashboardPage: FC = (): ReactElement => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="p-6 md:p-8 md:max-w-7xl w-full mx-auto overflow-hidden">
|
<>
|
||||||
<div className="mb-8">
|
<div className="p-6 md:p-8 md:max-w-7xl w-full mx-auto">
|
||||||
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
|
<div className="mb-8">
|
||||||
Welcome, {user?.fullname || user?.email?.split('@')[0] || 'User'}!
|
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
|
||||||
</h1>
|
Welcome, {user?.fullname || user?.email?.split('@')[0] || 'User'}!
|
||||||
{user?.location && (
|
</h1>
|
||||||
<p className="text-gray-600 dark:text-gray-400 mt-1 font-sans flex items-center space-x-1">
|
{user?.location && (
|
||||||
<Icon icon="heroicons:map-pin-16-solid" width="24" height="24" />
|
<p className="text-gray-600 dark:text-gray-400 mt-1 font-sans flex items-center space-x-1">
|
||||||
<span>{user.location}</span>
|
<Icon icon="heroicons:map-pin-16-solid" width="24" height="24" />
|
||||||
</p>
|
<span>{user.location}</span>
|
||||||
)}
|
</p>
|
||||||
</div>
|
)}
|
||||||
|
|
||||||
{invitations.length > 0 && (
|
|
||||||
<div className="mb-8 bg-primary-50 dark:bg-blue-900/20 border border-primary-200 dark:border-blue-800 rounded-lg p-6">
|
|
||||||
<h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
|
|
||||||
Team Invitations ({invitations.length})
|
|
||||||
</h2>
|
|
||||||
<div className="space-y-3 font-sans">
|
|
||||||
{invitations.map((invitation) => (
|
|
||||||
<div
|
|
||||||
key={invitation.id}
|
|
||||||
className="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-sm flex items-center justify-between"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<p className="font-medium text-gray-900 dark:text-white">
|
|
||||||
{invitation.team.name}
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
||||||
Invited by {invitation.inviter.fullname}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex space-x-2">
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
onClick={() => handleAcceptInvitation(invitation.id)}
|
|
||||||
>
|
|
||||||
Accept
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="secondary"
|
|
||||||
onClick={() => handleRejectInvitation(invitation.id)}
|
|
||||||
>
|
|
||||||
Decline
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
|
|
||||||
{myTeams.length > 0 ? (
|
{invitations.length > 0 && (
|
||||||
<div className="mb-6 md:mb-8">
|
<div className="mb-8 bg-primary-50 dark:bg-blue-900/20 border border-primary-200 dark:border-blue-800 rounded-lg p-6">
|
||||||
<h2 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
|
<h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
|
||||||
My Team
|
Team Invitations ({invitations.length})
|
||||||
</h2>
|
</h2>
|
||||||
<div className="grid grid-cols-1 gap-4 md:gap-6 w-full md:max-w-lg">
|
<div className="space-y-3 font-sans">
|
||||||
{myTeams.map((team) => (
|
{invitations.map((invitation) => (
|
||||||
<Link
|
<div
|
||||||
key={team.id}
|
key={invitation.id}
|
||||||
to={'/teams/' + team.id}
|
className="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-sm flex items-center justify-between"
|
||||||
className="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
|
>
|
||||||
>
|
<div>
|
||||||
{team.banner && (
|
<p className="font-medium text-gray-900 dark:text-white">
|
||||||
<div className="w-full aspect-3/1">
|
{invitation.team?.name ?? 'Unnamed Team'}
|
||||||
<img
|
</p>
|
||||||
src={team.banner}
|
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||||
alt={team.name}
|
Invited by{' '}
|
||||||
className="w-full h-full object-cover"
|
{invitation.inviter?.fullname ?? 'Unknown User'}
|
||||||
/>
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex space-x-2">
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleAcceptInvitation(invitation.id)}
|
||||||
|
>
|
||||||
|
Accept
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="secondary"
|
||||||
|
onClick={() => handleRejectInvitation(invitation.id)}
|
||||||
|
>
|
||||||
|
Decline
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{myTeams.length > 0 ? (
|
||||||
|
<div className="mb-6 md:mb-8">
|
||||||
|
<h2 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
|
||||||
|
My Team
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 gap-4 md:gap-6 w-full md:max-w-lg">
|
||||||
|
{myTeams.map((team) => (
|
||||||
|
<Link
|
||||||
|
key={team.id}
|
||||||
|
to={'/teams/' + team.id}
|
||||||
|
className="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
|
||||||
|
>
|
||||||
|
{team.banner && (
|
||||||
|
<div className="w-full aspect-3/1">
|
||||||
|
<img
|
||||||
|
src={team.banner}
|
||||||
|
alt={team.name}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="p-4">
|
||||||
|
<div className="flex flex-col md:flex-row items-center space-y-3 space-x-3 -mt-14 md:mt-0 mb-2 md:mb-3 min-w-12 min-h-12 ">
|
||||||
|
{team.logo && (
|
||||||
|
<img
|
||||||
|
src={team.logo}
|
||||||
|
alt={team.name}
|
||||||
|
className="w-20 h-20 rounded-full object-cover shrink-0 border-black dark:border-gray-700"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl md:text-lg font-bold text-gray-900 dark:text-white leading-tight">
|
||||||
|
{team.name}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-gray-600 dark:text-gray-400 flex items-center">
|
||||||
|
<Icon
|
||||||
|
icon="heroicons:map-pin-16-solid"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
/>
|
||||||
|
<span className="ml-1">{team.city}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 line-clamp-3 text-ellipsis font-sans">
|
||||||
|
{team.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="mb-6 md:mb-8 bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 md:p-8">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-3xl md:text-4xl mb-2 md:mb-3">👋</div>
|
||||||
|
<h2 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-1 md:mb-2">
|
||||||
|
You are not in a team yet
|
||||||
|
</h2>
|
||||||
|
<p className="text-sm md:text-base text-gray-600 dark:text-gray-400 font-sans">
|
||||||
|
Use the sidebar to browse teams or create your own
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="mt-8 bg-white dark:bg-gray-900 rounded-xl shadow-lg">
|
||||||
|
<div className="bg-linear-to-r from-primary-600 to-primary-500 h-24 rounded-t-xl"></div>
|
||||||
|
<div className="px-4 md:px-8 pb-4 md:pb-8 max-w-7xl">
|
||||||
|
<div className="flex flex-col md:flex-row md:items-start -mt-12 mb-4 md:mb-6">
|
||||||
|
<div className="flex flex-col md:flex-row items-start">
|
||||||
|
{user?.avatar ? (
|
||||||
|
<img
|
||||||
|
src={user.avatar}
|
||||||
|
alt={user.fullname || 'User'}
|
||||||
|
className="w-20 h-20 md:w-24 md:h-24 rounded-full border-4 border-white dark:border-gray-700 shadow-lg object-cover"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-20 h-20 md:w-24 md:h-24 rounded-full border-4 border-white dark:border-gray-700 shadow-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
|
||||||
|
<span className="text-gray-400 dark:text-gray-500 text-3xl md:text-4xl font-sans">
|
||||||
|
U
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="p-4">
|
<div className="md:ml-6 mt-4 md:mt-14">
|
||||||
<div className="flex flex-col md:flex-row items-center space-y-3 space-x-3 -mt-14 md:mt-0 mb-2 md:mb-3 min-w-12 min-h-12 ">
|
<h2 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white">
|
||||||
{team.logo && (
|
{user?.fullname ||
|
||||||
<img
|
user?.email?.split('@')[0] ||
|
||||||
src={team.logo}
|
'Unnamed User'}
|
||||||
alt={team.name}
|
</h2>
|
||||||
className="w-20 h-20 rounded-full object-cover shrink-0 border-black dark:border-gray-700"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<div>
|
|
||||||
<h3 className="text-xl md:text-lg font-bold text-gray-900 dark:text-white leading-tight">
|
|
||||||
{team.name}
|
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-gray-600 dark:text-gray-400 flex items-center">
|
|
||||||
<Icon
|
|
||||||
icon="heroicons:map-pin-16-solid"
|
|
||||||
width="16"
|
|
||||||
height="16"
|
|
||||||
/>
|
|
||||||
<span className="ml-1">{team.city}</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p className="text-gray-600 dark:text-gray-400 line-clamp-3 text-ellipsis font-sans">
|
|
||||||
{team.description}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="mb-6 md:mb-8 bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 md:p-8">
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-3xl md:text-4xl mb-2 md:mb-3">👋</div>
|
|
||||||
<h2 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-1 md:mb-2">
|
|
||||||
You are not in a team yet
|
|
||||||
</h2>
|
|
||||||
<p className="text-sm md:text-base text-gray-600 dark:text-gray-400 font-sans">
|
|
||||||
Use the sidebar to browse teams or create your own
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="mt-8 bg-white dark:bg-gray-900 rounded-xl shadow-lg">
|
{user?.location ? (
|
||||||
<div className="bg-linear-to-r from-primary-600 to-primary-500 h-24 rounded-t-xl"></div>
|
<p className="text-gray-600 dark:text-gray-400 flex items-center mt-1 text-sm md:text-base font-sans">
|
||||||
<div className="px-4 md:px-8 pb-4 md:pb-8 max-w-7xl">
|
<Icon
|
||||||
<div className="flex flex-col md:flex-row md:items-start -mt-12 mb-4 md:mb-6">
|
icon="heroicons:map-pin-16-solid"
|
||||||
<div className="flex flex-col md:flex-row items-start">
|
width="16"
|
||||||
{user?.avatar ? (
|
height="16"
|
||||||
<img
|
/>
|
||||||
src={user.avatar}
|
<span className="ml-1">{user.location}</span>
|
||||||
alt={user.fullname || 'User'}
|
</p>
|
||||||
className="w-20 h-20 md:w-24 md:h-24 rounded-full border-4 border-white dark:border-gray-700 shadow-lg object-cover"
|
) : (
|
||||||
/>
|
<Link
|
||||||
) : (
|
to="/onboarding/user"
|
||||||
<div className="w-20 h-20 md:w-24 md:h-24 rounded-full border-4 border-white dark:border-gray-700 shadow-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
|
className="text-primary-500 dark:text-blue-400 hover:text-primary-600 dark:hover:text-blue-300 text-sm md:text-sm mt-1 flex items-center"
|
||||||
<span className="text-gray-400 dark:text-gray-500 text-3xl md:text-4xl font-sans">
|
>
|
||||||
U
|
<span className="font-sans">Complete your profile</span>
|
||||||
</span>
|
<Icon
|
||||||
|
icon="ic:baseline-chevron-right"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{user?.location && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setShowProfileModal(true)}
|
||||||
|
className="mt-3 md:mt-14 md:ml-auto inline-flex items-center justify-center px-3 py-1.5 md:px-4 md:py-2 bg-primary-500 text-white rounded-lg text md:text-sm font-medium shadow-sm hover:bg-primary-600 transition-colors w-full md:w-auto cursor-pointer"
|
||||||
|
>
|
||||||
|
Edit Profile
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="space-y-4 md:space-y-6 w-full max-w-full">
|
||||||
|
{user?.bio && (
|
||||||
|
<div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm w-full max-w-full overflow-x-hidden">
|
||||||
|
<h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide mb-2">
|
||||||
|
About
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-800 dark:text-gray-200 leading-relaxed line-clamp-3 wrap-break-word break-all overflow-hidden w-full max-w-full">
|
||||||
|
{user.bio}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="md:ml-6 mt-4 md:mt-14">
|
|
||||||
<h2 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white">
|
|
||||||
{user?.fullname ||
|
|
||||||
user?.email?.split('@')[0] ||
|
|
||||||
'Unnamed User'}
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
{user?.location ? (
|
|
||||||
<p className="text-gray-600 dark:text-gray-400 flex items-center mt-1 text-sm md:text-base font-sans">
|
|
||||||
<Icon
|
|
||||||
icon="heroicons:map-pin-16-solid"
|
|
||||||
width="16"
|
|
||||||
height="16"
|
|
||||||
/>
|
|
||||||
<span className="ml-1">{user.location}</span>
|
|
||||||
</p>
|
|
||||||
) : (
|
|
||||||
<Link
|
|
||||||
to="/onboarding/user"
|
|
||||||
className="text-primary-500 dark:text-blue-400 hover:text-primary-600 dark:hover:text-blue-300 text-sm md:text-sm mt-1 flex items-center"
|
|
||||||
>
|
|
||||||
<span className="font-sans">Complete your profile</span>
|
|
||||||
<Icon
|
|
||||||
icon="ic:baseline-chevron-right"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
/>
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{user?.location && (
|
|
||||||
<Link
|
|
||||||
to="/profile"
|
|
||||||
className="mt-3 md:mt-14 md:ml-auto inline-flex items-center justify-center px-3 py-1.5 md:px-4 md:py-2 bg-primary-500 text-white rounded-lg text md:text-sm font-medium shadow-sm hover:bg-primary-600 transition-colors w-full md:w-auto"
|
|
||||||
>
|
|
||||||
Edit Profile
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="space-y-4 md:space-y-6 w-full max-w-full">
|
|
||||||
{user?.bio && (
|
|
||||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm w-full max-w-full overflow-x-hidden">
|
|
||||||
<h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide mb-2">
|
|
||||||
About
|
|
||||||
</h3>
|
|
||||||
<p className="text-gray-800 dark:text-gray-200 leading-relaxed line-clamp-3 wrap-break-word break-all overflow-hidden w-full max-w-full">
|
|
||||||
{user.bio}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm">
|
|
||||||
<h3 className="font-semibold text-gray-700 dark:text-gray-300 tracking-wide mb-3">
|
|
||||||
Contact
|
|
||||||
</h3>
|
|
||||||
<div className="flex items-center text-gray-700 dark:text-gray-300">
|
|
||||||
<span className="text-gray-900 dark:text-white">
|
|
||||||
{user?.email}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{user?.skills && user.skills.length > 0 && (
|
|
||||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm">
|
<div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm">
|
||||||
<h3 className="font-semibold text-gray-700 dark:text-gray-300 tracking-wide mb-3">
|
<h3 className="font-semibold text-gray-700 dark:text-gray-300 tracking-wide mb-3">
|
||||||
Skills
|
Contact
|
||||||
</h3>
|
</h3>
|
||||||
<div className="flex flex-wrap gap-2">
|
<div className="flex items-center text-gray-700 dark:text-gray-300">
|
||||||
{user.skills.map((skill: string) => (
|
<span className="text-gray-900 dark:text-white">
|
||||||
<span
|
{user?.email}
|
||||||
key={skill}
|
</span>
|
||||||
className="inline-flex items-center px-4 py-2 border border-primary-600 dark:border-gray-500 text-primary-600 dark:text-white rounded-4xl text-xs font-medium dark:bg-gray-600"
|
|
||||||
>
|
|
||||||
{skill}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
{user?.skills && user.skills.length > 0 && (
|
||||||
|
<div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm">
|
||||||
|
<h3 className="font-semibold text-gray-700 dark:text-gray-300 tracking-wide mb-3">
|
||||||
|
Skills
|
||||||
|
</h3>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{user.skills.map((skill: string) => (
|
||||||
|
<span
|
||||||
|
key={skill}
|
||||||
|
className="inline-flex items-center px-4 py-2 border border-primary-600 dark:border-gray-500 text-primary-600 dark:text-white rounded-4xl text-xs font-medium dark:bg-gray-600"
|
||||||
|
>
|
||||||
|
{skill}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<ProfilePage
|
||||||
|
open={showProfileModal}
|
||||||
|
onClose={() => setShowProfileModal(false)}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -187,12 +187,12 @@ export default function HomePage() {
|
|||||||
</button>
|
</button>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<a
|
<button
|
||||||
href="#masuk"
|
onClick={() => navigate('/auth/login')}
|
||||||
className="ms-3 text-gray-600 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white"
|
className="ms-3 text-gray-600 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white cursor-pointer"
|
||||||
>
|
>
|
||||||
Masuk
|
Masuk
|
||||||
</a>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => navigate('/auth/login')}
|
onClick={() => navigate('/auth/login')}
|
||||||
className="px-4 py-2 bg-primary-500 text-white text-base rounded-lg hover:bg-primary-600 transition-colors text-center cursor-pointer"
|
className="px-4 py-2 bg-primary-500 text-white text-base rounded-lg hover:bg-primary-600 transition-colors text-center cursor-pointer"
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
import { FC, ReactElement, useState, useEffect } from 'react';
|
import { FC, ReactElement, useState, useEffect } from 'react';
|
||||||
import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
|
import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
|
||||||
import { Button, Textarea } from '@imphnen-frontend-service/ui/atoms';
|
import { Button, Textarea } from '@imphnen-frontend-service/ui/atoms';
|
||||||
import { useNavigate, Link } from 'react-router';
|
|
||||||
import { useForm, Controller } from 'react-hook-form';
|
import { useForm, Controller } from 'react-hook-form';
|
||||||
import {
|
import {
|
||||||
userEditProfileSchema,
|
userEditProfileSchema,
|
||||||
@@ -26,8 +25,15 @@ const ROLE_OPTIONS = [
|
|||||||
'Mobile Developer',
|
'Mobile Developer',
|
||||||
];
|
];
|
||||||
|
|
||||||
const ProfilePage: FC = (): ReactElement => {
|
type ProfileModalProps = {
|
||||||
const navigate = useNavigate();
|
open: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
const ProfilePage: FC<ProfileModalProps> = ({
|
||||||
|
open,
|
||||||
|
onClose,
|
||||||
|
}): ReactElement | null => {
|
||||||
const [avatarFile, setAvatarFile] = useState<File | null>(null);
|
const [avatarFile, setAvatarFile] = useState<File | null>(null);
|
||||||
const [avatarPreview, setAvatarPreview] = useState<string>('');
|
const [avatarPreview, setAvatarPreview] = useState<string>('');
|
||||||
|
|
||||||
@@ -123,8 +129,8 @@ const ProfilePage: FC = (): ReactElement => {
|
|||||||
// Wait a bit for the onSuccess handler to update localStorage
|
// Wait a bit for the onSuccess handler to update localStorage
|
||||||
await new Promise((resolve) => setTimeout(resolve, 100));
|
await new Promise((resolve) => setTimeout(resolve, 100));
|
||||||
|
|
||||||
// Navigate back to dashboard
|
// Close modal
|
||||||
navigate('/dashboard');
|
onClose();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Profile update failed:', error);
|
console.error('Profile update failed:', error);
|
||||||
toast.error(
|
toast.error(
|
||||||
@@ -137,65 +143,23 @@ const ProfilePage: FC = (): ReactElement => {
|
|||||||
|
|
||||||
const isLoading = isUpdating || isUploading;
|
const isLoading = isUpdating || isUploading;
|
||||||
|
|
||||||
return (
|
return open ? (
|
||||||
<div className=" bg-black/30 dark:bg-black/50 backdrop-blur-sm flex flex-col justify-center items-center px-4 py-8 z-50 overflow-y-auto">
|
<div className="fixed inset-0 bg-black/30 dark:bg-black/50 backdrop-blur-md z-50 overflow-y-auto">
|
||||||
<div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-xl border dark:boder-gray-800">
|
<div className="min-h-full flex items-center justify-center">
|
||||||
<div className="mb-6">
|
<div className="bg-white dark:bg-gray-900 w-full max-w-md mx-4 my-6 sm:my-8 p-8 rounded-xl border dark:boder-gray-800">
|
||||||
<div className="flex items-center justify-between mb-2">
|
<div className="mb-6">
|
||||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
|
<div className="flex items-center justify-between mb-2">
|
||||||
Edit Profile
|
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||||
</h1>
|
Edit Profile
|
||||||
<Link
|
</h1>
|
||||||
to="/dashboard"
|
<button
|
||||||
className="text-gray-500 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-neutral-200"
|
type="button"
|
||||||
>
|
onClick={onClose}
|
||||||
<svg
|
className="text-gray-500 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-neutral-200 cursor-pointer"
|
||||||
className="w-6 h-6"
|
aria-label="Close profile modal"
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M6 18L18 6M6 6l12 12"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<p className="text-gray-600 font-sans dark:text-neutral-400">
|
|
||||||
Update your photo and name
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form onSubmit={onSubmit} className="space-y-6">
|
|
||||||
{/* Avatar Upload */}
|
|
||||||
<div className="flex flex-col items-center space-y-4">
|
|
||||||
<div className="relative group">
|
|
||||||
{avatarPreview ? (
|
|
||||||
<img
|
|
||||||
src={avatarPreview}
|
|
||||||
alt="Avatar preview"
|
|
||||||
className="w-32 h-32 rounded-full object-cover border-4 border-gray-200 dark:border-neutral-700 group-hover:border-blue-400 dark:group-hover:border-blue-500 transition-colors"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="w-32 h-32 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center group-hover:bg-gray-300 dark:group-hover:bg-gray-600 transition-colors">
|
|
||||||
<Icon
|
|
||||||
icon="ic:baseline-person"
|
|
||||||
width="48"
|
|
||||||
height="48"
|
|
||||||
className="text-gray-400 dark:text-neutral-500"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{/* Camera overlay */}
|
|
||||||
<label
|
|
||||||
htmlFor="avatar"
|
|
||||||
className="absolute bottom-0 right-0 bg-primary-500 text-white p-2 rounded-full cursor-pointer hover:bg-primary-600 transition-colors shadow-lg"
|
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
className="w-5 h-5"
|
className="w-6 h-6"
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
@@ -204,176 +168,222 @@ const ProfilePage: FC = (): ReactElement => {
|
|||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
strokeWidth={2}
|
strokeWidth={2}
|
||||||
d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
|
d="M6 18L18 6M6 6l12 12"
|
||||||
/>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"
|
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<input
|
</button>
|
||||||
id="avatar"
|
|
||||||
type="file"
|
|
||||||
accept="image/*"
|
|
||||||
className="hidden"
|
|
||||||
onChange={handleAvatarChange}
|
|
||||||
disabled={isLoading}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
</div>
|
</div>
|
||||||
<p className="text-sm text-gray-500 dark:text-neutral-400 text-center font-sans">
|
<p className="text-gray-600 font-sans dark:text-neutral-400">
|
||||||
Click the camera icon to change your photo
|
Update your photo and name
|
||||||
<br />
|
|
||||||
Format: JPG, PNG. Max 5MB
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Full Name */}
|
<form onSubmit={onSubmit} className="space-y-6">
|
||||||
<ControlledInputField
|
{/* Avatar Upload */}
|
||||||
control={form.control}
|
<div className="flex flex-col items-center space-y-4">
|
||||||
label="Full Name"
|
<div className="relative group">
|
||||||
placeholder="Enter your full name"
|
{avatarPreview ? (
|
||||||
name="fullname"
|
<img
|
||||||
size="lg"
|
src={avatarPreview}
|
||||||
/>
|
alt="Avatar preview"
|
||||||
|
className="w-24 h-24 rounded-full object-cover border-4 border-gray-200 dark:border-neutral-700 group-hover:border-blue-400 dark:group-hover:border-blue-500 transition-colors"
|
||||||
{/* City */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="block text-label1 font-medium text-neutral-800 dark:text-neutral-300">
|
|
||||||
City
|
|
||||||
</label>
|
|
||||||
<Controller
|
|
||||||
control={form.control}
|
|
||||||
name="location"
|
|
||||||
render={({ field, fieldState }) => (
|
|
||||||
<CitySelect
|
|
||||||
value={field.value}
|
|
||||||
onChange={field.onChange}
|
|
||||||
error={fieldState.error?.message}
|
|
||||||
placeholder="Search your city..."
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Role/Skills */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="block text-label1 font-medium text-gray-700 dark:text-neutral-300">
|
|
||||||
Role / Skills
|
|
||||||
</label>
|
|
||||||
<Controller
|
|
||||||
control={form.control}
|
|
||||||
name="skills"
|
|
||||||
render={({ field }) => (
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="grid grid-cols-2 gap-2">
|
|
||||||
{ROLE_OPTIONS.map((role) => (
|
|
||||||
<label
|
|
||||||
key={role}
|
|
||||||
className="flex items-center space-x-2 cursor-pointer font-sans"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={field.value?.includes(role)}
|
|
||||||
onChange={(e) => {
|
|
||||||
const newValue = e.target.checked
|
|
||||||
? [...(field.value || []), role]
|
|
||||||
: (field.value || []).filter((v) => v !== role);
|
|
||||||
field.onChange(newValue);
|
|
||||||
}}
|
|
||||||
className="rounded border-gray-300 dark:border-neutral-600 text-blue-600 focus:ring-blue-500 dark:bg-gray-800"
|
|
||||||
/>
|
|
||||||
<span className="text-sm dark:text-neutral-300">
|
|
||||||
{role}
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Bio */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="block text-label1 font-medium text-gray-700 dark:text-neutral-300">
|
|
||||||
Bio{' '}
|
|
||||||
<span className="text-gray-400 dark:text-neutral-500">
|
|
||||||
(Optional)
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
<Controller
|
|
||||||
control={form.control}
|
|
||||||
name="bio"
|
|
||||||
render={({ field, fieldState }) => (
|
|
||||||
<div>
|
|
||||||
<Textarea
|
|
||||||
{...field}
|
|
||||||
placeholder="Tell us about yourself..."
|
|
||||||
rows={4}
|
|
||||||
className="w-full font-sans"
|
|
||||||
size="lg"
|
|
||||||
/>
|
/>
|
||||||
{fieldState.error && (
|
) : (
|
||||||
<p className="text-sm text-red-500 mt-1">
|
<div className="w-24 h-24 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center group-hover:bg-gray-300 dark:group-hover:bg-gray-600 transition-colors">
|
||||||
{fieldState.error.message}
|
<Icon
|
||||||
</p>
|
icon="ic:baseline-person"
|
||||||
)}
|
width="48"
|
||||||
</div>
|
height="48"
|
||||||
)}
|
className="text-gray-400 dark:text-neutral-500"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
{/* Action Buttons */}
|
{/* Camera overlay */}
|
||||||
<div className="flex space-x-3 pt-4">
|
<label
|
||||||
<Button
|
htmlFor="avatar"
|
||||||
type="button"
|
className="absolute bottom-0 right-0 bg-primary-500 text-white p-2 rounded-full cursor-pointer hover:bg-primary-600 transition-colors shadow-lg"
|
||||||
variant="secondary"
|
>
|
||||||
className="flex-1"
|
|
||||||
onClick={() => navigate('/dashboard')}
|
|
||||||
disabled={isLoading}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
className="flex-1"
|
|
||||||
disabled={isLoading || !form.formState.isValid}
|
|
||||||
>
|
|
||||||
{isLoading ? (
|
|
||||||
<span className="flex items-center justify-center">
|
|
||||||
<svg
|
<svg
|
||||||
className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
|
className="w-5 h-5"
|
||||||
fill="none"
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
>
|
>
|
||||||
<circle
|
<path
|
||||||
className="opacity-25"
|
strokeLinecap="round"
|
||||||
cx="12"
|
strokeLinejoin="round"
|
||||||
cy="12"
|
strokeWidth={2}
|
||||||
r="10"
|
d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="4"
|
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
className="opacity-75"
|
strokeLinecap="round"
|
||||||
fill="currentColor"
|
strokeLinejoin="round"
|
||||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
strokeWidth={2}
|
||||||
|
d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
Saving...
|
<input
|
||||||
|
id="avatar"
|
||||||
|
type="file"
|
||||||
|
accept="image/*"
|
||||||
|
className="hidden"
|
||||||
|
onChange={handleAvatarChange}
|
||||||
|
disabled={isLoading}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-gray-500 dark:text-neutral-400 text-center font-sans">
|
||||||
|
Click the camera icon to change your photo
|
||||||
|
<br />
|
||||||
|
Format: JPG, PNG. Max 5MB
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Full Name */}
|
||||||
|
<ControlledInputField
|
||||||
|
control={form.control}
|
||||||
|
label="Full Name"
|
||||||
|
placeholder="Enter your full name"
|
||||||
|
name="fullname"
|
||||||
|
size="lg"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* City */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="block text-label1 font-medium text-neutral-800 dark:text-neutral-300">
|
||||||
|
City
|
||||||
|
</label>
|
||||||
|
<Controller
|
||||||
|
control={form.control}
|
||||||
|
name="location"
|
||||||
|
render={({ field, fieldState }) => (
|
||||||
|
<CitySelect
|
||||||
|
value={field.value ?? ''}
|
||||||
|
onChange={field.onChange}
|
||||||
|
error={fieldState.error?.message}
|
||||||
|
placeholder="Search your city..."
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Role/Skills */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="block text-label1 font-medium text-gray-700 dark:text-neutral-300">
|
||||||
|
Role / Skills
|
||||||
|
</label>
|
||||||
|
<Controller
|
||||||
|
control={form.control}
|
||||||
|
name="skills"
|
||||||
|
render={({ field }) => (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
{ROLE_OPTIONS.map((role) => (
|
||||||
|
<label
|
||||||
|
key={role}
|
||||||
|
className="flex items-center space-x-2 cursor-pointer font-sans"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={field.value?.includes(role)}
|
||||||
|
onChange={(e) => {
|
||||||
|
const newValue = e.target.checked
|
||||||
|
? [...(field.value || []), role]
|
||||||
|
: (field.value || []).filter((v) => v !== role);
|
||||||
|
field.onChange(newValue);
|
||||||
|
}}
|
||||||
|
className="rounded border-gray-300 dark:border-neutral-600 text-blue-600 focus:ring-blue-500 dark:bg-gray-800"
|
||||||
|
/>
|
||||||
|
<span className="text-sm dark:text-neutral-300">
|
||||||
|
{role}
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bio */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="block text-label1 font-medium text-gray-700 dark:text-neutral-300">
|
||||||
|
Bio{' '}
|
||||||
|
<span className="text-gray-400 dark:text-neutral-500">
|
||||||
|
(Optional)
|
||||||
</span>
|
</span>
|
||||||
) : (
|
</label>
|
||||||
'Save'
|
<Controller
|
||||||
)}
|
control={form.control}
|
||||||
</Button>
|
name="bio"
|
||||||
</div>
|
render={({ field, fieldState }) => (
|
||||||
</form>
|
<div>
|
||||||
|
<Textarea
|
||||||
|
{...field}
|
||||||
|
placeholder="Tell us about yourself..."
|
||||||
|
rows={4}
|
||||||
|
className="w-full font-sans"
|
||||||
|
size="lg"
|
||||||
|
/>
|
||||||
|
{fieldState.error && (
|
||||||
|
<p className="text-sm text-red-500 mt-1">
|
||||||
|
{fieldState.error.message}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Action Buttons */}
|
||||||
|
<div className="flex space-x-3 pt-4">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="secondary"
|
||||||
|
className="flex-1"
|
||||||
|
onClick={onClose}
|
||||||
|
disabled={isLoading}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
className="flex-1"
|
||||||
|
disabled={isLoading || !form.formState.isValid}
|
||||||
|
>
|
||||||
|
{isLoading ? (
|
||||||
|
<span className="flex items-center justify-center">
|
||||||
|
<svg
|
||||||
|
className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<circle
|
||||||
|
className="opacity-25"
|
||||||
|
cx="12"
|
||||||
|
cy="12"
|
||||||
|
r="10"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="4"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
className="opacity-75"
|
||||||
|
fill="currentColor"
|
||||||
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
Saving...
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
'Save'
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
) : null;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ProfilePage;
|
export default ProfilePage;
|
||||||
|
|||||||
@@ -194,7 +194,7 @@ const TeamDashboardPage: FC = (): ReactElement => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Loading Overlay */}
|
{/* Loading Overlay */}
|
||||||
<div className="fixed inset-0 bg-white/60 flex items-center justify-center z-50">
|
<div className="fixed inset-0 bg-white/60 dark:bg-black/50 flex items-center justify-center z-50">
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<div className="inline-block animate-spin rounded-full h-12 w-12 border-4 border-blue-600 border-t-transparent"></div>
|
<div className="inline-block animate-spin rounded-full h-12 w-12 border-4 border-blue-600 border-t-transparent"></div>
|
||||||
<p className="mt-4 text-gray-600 dark:text-white">
|
<p className="mt-4 text-gray-600 dark:text-white">
|
||||||
|
|||||||
Reference in New Issue
Block a user