Spaces:
Running
Running
File size: 3,487 Bytes
eecbedf |
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 |
import { Rocket } from "lucide-react";
import Image from "next/image";
import Loading from "@/components/loading";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import SpaceIcon from "@/assets/space.svg";
import { Page } from "@/types";
import { api } from "@/lib/api";
import { toast } from "sonner";
import { useState } from "react";
import { useRouter } from "next/navigation";
export const DeployButtonContent = ({
pages,
options,
prompts,
}: {
pages: Page[];
options?: {
title?: string;
description?: string;
};
prompts: string[];
}) => {
const router = useRouter();
const [loading, setLoading] = useState(false);
const [config, setConfig] = useState({
title: "",
});
const createSpace = async () => {
if (!config.title) {
toast.error("Please enter a title for your space.");
return;
}
setLoading(true);
try {
const res = await api.post("/me/projects", {
title: config.title,
pages,
prompts,
});
if (res.data.ok) {
router.push(`/projects/${res.data.path}?deploy=true`);
} else {
toast.error(res?.data?.error || "Failed to create space");
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} catch (err: any) {
toast.error(err.response?.data?.error || err.message);
} finally {
setLoading(false);
}
};
return (
<>
<header className="bg-neutral-50 p-6 border-b border-neutral-200/60">
<div className="flex items-center justify-center -space-x-4 mb-3">
<div className="size-9 rounded-full bg-amber-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
🚀
</div>
<div className="size-11 rounded-full bg-red-200 shadow-2xl flex items-center justify-center z-2">
<Image src={SpaceIcon} alt="Space Icon" className="size-7" />
</div>
<div className="size-9 rounded-full bg-sky-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
👻
</div>
</div>
<p className="text-xl font-semibold text-neutral-950">
Publish as Space!
</p>
<p className="text-sm text-neutral-500 mt-1.5">
{options?.description ??
"Save and Publish your project to a Space on the Hub. Spaces are a way to share your project with the world."}
</p>
</header>
<main className="space-y-4 p-6">
<div>
<p className="text-sm text-neutral-700 mb-2">
Choose a title for your space:
</p>
<Input
type="text"
placeholder="My Awesome Website"
value={config.title}
onChange={(e) => setConfig({ ...config, title: 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 publish it!
</p>
<Button
variant="black"
onClick={createSpace}
className="relative w-full"
disabled={loading}
>
Publish Space <Rocket className="size-4" />
{loading && <Loading className="ml-2 size-4 animate-spin" />}
</Button>
</div>
</main>
</>
);
};
|