add: databases WIP

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

@@ -0,0 +1,103 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+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 { cn } from '@/lib/utils';
+import { Plus } from 'lucide-react';
+import { useState } from 'react';
+
+interface DatabaseNewSteps {
+	display: string;
+}
+
+const steps: DatabaseNewSteps[] = [
+	{
+		display: 'Database Type',
+	},
+	{
+		display: 'Configuration',
+	},
+	{
+		display: 'Review & Deploy',
+	},
+];
+
+export default function DatabaseNewForm() {
+	const [open, setOpen] = useState<boolean>(false);
+	const [currentSteps, setCurrentSteps] = useState<number>(1);
+
+	const { id } = useWorkspace();
+
+	return (
+		<Sheet open={open} onOpenChange={() => setOpen((open) => !open)}>
+			<SheetTrigger asChild>
+				<Button className="flex gap-1 justify-center items-center bg-[#3A7BFE]">
+					<Plus />
+					New Database
+				</Button>
+			</SheetTrigger>
+			<SheetContent className="min-w-[500px]">
+				<SheetHeader>
+					<SheetTitle className="text-2xl">New Database</SheetTitle>
+					<SheetDescription>Deploy a new database</SheetDescription>
+				</SheetHeader>
+				<div className="flex flex-col">
+					<div className="flex flex-col gap-2 my-6">
+						<div className="flex flex-row justify-between">
+							<p>
+								Step: <span className="text-muted-foreground">{steps[currentSteps - 1].display}</span>
+							</p>
+							<p>
+								{currentSteps} / {steps.length}
+							</p>
+						</div>
+						<Progress className="bg-gray-300 h-3 " color="red" value={currentSteps * (100 / steps.length)} max={100} indicatorColor="bg-[#3A7BFE]" />
+					</div>
+
+					{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> */}
+						</div>
+					)}
+
+					<div className="flex flex-row justify-between my-6">
+						<Button
+							variant={'outline'}
+							className={cn(currentSteps == 1 && 'opacity-0 pointer-events-none select-none')}
+							onClick={() => {
+								setCurrentSteps((prev) => (prev - 1 < 1 ? 1 : prev - 1));
+							}}
+						>
+							Back
+						</Button>
+						{currentSteps == steps.length ? (
+							<Button className="bg-[#3A7BFE]" onClick={() => {}}>
+								Deploy
+							</Button>
+						) : (
+							<Button
+								className="bg-[#3A7BFE]"
+								onClick={() => {
+									setCurrentSteps((prev) => (prev + 1 > steps.length ? steps.length : prev + 1));
+								}}
+							>
+								Next
+							</Button>
+						)}
+					</div>
+				</div>
+			</SheetContent>
+		</Sheet>
+	);
+}

app/(deploy)/[workspace]/databases/page.tsx

@@ -1,5 +1,5 @@
-import { Button } from '@/components/ui/button';
-import { Database, Plus } from 'lucide-react';
+import { Database } from 'lucide-react';
+import DatabaseNewForm from './database-new-form';
 
 export default async function Databases() {
 	return (
@@ -11,10 +11,11 @@ export default async function Databases() {
 					<h3 className="font-semibold">No database</h3>
 					<p className="text-gray-700">Get started by creating a new database.</p>
 				</div>
-				<Button className="flex gap-1 justify-center items-center bg-[#3A7BFE]">
+				{/* <Button className="flex gap-1 justify-center items-center bg-[#3A7BFE]">
 					<Plus />
 					New Database
-				</Button>
+				</Button> */}
+				<DatabaseNewForm />
 			</div>
 		</div>
 	);