Kemas M. Aryadary Rasyad
e59e63a21e
- Removed unused imports and interfaces in HomeProjectList component. - Added ArrowDownNarrowWide icon to ProjectTimeline component for visual enhancement. - Updated layout imports to reflect new component structure. - Created BaseProjectsPage for mentor to manage projects with navigation. - Introduced MentorCertificatePage as a placeholder for future certificate functionality. - Deleted obsolete HomeMentorPage and replaced it with HomePage for mentor dashboard. - Added InternsPage and updated MentorInternPage for better intern management. - Implemented ProjectForumTab and ProjectsInternTab for project details and intern listings. - Developed TaskTab for task management within projects. - Created SidebarMentor for navigation in mentor dashboard. - Enhanced login functionality with user role-based navigation. - Updated mockData to include task submission counts and certificate data structure. - Added new assets for certificate representation.
71 lines
2.4 KiB
TypeScript
71 lines
2.4 KiB
TypeScript
import { useState } from 'react';
|
|
import { useNavigate, useParams } from 'react-router-dom';
|
|
import { mockProjects } from '../../../lib/mockData';
|
|
import ForumTab from './ForumTab';
|
|
import ParticipantsTab from './ParticipantTab';
|
|
import { ChevronLeft } from 'lucide-react';
|
|
|
|
// ─── ProjectDetailPage ─────────────────────────────────────────────────────────
|
|
export default function ProjectDetailPage() {
|
|
const { id } = useParams<{ id: string }>();
|
|
const navigate = useNavigate();
|
|
const [activeTab, setActiveTab] = useState<'forum' | 'participants'>('forum');
|
|
|
|
const handleBack = () => {
|
|
if (window.history.length > 1) {
|
|
navigate(-1);
|
|
} else {
|
|
navigate('/intern/projects');
|
|
}
|
|
};
|
|
|
|
const project = mockProjects.find((p) => p.id === Number(id));
|
|
|
|
if (!project) {
|
|
return (
|
|
<div className="p-10 text-[#888]">
|
|
Project tidak ditemukan.
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const tabClass = (tab: string) =>
|
|
`pr-0 py-2.5 mr-7 text-sm bg-transparent border-0 cursor-pointer transition-colors duration-150 border-b-2 ${activeTab === tab
|
|
? 'font-bold text-[#C0392B] border-[#C0392B]'
|
|
: 'font-medium text-[#666] border-transparent'
|
|
}`;
|
|
|
|
return (
|
|
<div className="bg-gray-50 min-h-screen">
|
|
<div className="px-24 py-10">
|
|
|
|
{/* Back Button */}
|
|
<button
|
|
onClick={handleBack}
|
|
className="flex items-center gap-2 mb-6 text-sm font-medium text-[#666] hover:text-[#C0392B] transition-colors duration-150 group"
|
|
>
|
|
<span className='flex flex-row gap-2'>
|
|
<ChevronLeft width={20} height={20} className="transition-transform duration-150 group-hover:-translate-x-1" />
|
|
Kembali ke Daftar Project
|
|
</span>
|
|
</button>
|
|
|
|
{/* Tabs */}
|
|
<div className="flex mb-4">
|
|
<button className={tabClass('forum')} onClick={() => setActiveTab('forum')}>
|
|
Forum
|
|
</button>
|
|
<button className={tabClass('participants')} onClick={() => setActiveTab('participants')}>
|
|
Participants
|
|
</button>
|
|
</div>
|
|
|
|
{/* Tab content */}
|
|
{activeTab === 'forum'
|
|
? <ForumTab project={project} />
|
|
: <ParticipantsTab project={project} />
|
|
}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |