updated siliconpin
This commit is contained in:
suvodip ghosh
214
src/components/BuyServices/NewDroplet.jsx
Normal file
214
src/components/BuyServices/NewDroplet.jsx
Normal file
@@ -0,0 +1,214 @@
|
||||
import React, { useState } from "react";
|
||||
import { Button } from '../ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card";
|
||||
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "../ui/select";
|
||||
import { Input } from "../ui/input";
|
||||
import { Label } from "../ui/label";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { useToast } from "../ui/toast";
|
||||
|
||||
export default function NewDroplet() {
|
||||
const { showToast } = useToast();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
region: "",
|
||||
size: "",
|
||||
image: "",
|
||||
backups: false,
|
||||
ipv6: true,
|
||||
monitoring: false
|
||||
});
|
||||
|
||||
const regions = [
|
||||
{ value: "nyc1", label: "New York 1" },
|
||||
{ value: "nyc3", label: "New York 3" },
|
||||
{ value: "sfo3", label: "San Francisco 3" },
|
||||
{ value: "ams3", label: "Amsterdam 3" },
|
||||
];
|
||||
|
||||
const sizes = [
|
||||
{ value: "s-1vcpu-1gb", label: "1 vCPU, 1GB RAM" },
|
||||
{ value: "s-1vcpu-2gb", label: "1 vCPU, 2GB RAM" },
|
||||
{ value: "s-2vcpu-2gb", label: "2 vCPU, 2GB RAM" },
|
||||
];
|
||||
|
||||
const images = [
|
||||
{ value: "ubuntu-22-04-x64", label: "Ubuntu 22.04" },
|
||||
{ value: "ubuntu-20-04-x64", label: "Ubuntu 20.04" },
|
||||
{ value: "debian-11-x64", label: "Debian 11" },
|
||||
];
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value, type, checked } = e.target;
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: type === 'checkbox' ? checked : value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSelectChange = (name, value) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
const response = await fetch("https://api.digitalocean.com/v2/droplets", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Authorization": "Bearer dop_v1_b6a075ece5786faf7c58d21761dbf95d47af372da062d68a870ce2a0bae51adf"
|
||||
},
|
||||
body: JSON.stringify({
|
||||
...formData,
|
||||
ssh_keys: [47441478]
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
showToast(`Droplet ${formData.name} created successfully!`, { type: 'success' });
|
||||
// Reset form
|
||||
setFormData({
|
||||
name: "",
|
||||
region: "nyc3",
|
||||
size: "s-1vcpu-1gb",
|
||||
image: "ubuntu-22-04-x64",
|
||||
backups: false,
|
||||
ipv6: true,
|
||||
monitoring: false
|
||||
});
|
||||
} else {
|
||||
throw new Error(data.message || "Failed to create droplet");
|
||||
}
|
||||
} catch (error) {
|
||||
showToast(error.message, { type: 'error' });
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="max-w-xl mx-auto px-4 my-4">
|
||||
<CardHeader>
|
||||
<CardTitle>Create New Droplet</CardTitle>
|
||||
<CardDescription>Configure your new cloud server</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Droplet Name</Label>
|
||||
<Input
|
||||
id="name"
|
||||
name="name"
|
||||
type="text"
|
||||
placeholder="my-droplet"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Region</Label>
|
||||
<Select
|
||||
value={formData.region}
|
||||
onValueChange={(value) => handleSelectChange("region", value)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select region" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{regions.map(region => (
|
||||
<SelectItem key={region.value} value={region.value}>
|
||||
{region.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Size</Label>
|
||||
<Select
|
||||
value={formData.size}
|
||||
onValueChange={(value) => handleSelectChange("size", value)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select size" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{sizes.map(size => (
|
||||
<SelectItem key={size.value} value={size.value}>
|
||||
{size.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Image</Label>
|
||||
<Select
|
||||
value={formData.image}
|
||||
onValueChange={(value) => handleSelectChange("image", value)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select OS image" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{images.map(image => (
|
||||
<SelectItem key={image.value} value={image.value}>
|
||||
{image.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="backups"
|
||||
name="backups"
|
||||
checked={formData.backups}
|
||||
onChange={handleChange}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
<Label htmlFor="backups">Enable Backups</Label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="ipv6"
|
||||
name="ipv6"
|
||||
checked={formData.ipv6}
|
||||
onChange={handleChange}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
<Label htmlFor="ipv6">Enable IPv6</Label>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full" disabled={isLoading}>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Creating...
|
||||
</>
|
||||
) : (
|
||||
"Create Droplet"
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user