add: databases WIP

app/(deploy)/[workspace]/databases/database-new-form.tsx

@@ -1,18 +1,40 @@
 'use client';
 
 import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import { Progress } from '@/components/ui/progress';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
 import { useWorkspace } from '@/hooks/useWorkspace';
+import { deployDatabase } from '@/lib/deploy/database';
 import { cn } from '@/lib/utils';
 import { Plus } from 'lucide-react';
+import Image from 'next/image';
 import { useState } from 'react';
 
 interface DatabaseNewSteps {
 	display: string;
 }
 
+interface IDatabaseProvider {
+	id: string;
+	display: string;
+	image: {
+		alt: string;
+		src: string;
+	};
+}
+
+export interface IDatabaseConfig {
+	name: string;
+	provider: IDatabaseProvider;
+	user: {
+		username: string;
+		password: string;
+	};
+}
+
 const steps: DatabaseNewSteps[] = [
 	{
 		display: 'Database Type',
@@ -20,15 +42,49 @@ const steps: DatabaseNewSteps[] = [
 	{
 		display: 'Configuration',
 	},
+	{
+		display: 'Name & User',
+	},
 	{
 		display: 'Review & Deploy',
 	},
 ];
 
+const databaseProviders: IDatabaseProvider[] = [
+	{
+		id: 'vitess',
+		display: 'Vitess',
+		image: {
+			alt: 'Vitess',
+			src: '/vitess.png',
+		},
+	},
+	{
+		id: 'redis',
+		display: 'Redis',
+		image: {
+			alt: 'Redis',
+			src: '/redis.svg',
+		},
+	},
+];
+
 export default function DatabaseNewForm() {
 	const [open, setOpen] = useState<boolean>(false);
 	const [currentSteps, setCurrentSteps] = useState<number>(1);
 
+	// TODO: Generate all data, but leave the user the choice to modify
+	const defaultDatabaseConfig: IDatabaseConfig = {
+		name: 'my-new-cool-db',
+		provider: databaseProviders[0],
+		user: {
+			username: 'my-new-super-user',
+			password: 'a-super-strong-generated-password',
+		},
+	};
+
+	const [databaseConfig, setDatabaseConfig] = useState<IDatabaseConfig>(defaultDatabaseConfig);
+
 	const { id } = useWorkspace();
 
 	return (
@@ -59,15 +115,80 @@ export default function DatabaseNewForm() {
 
 					{currentSteps == 1 && (
 						<div>
-							{/* <RadioGroup defaultValue={'vitess'} className="flex flex-col gap-2 mb-4" onValueChange={}>
-								<div className={cn('flex flex-row items-center gap-4 border-[1px] rounded-lg py-2 px-4', provider.value == newApplication.serviceProvider ? 'border-[#3A7BFE]' : 'border-gray-300')}>
-									<RadioGroupItem value={'vitess'} id={'vitess'} />
-									<label htmlFor={'vitess'} className="flex flex-row items-center gap-4">
-										<img src={provider.image} alt={'Vitess'} className="w-8 h-8 rounded-full" />
-										Vitess
-									</label>
-								</div>
-							</RadioGroup> */}
+							<RadioGroup
+								defaultValue={'vitess'}
+								className="flex flex-col gap-2 mb-4"
+								onValueChange={(id) => {
+									setDatabaseConfig((prev) => ({ ...prev, provider: databaseProviders.filter((provider) => provider.id == id)[0] }));
+								}}
+							>
+								{databaseProviders.map((provider) => (
+									<div className={cn('flex flex-row items-center gap-4 border-[1px] rounded-lg py-2 px-4', databaseConfig?.provider.id == provider.id ? 'border-[#3A7BFE]' : 'border-gray-300')}>
+										<RadioGroupItem value={provider.id} id={provider.id} />
+										<label htmlFor={provider.id} className="flex flex-row items-center gap-4">
+											<div className="w-8 h-8 rounded-full relative">
+												<Image src={provider.image.src} alt={provider.image.alt} fill />
+											</div>
+											{provider.display}
+										</label>
+									</div>
+								))}
+							</RadioGroup>
+						</div>
+					)}
+
+					{currentSteps == 2 && (
+						<div>
+							<p>WIP for now 1CPU 2048Mb RAM</p>
+							<p>Storage 1 GB</p>
+						</div>
+					)}
+
+					{currentSteps == 3 && (
+						<div>
+							<Label>Database Name</Label>
+							<Input
+								className="mb-2"
+								type="text"
+								placeholder="super-cool-database"
+								value={databaseConfig.name}
+								onChange={(e) => {
+									setDatabaseConfig((prev) => ({ ...prev, name: e.target.value }));
+								}}
+							/>
+
+							<Label>Username</Label>
+							<Input
+								className="mb-2"
+								type="text"
+								placeholder="root"
+								value={databaseConfig.user.username}
+								onChange={(e) => {
+									setDatabaseConfig((prev) => ({ ...prev, user: { ...prev.user, username: e.target.value } }));
+								}}
+							/>
+
+							<Label>Password</Label>
+							<Input
+								className="mb-2"
+								type="password"
+								placeholder="Strong Password"
+								value={databaseConfig.user.password}
+								onChange={(e) => {
+									setDatabaseConfig((prev) => ({ ...prev, user: { ...prev.user, password: e.target.value } }));
+								}}
+							/>
+							<div className="" />
+						</div>
+					)}
+
+					{currentSteps == 4 && (
+						<div>
+							<h2>Review your new database information :</h2>
+							<p>Type : {databaseConfig.provider.display}</p>
+							<p>Name : {databaseConfig.name}</p>
+							<p>Username : {databaseConfig.user.username}</p>
+							<p>Password : {databaseConfig.user.password}</p>
 						</div>
 					)}
 
@@ -82,7 +203,14 @@ export default function DatabaseNewForm() {
 							Back
 						</Button>
 						{currentSteps == steps.length ? (
-							<Button className="bg-[#3A7BFE]" onClick={() => {}}>
+							<Button
+								className="bg-[#3A7BFE]"
+								onClick={() => {
+									deployDatabase(databaseConfig).then((res) => {
+										console.log(res);
+									});
+								}}
+							>
 								Deploy
 							</Button>
 						) : (