From 4588f36fa79f40c361dbe95ce7a157eebef45d8a Mon Sep 17 00:00:00 2001 From: polwex Date: Sat, 28 Jun 2025 01:58:17 +0700 Subject: init --- js/Pepe.tsx | 369 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 369 insertions(+) create mode 100644 js/Pepe.tsx (limited to 'js/Pepe.tsx') diff --git a/js/Pepe.tsx b/js/Pepe.tsx new file mode 100644 index 0000000..c829058 --- /dev/null +++ b/js/Pepe.tsx @@ -0,0 +1,369 @@ +"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("api-key"); + const [apiKey, setApiKey] = useState(""); + const [selectedLocation, setSelectedLocation] = useState( + 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 = () => ( + + +
+ +
+ Connect Your Account + + Enter your API key to get started with VPS deployment + + + +
+
+ + setApiKey(e.target.value)} + disabled={isValidating} + /> +
+ + {error && ( + + + {error} + + )} + + +
+ + + ); + + const renderLocationSelect = () => ( + + +
+ +
+ Choose Server Location + + Select the location where you want to deploy your VPS + + + +
+ {mockLocations.map((location) => ( + handleLocationSelect(location)} + > + +
+ {location.flag} +
+

{location.city}

+

+ {location.country} +

+

+ {location.region} +

+
+
+ + + ))} +
+ + + ); + + const renderCreating = () => ( + + +
+ +
+ Creating Your VPS + + Setting up your server in {selectedLocation?.city},{" "} + {selectedLocation?.country} + + + +
+ {selectedLocation?.flag} + {selectedLocation?.city} +
+

+ This may take a few minutes. Please don't close this window. +

+ + + ); + + const renderSuccess = () => ( + + +
+ +
+ VPS Created Successfully! + + Your server is ready in {selectedLocation?.city},{" "} + {selectedLocation?.country} + + + +
+ {selectedLocation?.flag} + {selectedLocation?.city} +
+ + + + + Your VPS is now online and ready to use! + + + + + + + ); + + const renderError = () => ( + + +
+ +
+ Creation Failed + + We couldn't create your VPS at this time + + + + {error && ( + + + {error} + + )} + +
+ + +
+ + + ); + + return ( +
+
+
+

+ Cloud VPS Deployment +

+

+ Deploy your virtual private server in minutes +

+
+ + {step === "api-key" && renderApiKeyStep()} + {step === "location-select" && renderLocationSelect()} + {step === "creating" && renderCreating()} + {step === "success" && renderSuccess()} + {step === "error" && renderError()} +
+
+ ); +} -- cgit v1.2.3