Improved deployments ui

src/app/deployments/page.tsx

@@ -1,27 +1,16 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
+import { useMemo } from "react";
 import { DashboardLayout } from "@/components/dashboard/DashboardLayout";
 import {
   Card,
   CardContent,
   CardDescription,
-  CardHeader,
   CardTitle,
 } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import {
+import { Plus, Play, Pause } from "lucide-react";
-  Rocket,
-  RotateCcw,
-  Eye,
-  MoreVertical,
-  Plus,
-  Play,
-  Pause,
-  Trash,
-} from "lucide-react";
-import { Application, Deployment } from "@/lib/types";
 import { getDeployments } from "@/lib/dockship/deploy";
 import { getApps } from "@/lib/dockship/application";
 import { cn } from "@/lib/utils";
@@ -101,15 +90,13 @@ export default function DeploymentsPage() {
                     {dep.image}
                   </p>
                   <div className="flex justify-end gap-1">
-                    <Button
+                    <Button variant="ghost" size="icon-sm">
-                      variant="ghost"
+                      {dep.status === "stopped" ? (
-                      size="icon-sm"
+                        <Play className="w-3 h-3" />
-                      disabled={dep.status === "pending"}
+                      ) : dep.status === "running" ? (
-                    >
-                      {dep.status === "running" ? (
                         <Pause className="w-3 h-3" />
                       ) : (
-                        <Play className="w-3 h-3" />
+                        <Pause className="w-3 h-3 text-primary" />
                       )}
                     </Button>
                     <RemoveDialog remove={() => {}} />