104 lines
3.1 KiB
TypeScript
104 lines
3.1 KiB
TypeScript
'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>
|
|
);
|
|
}
|