75 lines
2.3 KiB
TypeScript
75 lines
2.3 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Location } from 'react-router-dom';
|
|
import { FolderIcon, PlusCircleIcon } from '@heroicons/react/24/outline';
|
|
import { Project } from '../../entities/Project';
|
|
|
|
interface SidebarProjectsProps {
|
|
handleNavClick: (path: string, title: string, icon: JSX.Element) => void;
|
|
location: Location;
|
|
isDarkMode: boolean;
|
|
openProjectModal: () => void;
|
|
}
|
|
|
|
const SidebarProjects: React.FC<SidebarProjectsProps> = ({
|
|
handleNavClick,
|
|
location,
|
|
isDarkMode,
|
|
openProjectModal,
|
|
}) => {
|
|
const [projects, setProjects] = useState<Project[]>([]);
|
|
|
|
useEffect(() => {
|
|
const fetchProjects = async () => {
|
|
try {
|
|
const response = await fetch('/api/projects?pin_to_sidebar=true');
|
|
const data = await response.json();
|
|
if (response.ok) {
|
|
setProjects(data.projects || []);
|
|
} else {
|
|
console.error('Failed to fetch projects:', data.error);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching projects:', error);
|
|
}
|
|
};
|
|
fetchProjects();
|
|
}, []);
|
|
|
|
const isActiveProject = (path: string) => {
|
|
return location.pathname === path
|
|
? 'bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white'
|
|
: 'text-gray-700 dark:text-gray-300';
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<ul className="flex flex-col space-y-1 mt-4">
|
|
{/* "PROJECTS" Title with Add Button */}
|
|
<li
|
|
className={`flex justify-between items-center px-4 py-2 uppercase rounded-md text-xs tracking-wider cursor-pointer hover:text-black dark:hover:text-white ${isActiveProject(
|
|
'/projects'
|
|
)}`}
|
|
onClick={() => handleNavClick('/projects', 'Projects', <FolderIcon className="h-5 w-5 mr-2" />)}
|
|
>
|
|
<span className="flex items-center">
|
|
<FolderIcon className="h-5 w-5 mr-2" />
|
|
PROJECTS
|
|
</span>
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
openProjectModal();
|
|
}}
|
|
className="text-gray-700 dark:text-gray-300 hover:text-black dark:hover:text-white focus:outline-none"
|
|
aria-label="Add Project"
|
|
title="Add Project"
|
|
>
|
|
<PlusCircleIcon className="h-5 w-5" />
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SidebarProjects;
|