sulthan/internify-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

apply dialog window and add current css

Browse Source
This commit is contained in:
Kemas M. Aryadary Rasyad
2026-06-07 20:22:36 +07:00
parent 46cd26f4d2
commit eceb325836
6 changed files with 141 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Pages/internify/mentor/ProjectsInternTab.tsx
+25 -7
View File
@@ -1,6 +1,11 @@
import { useState } from 'react';
import type { Project, Intern } from '../../../lib/mockData';
import { Plus } from 'lucide-react';
import ManageInternsModal from './components/AddInternsDialog';
export default function InternsTab({ project }: { project: Project }) {
const [isModalOpen, setIsModalOpen] = useState(false);
return (
<div>
{/* Mentor */}
@@ -8,7 +13,7 @@ export default function InternsTab({ project }: { project: Project }) {
<h3 className=" font-bold text-base text-[#1a1a1a] mb-3.5">
Mentor
</h3>
<div className="border-b border-[#eee] pb-4">
<div className="border-b border-gray-300 pb-4">
<div className="flex items-center gap-3">
<span className=" text-sm text-[#333]">
{project.mentor}
@@ -19,15 +24,24 @@ export default function InternsTab({ project }: { project: Project }) {
{/* Members */}
<div>
<h3 className="font-bold text-base text-[#1a1a1a] mb-3.5">
Members
</h3>
<div className='flex justify-between mb-3.5 '>
<h3 className="font-bold text-base text-black">
Members
</h3>
<button
onClick={() => setIsModalOpen(true)}
className='bg-gray-300 border border-gray-500 px-2 py-1 rounded-xl hover:bg-gray-400 transition-colors'
>
<span className='flex items-center gap-3 text-[14px]'>
<Plus className='w-3 h-3'/>Add
</span>
</button>
</div>
{project.interns.map((intern: Intern, idx: number) => (
<div
key={idx}
className={`flex items-center justify-between py-3 ${
idx < project.interns.length - 1 ? 'border-b border-[#f0f0f0]' : ''
}`}
className={`flex items-center justify-between py-3 ${idx < project.interns.length - 1 ? 'border-b border-gray-300' : ''
}`}
>
<div className="flex items-center gap-3">
<span className=" text-sm text-[#333]">
@@ -40,6 +54,10 @@ export default function InternsTab({ project }: { project: Project }) {
</div>
))}
</div>
{isModalOpen && <ManageInternsModal
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
/>}
</div>
);
}
src/Pages/internify/mentor/TaskTab.tsx
+17 -12
View File
@@ -1,11 +1,11 @@
import type { Project, Task } from '../../../lib/mockData';
import { ClipboardList, Pencil, Trash2 } from 'lucide-react';
import { useState } from 'react';
import CreateTaskModal from './components/CreateTaskDialog';
export default function TaskTab({ project }: { project: Project }) {
const handleAddTask = () => {
console.log('Trigger modal / halaman tambah tugas');
};
const [isModalOpen, setIsModalOpen] = useState(false);
const handleEditTask = (taskTitle: string) => {
console.log('Edit task:', taskTitle);
@@ -20,9 +20,9 @@ export default function TaskTab({ project }: { project: Project }) {
{/* Header Section */}
<div className="flex justify-between items-center mb-6">
<h2 className="text-3xl font-bold text-slate-800 tracking-tight">Tasks</h2>
<button
onClick={handleAddTask}
<button
onClick={() => setIsModalOpen(true)}
className="bg-[#C0392B] hover:bg-[#A93226] text-white px-6 py-2.5 rounded-full font-bold text-sm transition-colors shadow-sm"
>
Add Task
@@ -37,9 +37,8 @@ export default function TaskTab({ project }: { project: Project }) {
project.tasks.map((task: Task, idx: number) => (
<div
key={idx}
className={`flex items-center justify-between py-4 group ${
idx < project.tasks.length - 1 ? 'border-b border-gray-100' : ''
}`}
className={`flex items-center justify-between py-4 group ${idx < project.tasks.length - 1 ? 'border-b border-gray-100' : ''
}`}
>
{/* Task Title & Icon */}
<div className="flex items-center gap-3 min-w-0">
@@ -51,14 +50,14 @@ export default function TaskTab({ project }: { project: Project }) {
{/* Action Buttons (Edit & Delete) */}
<div className="flex items-center gap-4 text-slate-600 shrink-0">
<button
<button
onClick={() => handleEditTask(task.title)}
className="hover:text-blue-600 transition-colors p-1"
title="Edit Task"
>
<Pencil size={20} />
</button>
<button
<button
onClick={() => handleDeleteTask(task.title)}
className="hover:text-red-600 transition-colors p-1"
title="Delete Task"
@@ -74,6 +73,12 @@ export default function TaskTab({ project }: { project: Project }) {
</div>
)}
</div>
{isModalOpen &&
<CreateTaskModal
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
/>
}
</div>
);
}
src/Pages/internify/mentor/components/AddInternsDialog.tsx
+1 -1
View File
@@ -47,7 +47,7 @@ export default function ManageInternsModal({ isOpen, onClose }: ManageInternsMod
return (
<dialog
ref={dialogRef}
className="fixed inset-0 m-auto flex flex-col w-[calc(100%-2rem)] max-w-[540px] max-h-[calc(100vh-4rem)] rounded-2xl border border-gray-100 bg-white p-6 shadow-2xl backdrop:bg-black/40 backdrop:backdrop-blur-sm animate-in fade-in zoom-in-95 duration-200"
className="custom-dialog"
>
{/* Search Input Area */}
<div className="relative flex items-center mb-4">
src/Pages/internify/mentor/components/CreateProjectDialog.tsx
+2 -2
View File
@@ -106,10 +106,10 @@ export default function CreateProjectModal({ isOpen, onClose }: CreateProjectMod
return (
<dialog
ref={dialogRef}
className="fixed inset-0 m-auto flex flex-col w-[calc(100%-2rem)] max-w-[620px] max-h-[calc(100vh-4rem)] rounded-2xl border border-gray-100 bg-white p-0 shadow-2xl backdrop:bg-black/40 backdrop:backdrop-blur-sm animate-in fade-in zoom-in-95 duration-200"
className="custom-dialog"
>
{/* Header Modal */}
<div className="flex items-start justify-between px-6 md:px-8 py-4 md:py-5 border-b border-gray-100">
<div className="dialog-header">
<div>
<h2 className="text-xl font-bold text-gray-900 tracking-tight">Create New Project</h2>
<p className="text-xs text-gray-400 font-medium mt-0.5">
src/Pages/internify/mentor/components/CreateTaskDialog.tsx
+2 -2
View File
@@ -51,10 +51,10 @@ export default function CreateTaskModal({ isOpen, onClose }: CreateTaskModalProp
return (
<dialog
ref={dialogRef}
className="fixed inset-0 m-auto flex flex-col w-[calc(100%-2rem)] max-w-[480px] max-h-[calc(100vh-4rem)] rounded-2xl border border-gray-100 bg-white p-0 shadow-2xl backdrop:bg-black/40 backdrop:backdrop-blur-sm animate-in fade-in zoom-in-95 duration-200"
className="custom-dialog"
>
{/* Header Modal */}
<div className="flex items-start justify-between px-6 py-5 border-b border-gray-50">
<div className="dialog-header">
<div>
<h2 className="text-xl font-bold text-[#B30000] tracking-tight">Create New Task</h2>
<p className="text-xs text-gray-400 font-medium mt-0.5">
src/index.css
+94 -1
View File
@@ -12,6 +12,25 @@
color: black;
}
@theme {
/* Dasar Warna Gelap */
--color-background: #e9e3e3;
--color-foreground: #1e282c;
--color-card: #f3f3f3;
--color-card-hover: #d5d5d5;
--color-primary: #6d180d;
--color-primary-foreground: #ffffff;
--color-border: #a8a9aa;
--radius: 0.7rem;
--color-success: #12950d;
--color-danger: #c62611;
}
.container {
padding-inline: calc(var(--spacing) * 14);
padding-block: calc(var(--spacing) * 12);
@@ -28,7 +47,11 @@
}
.box {
background-color: #ffffff;
border-radius: 12px;
padding: 10px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.page-title {
@@ -44,4 +67,74 @@
font-size: var(--text-sm) /* 0.875rem = 14px */;
color: var(--color-gray-500);
margin-top: calc(var(--spacing) * 1)
}
/* Selector utama untuk elemen dialog */
dialog.custom-dialog {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
display: flex;
flex-direction: column;
width: calc(100% - 2rem);
max-width: 540px;
max-height: calc(100vh - 4rem);
border-radius: 1rem; /* 16px */
border: 1px solid #f3f4f6; /* border-gray-100 */
background-color: #ffffff;
padding: 1.5rem; /* 24px */
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
/* Animasi (Masuk) */
animation: fadeInZoom 200ms ease-out forwards;
}
/* Pseudo-element untuk Backdrop (Latar belakang gelap) */
dialog.custom-dialog::backdrop {
background-color: rgba(0, 0, 0, 0.4); /* bg-black/40 */
backdrop-filter: blur(4px); /* backdrop-blur-sm */
}
/* Keyframes untuk animasi Tailwind (animate-in fade-in zoom-in-95) */
@keyframes fadeInZoom {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
.dialog-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
/* Padding default untuk layar kecil (px-6 py-4) */
padding-left: 1.5rem; /* 24px */
padding-right: 1.5rem; /* 24px */
padding-top: 1rem; /* 16px */
padding-bottom: 1rem; /* 16px */
border-bottom: 1px solid #f3f4f6; /* border-gray-100 */
}
/* Breakpoint Medium (md:) - Aktif saat lebar layar >= 768px */
@media (min-width: 768px) {
.box {
}
.dialog-header {
/* Perubahan padding untuk layar desktop (md:px-8 md:py-5) */
padding-left: 2rem; /* 32px */
padding-right: 2rem; /* 32px */
padding-top: 1.25rem; /* 20px */
padding-bottom: 1.25rem;/* 20px */
}
}