From eceb3258364e756a779ef2ce66993267e0cadeb9 Mon Sep 17 00:00:00 2001 From: "Kemas M. Aryadary Rasyad" <112590882+aryadary0706@users.noreply.github.com> Date: Sun, 7 Jun 2026 20:22:36 +0700 Subject: [PATCH] apply dialog window and add current css --- .../internify/mentor/ProjectsInternTab.tsx | 32 +++++-- src/Pages/internify/mentor/TaskTab.tsx | 29 +++--- .../mentor/components/AddInternsDialog.tsx | 2 +- .../mentor/components/CreateProjectDialog.tsx | 4 +- .../mentor/components/CreateTaskDialog.tsx | 4 +- src/index.css | 95 ++++++++++++++++++- 6 files changed, 141 insertions(+), 25 deletions(-) diff --git a/src/Pages/internify/mentor/ProjectsInternTab.tsx b/src/Pages/internify/mentor/ProjectsInternTab.tsx index 1b65dd3..59ee25f 100644 --- a/src/Pages/internify/mentor/ProjectsInternTab.tsx +++ b/src/Pages/internify/mentor/ProjectsInternTab.tsx @@ -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 (
{/* Mentor */} @@ -8,7 +13,7 @@ export default function InternsTab({ project }: { project: Project }) {

Mentor

-
+
{project.mentor} @@ -19,15 +24,24 @@ export default function InternsTab({ project }: { project: Project }) { {/* Members */}
-

- Members -

+
+

+ Members +

+ +
{project.interns.map((intern: Intern, idx: number) => (
@@ -40,6 +54,10 @@ export default function InternsTab({ project }: { project: Project }) {
))}
+ {isModalOpen && setIsModalOpen(false)} + />}
); } \ No newline at end of file diff --git a/src/Pages/internify/mentor/TaskTab.tsx b/src/Pages/internify/mentor/TaskTab.tsx index b985425..8273aa7 100644 --- a/src/Pages/internify/mentor/TaskTab.tsx +++ b/src/Pages/internify/mentor/TaskTab.tsx @@ -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 */}

Tasks

- - -
)}
+ {isModalOpen && + setIsModalOpen(false)} + /> + }
); } \ No newline at end of file diff --git a/src/Pages/internify/mentor/components/AddInternsDialog.tsx b/src/Pages/internify/mentor/components/AddInternsDialog.tsx index 595f705..ab33ea2 100644 --- a/src/Pages/internify/mentor/components/AddInternsDialog.tsx +++ b/src/Pages/internify/mentor/components/AddInternsDialog.tsx @@ -47,7 +47,7 @@ export default function ManageInternsModal({ isOpen, onClose }: ManageInternsMod return ( {/* Search Input Area */}
diff --git a/src/Pages/internify/mentor/components/CreateProjectDialog.tsx b/src/Pages/internify/mentor/components/CreateProjectDialog.tsx index bd86b66..a94d281 100644 --- a/src/Pages/internify/mentor/components/CreateProjectDialog.tsx +++ b/src/Pages/internify/mentor/components/CreateProjectDialog.tsx @@ -106,10 +106,10 @@ export default function CreateProjectModal({ isOpen, onClose }: CreateProjectMod return ( {/* Header Modal */} -
+

Create New Project

diff --git a/src/Pages/internify/mentor/components/CreateTaskDialog.tsx b/src/Pages/internify/mentor/components/CreateTaskDialog.tsx index d4753bf..ab1e9bd 100644 --- a/src/Pages/internify/mentor/components/CreateTaskDialog.tsx +++ b/src/Pages/internify/mentor/components/CreateTaskDialog.tsx @@ -51,10 +51,10 @@ export default function CreateTaskModal({ isOpen, onClose }: CreateTaskModalProp return (

{/* Header Modal */} -
+

Create New Task

diff --git a/src/index.css b/src/index.css index 54429e1..f3a5edb 100644 --- a/src/index.css +++ b/src/index.css @@ -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 */ + } } \ No newline at end of file