Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy synced 2025-06-26 18:27:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #171 from Dokploy/168-href-on-the-entire-project-card

Browse Source 
refactor(#168): make project card be clickable everywhere
This commit is contained in:
Mauricio Siu
2024-06-27 23:13:07 -06:00
committed by GitHub
parent 39abd7e374 4ff1b3c19f
commit d2a07195b0
1 changed files with 113 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
components/dashboard/projects/show.tsx
View File

@@ -76,8 +76,8 @@ export const ShowProjects = () => {
project?.compose.length;
return (
<div key={project.projectId} className="w-full lg:max-w-md">
<Card className="group relative w-full bg-transparent transition-colors hover:bg-card">
<Link href={`/dashboard/project/${project.projectId}`}>
<Card className="group relative w-full bg-transparent transition-colors hover:bg-card">
<Button
className="absolute -right-3 -top-3 size-9 translate-y-1 rounded-full p-0 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100"
size="sm"
@@ -85,18 +85,14 @@ export const ShowProjects = () => {
>
<ExternalLinkIcon className="size-3.5" />
</Button>
</Link>
<CardHeader>
<CardTitle className="flex items-center justify-between gap-2">
<span className="flex flex-col gap-1.5">
<div className="flex items-center gap-2">
<BookIcon className="size-4 text-muted-foreground" />
<Link
className="text-base font-medium leading-none"
href={`/dashboard/project/${project.projectId}`}
>
<span className="text-base font-medium leading-none">
{project.name}
</Link>
</span>
</div>
<span className="text-sm font-medium text-muted-foreground">
@@ -106,7 +102,11 @@ export const ShowProjects = () => {
<div className="flex self-start space-x-1">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="px-2">
<Button
variant="ghost"
size="icon"
className="px-2"
>
<MoreHorizontalIcon className="size-5" />
</Button>
</DropdownMenuTrigger>
@@ -115,8 +115,11 @@ export const ShowProjects = () => {
Actions
</DropdownMenuLabel>
<div onClick={(e) => e.stopPropagation()}>
<UpdateProject projectId={project.projectId} />
</div>
<div onClick={(e) => e.stopPropagation()}>
{(auth?.rol === "admin" ||
user?.canDeleteProjects) && (
<AlertDialog>
@@ -138,8 +141,8 @@ export const ShowProjects = () => {
<div className="flex flex-row gap-4 rounded-lg bg-yellow-50 p-2 dark:bg-yellow-950">
<AlertTriangle className="text-yellow-600 dark:text-yellow-400" />
<span className="text-sm text-yellow-600 dark:text-yellow-400">
You have active services, please delete
them first
You have active services, please
delete them first
</span>
</div>
) : (
@@ -149,7 +152,9 @@ export const ShowProjects = () => {
)}
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogCancel>
Cancel
</AlertDialogCancel>
<AlertDialogAction
disabled={!emptyServices}
onClick={async () => {
@@ -177,6 +182,7 @@ export const ShowProjects = () => {
</AlertDialogContent>
</AlertDialog>
)}
</div>
</DropdownMenuContent>
</DropdownMenu>
</div>
@@ -184,7 +190,9 @@ export const ShowProjects = () => {
</CardHeader>
<CardFooter className="pt-4">
<div className="space-y-1 text-sm flex flex-row justify-between max-sm:flex-wrap w-full gap-2 sm:gap-4">
<DateTooltip date={project.createdAt}>Created</DateTooltip>
<DateTooltip date={project.createdAt}>
Created
</DateTooltip>
<span>
{totalServices}{" "}
{totalServices === 1 ? "service" : "services"}
@@ -192,6 +200,7 @@ export const ShowProjects = () => {
</div>
</CardFooter>
</Card>
</Link>
</div>
);
})}