Files
ProxmoxVE_Scripts/frontend/src/app/scripts/_components/ScriptItems/InterFaces.tsx
Bram Suurd 4f6942b601 Refactor ScriptItem and Buttons components to enhance layout and integrate dropdown for links. Update InterFaces component for improved styling and structure. (#3567)
* Refactor ScriptItem and Buttons components to enhance layout and integrate dropdown for links. Update InterFaces component for improved styling and structure.

* Add React Query integration and enhance component structure

- Introduced `@tanstack/react-query` for data fetching and state management.
- Added `QueryProvider` component to wrap the application with QueryClient.
- Refactored `ScriptItem` to utilize `useVersions` hook for fetching versions.
- Created `ResourceDisplay` and `VersionBadge` components for better resource representation.
- Improved layout and styling across various components, including `Alerts`, `Buttons`, and `DefaultPassword`.
- Updated `layout.tsx` to include the new `QueryProvider` for global state management.

* Remove bun.lock file to streamline dependency management and prevent potential conflicts.

* Update dependencies in package.json and package-lock.json

- Removed `@vercel/analytics` from dependencies.
- Upgraded `vitest` and related packages to version `3.1.1`.
- Updated various packages to their latest versions for improved performance and compatibility.
- Adjusted Node.js engine requirements to support newer versions.

* Update dependencies in package.json and package-lock.json

- Upgraded various Radix UI components to their latest versions for improved functionality and performance.
- Updated `chart.js`, `class-variance-authority`, `cmdk`, `framer-motion`, `fuse.js`, `nuqs`, `pocketbase`, and other packages to their latest versions.
- Enhanced TypeScript and ESLint packages for better type checking and linting capabilities.
- Updated Tailwind CSS and related plugins for improved styling and utility classes.
- Adjusted Node.js engine requirements in several packages to support newer versions.
2025-04-01 15:38:57 +02:00

22 lines
886 B
TypeScript

import handleCopy from "@/components/handleCopy";
import { buttonVariants } from "@/components/ui/button";
import { Script } from "@/lib/types";
import { cn } from "@/lib/utils";
import { ClipboardIcon } from "lucide-react";
export default function InterFaces({ item }: { item: Script }) {
return (
<div className="flex flex-col gap-2 w-full">
{item.interface_port !== null ? (
<div className="flex items-center justify-end">
<h2 className="mr-2 text-end text-lg font-semibold">Default Interface:</h2>
<span className={cn(buttonVariants({ size: "sm", variant: "outline" }), "flex items-center gap-2")}>
{item.interface_port}
<ClipboardIcon onClick={() => handleCopy("default interface", String(item.interface_port))} className="size-4 cursor-pointer" />
</span>
</div>
) : null}
</div>
);
}