mirror of
https://github.com/community-scripts/ProxmoxVE.git
synced 2025-09-11 09:54:36 +00:00
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.
This commit is contained in:
Bram Suurd
GitHub
parent
1e4544e079
commit
4f6942b601
16 changed files with 1371 additions and 1323 deletions
|
|
@ -1,263 +1,156 @@
|
|||
import { Separator } from "@/components/ui/separator";
|
||||
import { fetchVersions } from "@/lib/data";
|
||||
"use client";
|
||||
|
||||
import { extractDate } from "@/lib/time";
|
||||
import { AppVersion, Script } from "@/lib/types";
|
||||
|
||||
import { X } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { basePath } from "@/config/siteConfig";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useVersions } from "@/hooks/useVersions";
|
||||
import { cleanSlug } from "@/lib/utils/resource-utils";
|
||||
import { Suspense } from "react";
|
||||
import { ResourceDisplay } from "./ResourceDisplay";
|
||||
import { getDisplayValueFromType } from "./ScriptInfoBlocks";
|
||||
import Alerts from "./ScriptItems/Alerts";
|
||||
import Buttons from "./ScriptItems/Buttons";
|
||||
import DefaultPassword from "./ScriptItems/DefaultPassword";
|
||||
import Description from "./ScriptItems/Description";
|
||||
import InstallCommand from "./ScriptItems/InstallCommand";
|
||||
import InterFaces from "./ScriptItems/InterFaces";
|
||||
import Tooltips from "./ScriptItems/Tooltips";
|
||||
import InterFaces from "./ScriptItems/InterFaces";
|
||||
import Buttons from "./ScriptItems/Buttons";
|
||||
|
||||
function ScriptItem({ item, setSelectedScript }: { item: Script; setSelectedScript: (script: string | null) => void }) {
|
||||
const closeScript = () => {
|
||||
window.history.pushState({}, document.title, window.location.pathname);
|
||||
setSelectedScript(null);
|
||||
};
|
||||
const [versions, setVersions] = useState<AppVersion[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchVersions()
|
||||
.then((fetchedVersions) => {
|
||||
console.log("Fetched Versions: ", fetchedVersions);
|
||||
if (Array.isArray(fetchedVersions)) {
|
||||
setVersions(fetchedVersions);
|
||||
} else if (fetchedVersions && typeof fetchedVersions === "object") {
|
||||
setVersions([fetchedVersions]);
|
||||
} else {
|
||||
setVersions([]);
|
||||
}
|
||||
})
|
||||
.catch((error) => console.error("Error fetching versions:", error));
|
||||
}, []);
|
||||
interface ScriptItemProps {
|
||||
item: Script;
|
||||
setSelectedScript: (script: string | null) => void;
|
||||
}
|
||||
|
||||
function ScriptHeader({ item }: { item: Script }) {
|
||||
const defaultInstallMethod = item.install_methods?.[0];
|
||||
const os = defaultInstallMethod?.resources?.os || "Proxmox Node";
|
||||
const version = defaultInstallMethod?.resources?.version || "";
|
||||
|
||||
return (
|
||||
<div className="mr-7 mt-0 flex w-full min-w-fit">
|
||||
<div className="flex w-full min-w-fit">
|
||||
<div className="flex w-full flex-col">
|
||||
<div className="flex h-[36px] min-w-max items-center justify-between">
|
||||
<h2 className="text-lg font-semibold">Selected Script</h2>
|
||||
<X onClick={closeScript} className="cursor-pointer" />
|
||||
</div>
|
||||
<div className="rounded-lg border bg-accent/20 p-4">
|
||||
<div className="flex justify-between">
|
||||
<div className="flex">
|
||||
<Image
|
||||
className="h-32 w-32 rounded-lg bg-accent/60 object-contain p-3 shadow-md"
|
||||
src={item.logo || `/${basePath}/logo.png`}
|
||||
width={400}
|
||||
onError={(e) => ((e.currentTarget as HTMLImageElement).src = `/${basePath}/logo.png`)}
|
||||
height={400}
|
||||
alt={item.name}
|
||||
unoptimized
|
||||
/>
|
||||
<div className="ml-4 flex flex-col justify-between">
|
||||
<div className="flex h-full w-full flex-col justify-between">
|
||||
<div>
|
||||
<h1 className="text-lg font-semibold">
|
||||
{item.name} {getDisplayValueFromType(item.type)}
|
||||
</h1>
|
||||
<p className="w-full text-sm text-muted-foreground">
|
||||
Date added: {extractDate(item.date_created)}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Default OS: {os} {version}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex min-w-[600px] flex-wrap gap-6 text-sm text-muted-foreground">
|
||||
{(() => {
|
||||
const getDisplayValueFromRAM = (ram: number) =>
|
||||
ram >= 1024 ? `${Math.floor(ram / 1024)}GB` : `${ram}MB`;
|
||||
|
||||
const IconText = ({ icon, label }: { icon: React.ReactNode; label: string }) => (
|
||||
<span className="flex items-center gap-1">
|
||||
{icon}
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
|
||||
const CPUIcon = (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-4 h-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<rect x="9" y="9" width="6" height="6" />
|
||||
<path d="M3 9h2m14 0h2M3 15h2m14 0h2M9 3v2m6-2v2M9 19v2m6-2v2" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const RAMIcon = (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-4 h-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<rect x="4" y="6" width="16" height="12" rx="2" ry="2" />
|
||||
<path d="M8 6v12M16 6v12" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const HDDIcon = (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-4 h-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path d="M4 4h16v16H4z" />
|
||||
<circle cx="8" cy="16" r="1" />
|
||||
<circle cx="16" cy="16" r="1" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const ResourceDisplay = ({
|
||||
title,
|
||||
cpu,
|
||||
ram,
|
||||
hdd,
|
||||
}: {
|
||||
title: string;
|
||||
cpu: number | null;
|
||||
ram: number | null;
|
||||
hdd: number | null;
|
||||
}) => {
|
||||
const getDisplayValueFromRAM = (ram: number) =>
|
||||
ram >= 1024 ? `${Math.floor(ram / 1024)}GB` : `${ram}MB`;
|
||||
|
||||
const IconText = ({ icon, label }: { icon: React.ReactNode; label: string }) => (
|
||||
<span className="flex items-center gap-1 whitespace-nowrap">
|
||||
{icon}
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
|
||||
const hasCPU = typeof cpu === "number" && cpu > 0;
|
||||
const hasRAM = typeof ram === "number" && ram > 0;
|
||||
const hasHDD = typeof hdd === "number" && hdd > 0;
|
||||
|
||||
if (!hasCPU && !hasRAM && !hasHDD) return null;
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap items-center gap-1">
|
||||
<span className="font-semibold text-foreground">{title}:</span>
|
||||
{hasCPU && (
|
||||
<>
|
||||
<IconText icon={CPUIcon} label={`CPU: ${cpu} vCPU`} />
|
||||
<span>|</span>
|
||||
</>
|
||||
)}
|
||||
{hasRAM && (
|
||||
<>
|
||||
<IconText icon={RAMIcon} label={`RAM: ${getDisplayValueFromRAM(ram!)}`} />
|
||||
<span>|</span>
|
||||
</>
|
||||
)}
|
||||
{hasHDD && <IconText icon={HDDIcon} label={`HDD: ${hdd} GB`} />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const defaultSettings = item.install_methods.find((method) => method.type === "default");
|
||||
const alpineSettings = item.install_methods.find((method) => method.type === "alpine");
|
||||
return (
|
||||
<>
|
||||
{defaultSettings?.resources && (
|
||||
<ResourceDisplay
|
||||
title="Default"
|
||||
cpu={defaultSettings.resources.cpu}
|
||||
ram={defaultSettings.resources.ram}
|
||||
hdd={defaultSettings.resources.hdd}
|
||||
/>
|
||||
)}
|
||||
|
||||
{alpineSettings?.resources && (
|
||||
<ResourceDisplay
|
||||
title="Alpine"
|
||||
cpu={alpineSettings.resources.cpu}
|
||||
ram={alpineSettings.resources.ram}
|
||||
hdd={alpineSettings.resources.hdd}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
|
||||
{(() => {
|
||||
if (versions.length === 0) {
|
||||
return <p>Loading versions...</p>;
|
||||
}
|
||||
|
||||
const cleanSlug = item.slug.replace(/[^a-z0-9]/gi, "").toLowerCase();
|
||||
|
||||
const matched = versions.find((v) => {
|
||||
const cleanName = v.name.replace(/[^a-z0-9]/gi, "").toLowerCase();
|
||||
return cleanName === cleanSlug || cleanName.includes(cleanSlug);
|
||||
});
|
||||
|
||||
if (!matched) return null;
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground mt-2">
|
||||
<span className="text-foreground">
|
||||
Version: {matched.version} (
|
||||
{extractDate(
|
||||
matched.date instanceof Date ? matched.date.toISOString() : matched.date || "",
|
||||
)}
|
||||
</span>
|
||||
<span
|
||||
title="Crawled version from newreleases.io"
|
||||
className="cursor-help rounded-full border border-green-500 px-2 py-0.5 text-xs font-semibold text-green-500"
|
||||
>
|
||||
Info
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
<div className="flex flex-col lg:flex-row gap-6 w-full">
|
||||
<div className="flex flex-col md:flex-row gap-6 flex-grow">
|
||||
<div className="flex-shrink-0">
|
||||
<Image
|
||||
className="h-32 w-32 rounded-xl bg-gradient-to-br from-accent/40 to-accent/60 object-contain p-3 shadow-lg transition-transform hover:scale-105"
|
||||
src={item.logo || `/${basePath}/logo.png`}
|
||||
width={400}
|
||||
onError={(e) => ((e.currentTarget as HTMLImageElement).src = `/${basePath}/logo.png`)}
|
||||
height={400}
|
||||
alt={item.name}
|
||||
unoptimized
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col justify-between flex-grow space-y-4">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight flex items-center gap-2">
|
||||
{item.name}
|
||||
<VersionInfo item={item} />
|
||||
<span className="inline-flex items-center rounded-md bg-accent/30 px-2 py-1 text-sm">
|
||||
{getDisplayValueFromType(item.type)}
|
||||
</span>
|
||||
</h1>
|
||||
<div className="mt-1 flex items-center gap-3 text-sm text-muted-foreground">
|
||||
<span>Added {extractDate(item.date_created)}</span>
|
||||
<span>•</span>
|
||||
<span className=" capitalize">
|
||||
{os} {version}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden flex-col justify-between gap-2 sm:flex">
|
||||
<InterFaces item={item} />
|
||||
<Buttons item={item} />
|
||||
</div>
|
||||
{/* <VersionInfo item={item} /> */}
|
||||
</div>
|
||||
<Separator className="mt-4" />
|
||||
<div>
|
||||
<div className="mt-4">
|
||||
<Description item={item} />
|
||||
<Alerts item={item} />
|
||||
<div className="flex flex-col gap-2 text-sm text-muted-foreground">
|
||||
{defaultInstallMethod?.resources && (
|
||||
<ResourceDisplay
|
||||
title="Default"
|
||||
cpu={defaultInstallMethod.resources.cpu}
|
||||
ram={defaultInstallMethod.resources.ram}
|
||||
hdd={defaultInstallMethod.resources.hdd}
|
||||
/>
|
||||
)}
|
||||
{item.install_methods.find((method) => method.type === "alpine")?.resources && (
|
||||
<ResourceDisplay
|
||||
title="Alpine"
|
||||
{...item.install_methods.find((method) => method.type === "alpine")!.resources!}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 justify-between">
|
||||
<InterFaces item={item} />
|
||||
<div className="flex justify-end">
|
||||
<Buttons item={item} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function VersionInfo({ item }: { item: Script }) {
|
||||
const { data: versions = [], isLoading } = useVersions();
|
||||
|
||||
if (isLoading || versions.length === 0) {
|
||||
return <p className="text-sm text-muted-foreground">Loading versions...</p>;
|
||||
}
|
||||
|
||||
const matchedVersion = versions.find((v: AppVersion) => {
|
||||
const cleanName = v.name.replace(/[^a-z0-9]/gi, "").toLowerCase();
|
||||
return cleanName === cleanSlug(item.slug) || cleanName.includes(cleanSlug(item.slug));
|
||||
});
|
||||
|
||||
if (!matchedVersion) return null;
|
||||
|
||||
return <span className="font-medium text-sm">{matchedVersion.version}</span>;
|
||||
}
|
||||
|
||||
export function ScriptItem({ item, setSelectedScript }: ScriptItemProps) {
|
||||
const closeScript = () => {
|
||||
window.history.pushState({}, document.title, window.location.pathname);
|
||||
setSelectedScript(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-5xl mx-auto">
|
||||
<div className="flex w-full flex-col">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<h2 className="text-2xl font-semibold tracking-tight text-foreground/90">Selected Script</h2>
|
||||
<button
|
||||
onClick={closeScript}
|
||||
className="rounded-full p-2 text-muted-foreground hover:bg-card/50 transition-colors"
|
||||
>
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-border/40 bg-gradient-to-b from-card/30 to-background/50 backdrop-blur-sm shadow-sm">
|
||||
<div className="p-6 space-y-6">
|
||||
<Suspense fallback={<div className="animate-pulse h-32 bg-accent/20 rounded-xl" />}>
|
||||
<ScriptHeader item={item} />
|
||||
</Suspense>
|
||||
|
||||
<Description item={item} />
|
||||
<Alerts item={item} />
|
||||
|
||||
<div className="mt-4 rounded-lg border shadow-sm">
|
||||
<div className="flex gap-3 px-4 py-2 bg-accent/25">
|
||||
<h2 className="text-lg font-semibold">How to {item.type === "misc" ? "use" : "install"}</h2>
|
||||
<Tooltips item={item} />
|
||||
</div>
|
||||
<div className="mt-4 rounded-lg border bg-accent/50">
|
||||
<div className="flex gap-3 px-4 py-2">
|
||||
<h2 className="text-lg font-semibold">How to {item.type == "misc" ? "use" : "install"}</h2>
|
||||
<Tooltips item={item} />
|
||||
</div>
|
||||
<Separator className="w-full"></Separator>
|
||||
<Separator />
|
||||
<div className="">
|
||||
<InstallCommand item={item} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DefaultPassword item={item} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -265,5 +158,3 @@ function ScriptItem({ item, setSelectedScript }: { item: Script; setSelectedScri
|
|||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ScriptItem;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue