ShrimpDelightSite/app/components/shrimp-projects/project-list/project-list.tsx
2026-07-11 15:20:14 -06:00

32 lines
964 B
TypeScript

import { ProjectListProps } from "../types";
export default function ProjectList({
projects,
handleProjectClick,
}: {
projects: ProjectListProps[];
handleProjectClick: any;
}) {
const projectList = projects.map((project) => (
<button
key={project.id}
className={
(project.selected
? "text-shadow-[4px_3px_0_var(--color-cherry-shrimp)]"
: "") +
" hover:[text-decoration-line:underline_overline] hover:decoration-ashy-shrimp cursor-[unset]"
}
onClick={() => handleProjectClick(project.id)}
>
{project.name}
</button>
));
return (
<section className="flex gap-[20px] justify-evenly py-[10px] text-tangerine-dream-shrimp text-2xl">
{projectList}
</section>
);
}
//todo nice to have: border-image on hover would be cool