Qlockify/qlockify-frontend-deployment
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(workspaces): add workspace management page

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-03-12 20:51:41 +08:00
parent 2ffd1efc61
commit 5e4f4ec6e4
9 changed files with 224 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/WorkspaceSelector.tsx
View File

@@ -1,13 +1,15 @@
import React, { useState, useRef, useEffect } from "react";
import { useWorkspace } from "../context/WorkspaceContext";
import { useTranslation } from "../hooks/useTranslation";
import { Check, ChevronDown, Plus, Briefcase } from "lucide-react";
import { Check, ChevronDown, Plus, Briefcase, Settings } from "lucide-react";
import { CreateWorkspaceModal } from "./CreateWorkspaceModal"; // Adjust path if needed
import { useNavigate } from "react-router-dom";
export const WorkspaceSelector: React.FC = () => {
const [isOpen, setIsOpen] = useState(false);
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const dropdownRef = useRef<HTMLDivElement>(null);
const navigate = useNavigate()
const { workspaces, activeWorkspace, setActiveWorkspace, addWorkspace } = useWorkspace();
const { t, lang } = useTranslation();
@@ -34,7 +36,7 @@ export const WorkspaceSelector: React.FC = () => {
<button
type="button"
onClick={() => setIsOpen(!isOpen)}
className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-slate-700 dark:text-slate-200 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
className="flex items-center gap-2 px-3 py-2 text-base font-medium text-slate-700 dark:text-slate-200 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
>
<div className="w-6 h-6 flex items-center justify-center bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-400 rounded-md">
{activeWorkspace?.name?.charAt(0) || <Briefcase className="w-4 h-4" />}
@@ -93,6 +95,16 @@ export const WorkspaceSelector: React.FC = () => {
<Plus className="w-4 h-4" />
{t.workspace?.createNew || "Create New Workspace"}
</button>
<button
onClick={() => {
setIsOpen(false);
navigate('/workspaces');
}}
className="flex w-full items-center gap-3 px-4 py-2.5 text-sm font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
>
<Settings className="h-4 w-4" />
{ t.workspace?.manage || "Manage Workspaces" }
</button>
</div>
)}