4f6942b601
* 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.
30 lines
1.3 KiB
TypeScript
30 lines
1.3 KiB
TypeScript
import { Script } from "@/lib/types";
|
|
|
|
export default function DefaultSettings({ item }: { item: Script }) {
|
|
const getDisplayValueFromRAM = (ram: number) => (ram >= 1024 ? `${Math.floor(ram / 1024)}GB` : `${ram}MB`);
|
|
|
|
const ResourceDisplay = ({ settings, title }: { settings: (typeof item.install_methods)[0]; title: string }) => {
|
|
const { cpu, ram, hdd } = settings.resources;
|
|
return (
|
|
<div>
|
|
<h2 className="text-md font-semibold">{title}</h2>
|
|
<p className="text-sm text-muted-foreground">CPU: {cpu}vCPU</p>
|
|
<p className="text-sm text-muted-foreground">RAM: {getDisplayValueFromRAM(ram ?? 0)}</p>
|
|
<p className="text-sm text-muted-foreground">HDD: {hdd}GB</p>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const defaultSettings = item.install_methods.find((method) => method.type === "default");
|
|
const defaultAlpineSettings = item.install_methods.find((method) => method.type === "alpine");
|
|
|
|
const hasDefaultSettings = defaultSettings?.resources && Object.values(defaultSettings.resources).some(Boolean);
|
|
|
|
return (
|
|
<div className="space-y-4 flex-col flex">
|
|
{hasDefaultSettings && <ResourceDisplay settings={defaultSettings} title="Default settings" />}
|
|
{defaultAlpineSettings && <ResourceDisplay settings={defaultAlpineSettings} title="Default Alpine settings" />}
|
|
</div>
|
|
);
|
|
}
|