add: specs & database status

components/deploy/database/provider/postgres.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { IDatabaseConfiguration } from '@/lib/deploy/database-config';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { IDatabaseSpecs } from '@/lib/deploy/database-config';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { cn } from '@/lib/utils';
+import { Slider } from '@/components/ui/slider';
+
+let specsTiers: IDatabaseSpecs[] = [
+	{
+		id: 'postgres-xs',
+		cpu: 0.5,
+		memory: 512,
+		maxConnections: 5,
+	},
+	{
+		id: 'postgres-s',
+		cpu: 1,
+		memory: 1024,
+		maxConnections: 20,
+	},
+	{
+		id: 'postgres-m',
+		cpu: 2,
+		memory: 2048,
+		maxConnections: 50,
+	},
+	{
+		id: 'postgres-l',
+		cpu: 4,
+		memory: 4096,
+		maxConnections: 100,
+	},
+	{
+		id: 'postgres-xl',
+		cpu: 8,
+		memory: 8192,
+		maxConnections: 200,
+	},
+];
+
+let MIN_STORAGE = 10;
+let MAX_STORAGE = 100;
+
+export function PostgresSpecsPage({ config, setConfig }: { config: IDatabaseConfiguration; setConfig: Dispatch<SetStateAction<IDatabaseConfiguration>> }) {
+	const [specsTier, setSpecsTier] = useState<IDatabaseSpecs>(config.specs.cpu ? specsTiers.filter((tier) => tier.id == config.specs.id)[0] : specsTiers[0]);
+	const [storage, setStorage] = useState<number>(config.specs.storage || MIN_STORAGE);
+
+	useEffect(() => {
+		setConfig((config) => ({
+			...config,
+			specs: {
+				...config.specs,
+				...specsTier,
+				storage,
+			},
+		}));
+	}, [specsTier, storage]);
+
+	return (
+		<div>
+			<RadioGroup
+				defaultValue={'vitess'}
+				className="flex flex-col gap-2 mb-4"
+				value={specsTier.id}
+				onValueChange={(id) => {
+					setSpecsTier(specsTiers.filter((tier) => tier.id == id)[0]);
+				}}
+			>
+				{specsTiers.map((specs) => (
+					<div key={specs.id} className={cn('flex flex-row items-center gap-4 border-[1px] rounded-lg py-2 px-4', specsTier.id == specs.id ? 'border-[#3A7BFE]' : 'border-gray-300')}>
+						<RadioGroupItem value={specs.id} id={specs.id} />
+						<label htmlFor={specs.id} className="flex flex-row items-center gap-4">
+							<div className="w-8 h-8 rounded-full flex justify-center items-center">
+								<p className="text-xl">{specs.id.replace('postgres-', '').toUpperCase()}</p>
+							</div>
+							<p className="text-sm text-gray-700">
+								{specs.cpu} CPU, {specs.memory} MB RAM, {specs.maxConnections} Max Connections
+							</p>
+						</label>
+					</div>
+				))}
+			</RadioGroup>
+			<div>
+				<div>
+					<label>Storage</label>
+					<p>{storage} GB</p>
+				</div>
+				<Slider
+					min={MIN_STORAGE / 10}
+					max={MAX_STORAGE / 10}
+					onValueChange={(e) => {
+						setStorage(e[0] * 10);
+					}}
+					defaultValue={[storage / 10]}
+				/>
+			</div>
+		</div>
+	);
+}

components/ui/slider.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import * as React from 'react';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+
+import { cn } from '@/lib/utils';
+
+const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>>(({ className, ...props }, ref) => (
+	<SliderPrimitive.Root ref={ref} className={cn('relative flex w-full touch-none select-none items-center', className)} {...props}>
+		<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+			<SliderPrimitive.Range className="absolute h-full bg-[#3A7BFE]" />
+		</SliderPrimitive.Track>
+		<SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-[#3A7BFE] bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+	</SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };