ITS.tsx that ChatGPT recreated with figma.md

ITS.tsx that ChatGPT recreated with figma

import { useEffect, useState } from "react"; import { Button, TextField as Input, Badge, Table, TableHead as TableHeader, TableBody, TableRow, TableCell } from "@mui/material"; import { Search, Filter, Plus, Upload } from "lucide-react";

interface ClusterInfo { name: string; namespace: string; labels: string[]; nodes: number; creationDate: string; status: "Active" | "Inactive"; }

const ITS = () => { const [clusters, setClusters] = useState<ClusterInfo[]>([]); const [loading, setLoading] = useState(true); const [error, setError] = useState<string | null>(null);

useEffect(() => { // Simulating API call setTimeout(() => { setClusters([ { name: "winions-central", namespace: "winions-central", labels: ["region=aleolia", "cluster-opening"], nodes: 2, creationDate: "1/24/2025 9:12:18 AM", status: "Active", }, { name: "cluster1", namespace: "cluster1", labels: ["app=mod", "cluster-open-mangeme..."], nodes: 1, creationDate: "1/20/2025 7:42:25 PM", status: "Inactive", }, { name: "cluster2", namespace: "cluster2", labels: ["kubestellarVersion", "location-group=edge"], nodes: 3, creationDate: "1/15/2025 9:12:18 PM", status: "Inactive", }, { name: "kind", namespace: "kind", labels: ["devteam=owner", "tier=candybar", "name=beriberi-langnahm"], nodes: 1, creationDate: "12/24/2025 4:20:50 AM", status: "Active", }, { name: "coe-ene-eks-west", namespace: "coe-ene-eks-west", labels: ["environment=daze", "region=us-west-2", "datacenter=deep-core"], nodes: 2, creationDate: "4/20/2024 6:04:20 AM", status: "Active", }, { name: "coe-ene-eks-east", namespace: "coe-ene-eks-east", labels: ["environment=daze", "region=us-east-2", "datacenter=deep-space"], nodes: 5, creationDate: "4/20/2024 9:04:20 PM", status: "Inactive", }, ]); setLoading(false); }, 1000); }, []);

if (loading) return

Loading Kubernetes clusters...

; if (error) return

{error}

;

return (

{/* Header Section */}

<Input className="w-64" placeholder="Search" icon={} /> Filter

Create Cluster Import Cluster

  {/* Table Section */}
  <div className="overflow-x-auto">
    <Table>
      <TableHeader>
        <TableRow>
          <TableCell className="font-semibold">Cluster Name</TableCell>
          <TableCell className="font-semibold">Namespace</TableCell>
          <TableCell className="font-semibold">Labels</TableCell>
          <TableCell className="font-semibold">Nodes</TableCell>
          <TableCell className="font-semibold">Creation Date</TableCell>
          <TableCell className="font-semibold">Status</TableCell>
        </TableRow>
      </TableHeader>
      <TableBody>
        {clusters.map((cluster) => (
          <TableRow key={cluster.name}>
            <TableCell>
              <a href="#" className="text-blue-500 hover:underline">
                {cluster.name}
              </a>
            </TableCell>
            <TableCell>{cluster.namespace}</TableCell>
            <TableCell>
              <div className="flex flex-wrap gap-1">
                {cluster.labels.slice(0, 2).map((label, index) => (
                  <Badge key={index} className="bg-blue-100 text-blue-700">
                    {label}
                  </Badge>
                ))}
                {cluster.labels.length > 2 && (
                  <span className="text-gray-500 text-xs">+{cluster.labels.length - 2} more</span>
                )}
              </div>
            </TableCell>
            <TableCell>
              <Badge className="bg-green-100 text-green-700">{cluster.nodes}</Badge>
            </TableCell>
            <TableCell>{cluster.creationDate}</TableCell>
            <TableCell>
              {cluster.status === "Active" ? (
                <Badge className="bg-green-100 text-green-700">✓ Active</Badge>
              ) : (
                <Badge className="bg-red-100 text-red-700">✗ Inactive</Badge>
              )}
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  </div>

  {/* Pagination Section */}
  <div className="flex justify-between items-center mt-4">
    <p className="text-gray-500">Showing data 1 to 8 of 256K entries</p>
    <div className="flex space-x-1">
      <Button variant="outline">1</Button>
      <Button variant="outline">2</Button>
      <Button variant="outline">3</Button>
      <span className="text-gray-500">...</span>
      <Button variant="outline">40</Button>
    </div>
  </div>
</div>

); };

export default ITS;