diff options
Diffstat (limited to 'js/Pepe.tsx')
| -rw-r--r-- | js/Pepe.tsx | 369 |
1 files changed, 0 insertions, 369 deletions
diff --git a/js/Pepe.tsx b/js/Pepe.tsx deleted file mode 100644 index e247f9a..0000000 --- a/js/Pepe.tsx +++ /dev/null @@ -1,369 +0,0 @@ -"use client"; - -import type React from "react"; - -import { useState } from "react"; -import { Button } from "@/components/ui/button"; -import { Input } from "@/components/ui/input"; -import { Label } from "@/components/ui/label"; -import { - Card, - CardContent, - CardDescription, - CardHeader, - CardTitle, -} from "@/components/ui/card"; -import { Alert, AlertDescription } from "@/components/ui/alert"; -import { - Loader2, - Server, - MapPin, - CheckCircle, - AlertCircle, - Key, -} from "lucide-react"; - -// Mock data for locations -const mockLocations = [ - { - id: "nyc", - city: "New York", - country: "United States", - flag: "πΊπΈ", - region: "North America", - }, - { - id: "lon", - city: "London", - country: "United Kingdom", - flag: "π¬π§", - region: "Europe", - }, - { - id: "fra", - city: "Frankfurt", - country: "Germany", - flag: "π©πͺ", - region: "Europe", - }, - { - id: "sgp", - city: "Singapore", - country: "Singapore", - flag: "πΈπ¬", - region: "Asia Pacific", - }, - { - id: "tok", - city: "Tokyo", - country: "Japan", - flag: "π―π΅", - region: "Asia Pacific", - }, - { - id: "syd", - city: "Sydney", - country: "Australia", - flag: "π¦πΊ", - region: "Asia Pacific", - }, - { - id: "tor", - city: "Toronto", - country: "Canada", - flag: "π¨π¦", - region: "North America", - }, - { - id: "ams", - city: "Amsterdam", - country: "Netherlands", - flag: "π³π±", - region: "Europe", - }, -]; - -type Step = "api-key" | "location-select" | "creating" | "success" | "error"; - -interface Location { - id: string; - city: string; - country: string; - flag: string; - region: string; -} - -export default function VPSProvider() { - const [step, setStep] = useState<Step>("api-key"); - const [apiKey, setApiKey] = useState(""); - const [selectedLocation, setSelectedLocation] = useState<Location | null>( - null, - ); - const [error, setError] = useState(""); - const [isValidating, setIsValidating] = useState(false); - const [isCreating, setIsCreating] = useState(false); - - // Mock API key validation - const validateApiKey = async (key: string) => { - setIsValidating(true); - setError(""); - - // Simulate API call - await new Promise((resolve) => setTimeout(resolve, 1500)); - - // Mock validation - accept keys that are at least 20 characters - if (key.length >= 20) { - setStep("location-select"); - } else { - setError("Invalid API key. Please check your credentials and try again."); - } - - setIsValidating(false); - }; - - // Mock VPS creation - const createVPS = async (location: Location) => { - setIsCreating(true); - setError(""); - setStep("creating"); - - // Simulate VPS creation - await new Promise((resolve) => setTimeout(resolve, 3000)); - - // Mock success/failure (90% success rate) - if (Math.random() > 0.1) { - setStep("success"); - } else { - setError("Failed to create VPS. Please try again or contact support."); - setStep("error"); - } - - setIsCreating(false); - }; - - const handleApiKeySubmit = (e: React.FormEvent) => { - e.preventDefault(); - if (apiKey.trim()) { - validateApiKey(apiKey.trim()); - } - }; - - const handleLocationSelect = (location: Location) => { - setSelectedLocation(location); - createVPS(location); - }; - - const handleRetry = () => { - setError(""); - setStep("location-select"); - setSelectedLocation(null); - }; - - const handleNext = () => { - // This is where the user's flow continues - console.log("Proceeding to next step..."); - }; - - const renderApiKeyStep = () => ( - <Card className="w-full max-w-md mx-auto"> - <CardHeader className="text-center"> - <div className="mx-auto w-[20px] h-12 bg-blue-100 rounded-full flex items-center justify-center mb-4"> - <Key className="w-6 h-4 text-blue-600" /> - </div> - <CardTitle>Connect Your Account</CardTitle> - <CardDescription> - Enter your API key to get started with VPS deployment - </CardDescription> - </CardHeader> - <CardContent> - <form onSubmit={handleApiKeySubmit} className="space-y-4"> - <div className="space-y-2"> - <Label htmlFor="apiKey">API Key</Label> - <Input - id="apiKey" - type="password" - placeholder="Enter your API key..." - value={apiKey} - onChange={(e) => setApiKey(e.target.value)} - disabled={isValidating} - /> - </div> - - {error && ( - <Alert variant="destructive"> - <AlertCircle className="h-4 w-4" /> - <AlertDescription>{error}</AlertDescription> - </Alert> - )} - - <Button - type="submit" - className="w-full" - disabled={!apiKey.trim() || isValidating} - > - {isValidating ? ( - <> - <Loader2 className="mr-2 h-4 w-4 animate-spin" /> - Validating... - </> - ) : ( - "Validate API Key" - )} - </Button> - </form> - </CardContent> - </Card> - ); - - const renderLocationSelect = () => ( - <Card className="w-full max-w-4xl mx-auto"> - <CardHeader className="text-center"> - <div className="mx-auto w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-4"> - <MapPin className="w-6 h-6 text-green-500" /> - </div> - <CardTitle>Choose Server Location</CardTitle> - <CardDescription> - Select the location where you want to deploy your VPS - </CardDescription> - </CardHeader> - <CardContent> - <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> - {mockLocations.map((location) => ( - <Card - key={location.id} - className="cursor-pointer hover:shadow-md transition-shadow border-2 hover:border-blue-200" - onClick={() => handleLocationSelect(location)} - > - <CardContent className="p-4"> - <div className="flex items-center space-x-3"> - <span className="text-2xl">{location.flag}</span> - <div className="flex-1"> - <h3 className="font-semibold">{location.city}</h3> - <p className="text-sm text-muted-foreground"> - {location.country} - </p> - <p className="text-xs text-muted-foreground"> - {location.region} - </p> - </div> - </div> - </CardContent> - </Card> - ))} - </div> - </CardContent> - </Card> - ); - - const renderCreating = () => ( - <Card className="w-full max-w-md mx-auto"> - <CardHeader className="text-center"> - <div className="mx-auto w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-4"> - <Loader2 className="w-6 h-6 text-blue-600 animate-spin" /> - </div> - <CardTitle>Creating Your VPS</CardTitle> - <CardDescription> - Setting up your server in {selectedLocation?.city},{" "} - {selectedLocation?.country} - </CardDescription> - </CardHeader> - <CardContent className="text-center"> - <div className="flex items-center justify-center space-x-2 mb-4"> - <span className="text-2xl">{selectedLocation?.flag}</span> - <span className="font-medium">{selectedLocation?.city}</span> - </div> - <p className="text-sm text-muted-foreground"> - This may take a few minutes. Please don't close this window. - </p> - </CardContent> - </Card> - ); - - const renderSuccess = () => ( - <Card className="w-full max-w-md mx-auto"> - <CardHeader className="text-center"> - <div className="mx-auto w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-4"> - <CheckCircle className="w-6 h-6 text-green-600" /> - </div> - <CardTitle>VPS Created Successfully!</CardTitle> - <CardDescription> - Your server is ready in {selectedLocation?.city},{" "} - {selectedLocation?.country} - </CardDescription> - </CardHeader> - <CardContent className="text-center space-y-4"> - <div className="flex items-center justify-center space-x-2 mb-4"> - <span className="text-2xl">{selectedLocation?.flag}</span> - <span className="font-medium">{selectedLocation?.city}</span> - </div> - - <Alert> - <Server className="h-4 w-4" /> - <AlertDescription> - Your VPS is now online and ready to use! - </AlertDescription> - </Alert> - - <Button onClick={handleNext} className="w-full"> - Next - </Button> - </CardContent> - </Card> - ); - - const renderError = () => ( - <Card className="w-full max-w-md mx-auto"> - <CardHeader className="text-center"> - <div className="mx-auto w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mb-4"> - <AlertCircle className="w-6 h-6 text-red-600" /> - </div> - <CardTitle>Creation Failed</CardTitle> - <CardDescription> - We couldn't create your VPS at this time - </CardDescription> - </CardHeader> - <CardContent className="text-center space-y-4"> - {error && ( - <Alert variant="destructive"> - <AlertCircle className="h-4 w-4" /> - <AlertDescription>{error}</AlertDescription> - </Alert> - )} - - <div className="flex space-x-2"> - <Button variant="outline" onClick={handleRetry} className="flex-1"> - Try Again - </Button> - <Button - variant="outline" - onClick={() => setStep("api-key")} - className="flex-1" - > - Start Over - </Button> - </div> - </CardContent> - </Card> - ); - - return ( - <div className="min-h-screen bg-gray-50 py-12 px-4"> - <div className="max-w-6xl mx-auto"> - <div className="text-center mb-8"> - <h1 className="text-3xl font-bold text-gray-900 mb-2"> - Cloud VPS Deployment - </h1> - <p className="text-gray-600"> - Deploy your virtual private server in minutes - </p> - </div> - - {step === "api-key" && renderApiKeyStep()} - {step === "location-select" && renderLocationSelect()} - {step === "creating" && renderCreating()} - {step === "success" && renderSuccess()} - {step === "error" && renderError()} - </div> - </div> - ); -} |