mhop/test
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Refactor ScriptItem and Buttons components to enhance layout and integrate dropdown for links. Update InterFaces component for improved styling and structure. (#3567)

Browse Source 
* 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
2025-04-01 15:38:57 +02:00
committed by GitHub
parent 1e4544e079
commit 4f6942b601
16 changed files with 1371 additions and 1323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/app/scripts/_components/ScriptItems/DefaultSettings.tsx
View File

@@ -1,51 +1,29 @@
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 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 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">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 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);
const hasDefaultSettings = defaultSettings?.resources && Object.values(defaultSettings.resources).some(Boolean);
return (
<>
{hasDefaultSettings && (
<ResourceDisplay settings={defaultSettings} title="Default settings" />
)}
{defaultAlpineSettings && (
<ResourceDisplay
settings={defaultAlpineSettings}
title="Default Alpine settings"
/>
)}
</>
<div className="space-y-4 flex-col flex">
{hasDefaultSettings && <ResourceDisplay settings={defaultSettings} title="Default settings" />}
{defaultAlpineSettings && <ResourceDisplay settings={defaultAlpineSettings} title="Default Alpine settings" />}
</div>
);
}