File size: 5,031 Bytes
378e163 0b4acc5 3cbf49c 0b4acc5 378e163 0b4acc5 378e163 0b4acc5 8185bfc 378e163 0b4acc5 8185bfc 0b4acc5 8185bfc 0b4acc5 3cbf49c 0b4acc5 8185bfc 378e163 8185bfc 378e163 8185bfc 0b4acc5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 |
"use client";
import { useState } from "react";
import { Import } from "lucide-react";
import { Project } from "@/types";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import Loading from "@/components/loading";
import { Input } from "../ui/input";
import { toast } from "sonner";
import { useRouter } from "next/navigation";
export const LoadProject = ({
fullXsBtn = false,
onSuccess,
}: {
fullXsBtn?: boolean;
onSuccess: (project: Project) => void;
}) => {
const router = useRouter();
const [open, setOpen] = useState(false);
const [url, setUrl] = useState<string>("");
const [isLoading, setIsLoading] = useState(false);
const handleClick = async () => {
if (isLoading) return; // Prevent multiple clicks while loading
if (!url) {
toast.error("Please enter a URL.");
return;
}
// The URL validation and parsing logic is removed as we are no longer using Hugging Face
setIsLoading(true);
try {
// You will need to implement your own logic to import a project from a URL
// For now, this will just display a success message
toast.success("Project imported successfully!");
setOpen(false);
setUrl("");
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} catch (error: any) {
if (error?.response?.data?.redirect) {
return router.push(error.response.data.redirect);
}
toast.error(
error?.response?.data?.error ?? "Failed to import the project."
);
} finally {
setIsLoading(false);
}
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<div>
<Button variant="outline" className="max-lg:hidden">
<Import className="size-4 mr-1.5" />
Load existing Project
</Button>
<Button variant="outline" size="sm" className="lg:hidden">
{fullXsBtn && <Import className="size-3.5 mr-1" />}
Load
{fullXsBtn && " existing Project"}
</Button>
</div>
</DialogTrigger>
<DialogContent className="sm:max-w-md !p-0 !rounded-3xl !bg-white !border-neutral-100 overflow-hidden text-center">
<DialogTitle className="hidden" />
<header className="bg-neutral-50 p-6 border-b border-neutral-200/60">
<p className="text-2xl font-semibold text-neutral-950">
Import a Project
</p>
<p className="text-base text-neutral-500 mt-1.5">
Enter the URL of your project to import it.
</p>
</header>
<main className="space-y-4 px-9 pb-9 pt-2">
<div>
<p className="text-sm text-neutral-700 mb-2">
Load HTML from your computer
</p>
<Input
type="file"
accept=".html"
onChange={(e) => {
const file = e.target.files?.[0];
if (file) {
const reader = new FileReader();
reader.onload = (event) => {
const htmlContent = event.target?.result as string;
onSuccess({
html: htmlContent,
prompts: [],
title: "Imported Project",
user_id: "local",
space_id: "local"
});
setOpen(false);
};
reader.readAsText(file);
}
}}
className="!bg-white !border-neutral-300 !text-neutral-800 !placeholder:text-neutral-400 selection:!bg-blue-100"
/>
</div>
<div className="text-sm text-neutral-700 mb-2">
OR
</div>
<div>
<p className="text-sm text-neutral-700 mb-2">
Enter your Project URL
</p>
<Input
type="text"
placeholder="https://example.com/my-project"
value={url}
onChange={(e) => setUrl(e.target.value)}
className="!bg-white !border-neutral-300 !text-neutral-800 !placeholder:text-neutral-400 selection:!bg-blue-100"
/>
</div>
<div>
<p className="text-sm text-neutral-700 mb-2">
Then, let's import it!
</p>
<Button
variant="black"
onClick={handleClick}
className="relative w-full"
>
{isLoading ? (
<>
<Loading
overlay={false}
className="ml-2 size-4 animate-spin"
/>
Importing...
</>
) : (
<>Import Project</>
)}
</Button>
</div>
</main>
</DialogContent>
</Dialog>
);
};
|