mirror of
https://github.com/fosrl/pangolin.git
synced 2025-12-05 19:17:29 -06:00
🚧 create blueprint form
This commit is contained in:
Fred KISSIE
@@ -1155,8 +1155,15 @@
|
||||
"blueprints": "Blueprints",
|
||||
"blueprintsDescription": "Blueprints are declarative YAML configurations that define your resources and their settings",
|
||||
"blueprintAdd": "Add Blueprint",
|
||||
"blueprintGoBack": "Back to blueprints",
|
||||
"blueprintCreate": "Create blueprint",
|
||||
"blueprintCreateDescription2": "Follow the steps below to create and apply a new blueprint",
|
||||
"blueprintInfo": "Blueprint Information",
|
||||
"blueprintNameDescription": "This is the display name for the blueprint.",
|
||||
"blueprintContentsDescription": "Define the YAML content describing your infrastructure",
|
||||
"searchBlueprintProgress": "Search blueprints...",
|
||||
"source": "Source",
|
||||
"contents": "Contents",
|
||||
"enableDockerSocket": "Enable Docker Blueprint",
|
||||
"enableDockerSocketDescription": "Enable Docker Socket label scraping for blueprint labels. Socket path must be provided to Newt.",
|
||||
"enableDockerSocketLink": "Learn More",
|
||||
|
||||
@@ -7,7 +7,8 @@ const nextConfig = {
|
||||
eslint: {
|
||||
ignoreDuringBuilds: true
|
||||
},
|
||||
output: "standalone"
|
||||
output: "standalone",
|
||||
|
||||
};
|
||||
|
||||
export default withNextIntl(nextConfig);
|
||||
|
||||
61
package-lock.json
generated
61
package-lock.json
generated
@@ -12,6 +12,7 @@
|
||||
"@asteasolutions/zod-to-openapi": "^7.3.4",
|
||||
"@aws-sdk/client-s3": "3.908.0",
|
||||
"@hookform/resolvers": "5.2.2",
|
||||
"@monaco-editor/react": "^4.7.0",
|
||||
"@node-rs/argon2": "^2.0.2",
|
||||
"@oslojs/crypto": "1.0.1",
|
||||
"@oslojs/encoding": "1.1.0",
|
||||
@@ -3857,6 +3858,29 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@monaco-editor/loader": {
|
||||
"version": "1.6.1",
|
||||
"resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.6.1.tgz",
|
||||
"integrity": "sha512-w3tEnj9HYEC73wtjdpR089AqkUPskFRcdkxsiSFt3SoUc3OHpmu+leP94CXBm4mHfefmhsdfI0ZQu6qJ0wgtPg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"state-local": "^1.0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/@monaco-editor/react": {
|
||||
"version": "4.7.0",
|
||||
"resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.7.0.tgz",
|
||||
"integrity": "sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@monaco-editor/loader": "^1.5.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"monaco-editor": ">= 0.25.0 < 1",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@napi-rs/wasm-runtime": {
|
||||
"version": "0.2.12",
|
||||
"resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
|
||||
@@ -11200,6 +11224,13 @@
|
||||
"url": "https://github.com/fb55/domhandler?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/dompurify": {
|
||||
"version": "3.1.7",
|
||||
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.7.tgz",
|
||||
"integrity": "sha512-VaTstWtsneJY8xzy7DekmYWEOZcmzIe3Qb3zPd4STve1OBTa+e+WmS1ITQec1fZYXI3HCsOZZiSMpG6oxoWMWQ==",
|
||||
"license": "(MPL-2.0 OR Apache-2.0)",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/domutils": {
|
||||
"version": "3.2.2",
|
||||
"resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
|
||||
@@ -14980,6 +15011,30 @@
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/monaco-editor": {
|
||||
"version": "0.54.0",
|
||||
"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.54.0.tgz",
|
||||
"integrity": "sha512-hx45SEUoLatgWxHKCmlLJH81xBo0uXP4sRkESUpmDQevfi+e7K1VuiSprK6UpQ8u4zOcKNiH0pMvHvlMWA/4cw==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"dompurify": "3.1.7",
|
||||
"marked": "14.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/monaco-editor/node_modules/marked": {
|
||||
"version": "14.0.0",
|
||||
"resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz",
|
||||
"integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"marked": "bin/marked.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 18"
|
||||
}
|
||||
},
|
||||
"node_modules/motion-dom": {
|
||||
"version": "12.23.23",
|
||||
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz",
|
||||
@@ -20587,6 +20642,12 @@
|
||||
"integrity": "sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/state-local": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
|
||||
"integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/statuses": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
|
||||
|
||||
@@ -35,6 +35,7 @@
|
||||
"@asteasolutions/zod-to-openapi": "^7.3.4",
|
||||
"@aws-sdk/client-s3": "3.908.0",
|
||||
"@hookform/resolvers": "5.2.2",
|
||||
"@monaco-editor/react": "^4.7.0",
|
||||
"@node-rs/argon2": "^2.0.2",
|
||||
"@oslojs/crypto": "1.0.1",
|
||||
"@oslojs/encoding": "1.1.0",
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
{"$ref":"#/definitions/BluePrintSchema","definitions":{"BluePrintSchema":{"type":"object","properties":{"proxy-resources":{"type":"object","additionalProperties":{"type":"object","properties":{"name":{"type":"string"},"protocol":{"type":"string","enum":["http","tcp","udp"]},"ssl":{"type":"boolean"},"full-domain":{"type":"string"},"proxy-port":{"type":"integer","minimum":1,"maximum":65535},"enabled":{"type":"boolean"},"targets":{"type":"array","items":{"anyOf":[{"type":"object","properties":{"site":{"type":"string"},"method":{"type":"string","enum":["http","https","h2c"]},"hostname":{"type":"string"},"port":{"type":"integer","minimum":1,"maximum":65535},"enabled":{"type":"boolean","default":true},"internal-port":{"type":"integer","minimum":1,"maximum":65535},"path":{"type":"string"},"path-match":{"anyOf":[{"anyOf":[{"not":{}},{"type":"string","enum":["exact","prefix","regex"]}]},{"type":"null"}]},"healthcheck":{"type":"object","properties":{"hostname":{"type":"string"},"port":{"type":"integer","minimum":1,"maximum":65535},"enabled":{"type":"boolean","default":true},"path":{"type":"string"},"scheme":{"type":"string"},"mode":{"type":"string","default":"http"},"interval":{"type":"integer","default":30},"unhealthyInterval":{"type":"integer","default":30},"timeout":{"type":"integer","default":5},"headers":{"anyOf":[{"type":"array","items":{"type":"object","properties":{"name":{"type":"string"},"value":{"type":"string"}},"required":["name","value"],"additionalProperties":false}},{"type":"null"}],"default":null},"followRedirects":{"type":"boolean","default":true},"method":{"type":"string","default":"GET"},"status":{"type":"integer"}},"required":["hostname","port"],"additionalProperties":false},"rewritePath":{"type":"string"},"rewrite-match":{"anyOf":[{"anyOf":[{"not":{}},{"type":"string","enum":["exact","prefix","regex","stripPrefix"]}]},{"type":"null"}]},"priority":{"type":"integer","minimum":1,"maximum":1000,"default":100}},"required":["hostname","port"],"additionalProperties":false},{"type":"null"}]},"default":[]},"auth":{"type":"object","properties":{"pincode":{"type":"number","minimum":100000,"maximum":999999},"password":{"type":"string","minLength":1},"basic-auth":{"type":"object","properties":{"user":{"type":"string","minLength":1},"password":{"type":"string","minLength":1}},"required":["user","password"],"additionalProperties":false},"sso-enabled":{"type":"boolean","default":false},"sso-roles":{"type":"array","items":{"type":"string"},"default":[]},"sso-users":{"type":"array","items":{"type":"string","format":"email"},"default":[]},"whitelist-users":{"type":"array","items":{"type":"string","format":"email"},"default":[]}},"additionalProperties":false},"host-header":{"type":"string"},"tls-server-name":{"type":"string"},"headers":{"type":"array","items":{"type":"object","properties":{"name":{"type":"string","minLength":1},"value":{"type":"string","minLength":1}},"required":["name","value"],"additionalProperties":false}},"rules":{"type":"array","items":{"type":"object","properties":{"action":{"type":"string","enum":["allow","deny","pass"]},"match":{"type":"string","enum":["cidr","path","ip","country"]},"value":{"type":"string"}},"required":["action","match","value"],"additionalProperties":false}}},"additionalProperties":false},"default":{}},"client-resources":{"type":"object","additionalProperties":{"type":"object","properties":{"name":{"type":"string","minLength":2,"maxLength":100},"site":{"type":"string","minLength":2,"maxLength":100},"protocol":{"type":"string","enum":["tcp","udp"]},"proxy-port":{"type":"number","minimum":1,"maximum":65535},"hostname":{"type":"string","minLength":1,"maxLength":255},"internal-port":{"type":"number","minimum":1,"maximum":65535},"enabled":{"type":"boolean","default":true}},"required":["name","protocol","proxy-port","hostname","internal-port"],"additionalProperties":false},"default":{}},"sites":{"type":"object","additionalProperties":{"type":"object","properties":{"name":{"type":"string","minLength":1,"maxLength":100},"docker-socket-enabled":{"type":"boolean","default":true}},"required":["name"],"additionalProperties":false},"default":{}}},"additionalProperties":false}},"$schema":"http://json-schema.org/draft-07/schema#"}
|
||||
@@ -1,9 +1,43 @@
|
||||
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import Link from "next/link";
|
||||
|
||||
import type { Metadata } from "next";
|
||||
import { ArrowLeft } from "lucide-react";
|
||||
import CreateBlueprintForm from "@app/components/CreateBlueprintForm";
|
||||
|
||||
export interface CreateBlueprintPageProps {
|
||||
params: Promise<{ orgId: string }>;
|
||||
}
|
||||
|
||||
export default function CreateBlueprintPage(props: CreateBlueprintPageProps) {
|
||||
return <></>;
|
||||
export const metadata: Metadata = {
|
||||
title: "Create blueprint"
|
||||
};
|
||||
|
||||
export default async function CreateBlueprintPage(
|
||||
props: CreateBlueprintPageProps
|
||||
) {
|
||||
const t = await getTranslations();
|
||||
|
||||
const orgId = (await props.params).orgId;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col gap-2 items-start">
|
||||
<Button variant="link" asChild className="gap-1 px-0">
|
||||
<Link href={`/${orgId}/settings/blueprints`}>
|
||||
<ArrowLeft className="size-4 flex-none" />{" "}
|
||||
{t("blueprintGoBack")}
|
||||
</Link>
|
||||
</Button>
|
||||
<SettingsSectionTitle
|
||||
title={t("blueprintCreate")}
|
||||
description={t("blueprintCreateDescription2")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<CreateBlueprintForm />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
264
src/components/CreateBlueprintForm.tsx
Normal file
264
src/components/CreateBlueprintForm.tsx
Normal file
@@ -0,0 +1,264 @@
|
||||
"use client";
|
||||
import {
|
||||
SettingsContainer,
|
||||
SettingsSection,
|
||||
SettingsSectionBody,
|
||||
SettingsSectionDescription,
|
||||
SettingsSectionForm,
|
||||
SettingsSectionHeader,
|
||||
SettingsSectionTitle
|
||||
} from "@app/components/Settings";
|
||||
import { useTranslations } from "next-intl";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage
|
||||
} from "@app/components/ui/form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import z from "zod";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { Input } from "./ui/input";
|
||||
import { useActionState, useTransition } from "react";
|
||||
import Editor, { useMonaco } from "@monaco-editor/react";
|
||||
import { cn } from "@app/lib/cn";
|
||||
import { Button } from "./ui/button";
|
||||
|
||||
export type CreateBlueprintFormProps = {};
|
||||
|
||||
export default function CreateBlueprintForm({}: CreateBlueprintFormProps) {
|
||||
const t = useTranslations();
|
||||
|
||||
const [, formAction, isSubmitting] = useActionState(onSubmit, null);
|
||||
|
||||
const baseForm = useForm({
|
||||
resolver: zodResolver(
|
||||
z.object({
|
||||
name: z.string().min(1).max(255),
|
||||
contents: z.string()
|
||||
})
|
||||
),
|
||||
defaultValues: {
|
||||
name: "",
|
||||
contents: `proxy-resources:
|
||||
resource-nice-id-uno:
|
||||
name: this is my resource
|
||||
protocol: http
|
||||
full-domain: duce.test.example.com
|
||||
host-header: example.com
|
||||
tls-server-name: example.com
|
||||
`
|
||||
}
|
||||
});
|
||||
|
||||
async function onSubmit() {
|
||||
// setCreateLoading(true);
|
||||
// const baseData = baseForm.getValues();
|
||||
// const isHttp = baseData.http;
|
||||
// try {
|
||||
// const payload = {
|
||||
// name: baseData.name,
|
||||
// http: baseData.http,
|
||||
// };
|
||||
// let sanitizedSubdomain: string | undefined;
|
||||
// if (isHttp) {
|
||||
// const httpData = httpForm.getValues();
|
||||
// sanitizedSubdomain = httpData.subdomain
|
||||
// ? finalizeSubdomainSanitize(httpData.subdomain)
|
||||
// : undefined;
|
||||
// Object.assign(payload, {
|
||||
// subdomain: sanitizedSubdomain
|
||||
// ? toASCII(sanitizedSubdomain)
|
||||
// : undefined,
|
||||
// domainId: httpData.domainId,
|
||||
// protocol: "tcp"
|
||||
// });
|
||||
// } else {
|
||||
// const tcpUdpData = tcpUdpForm.getValues();
|
||||
// Object.assign(payload, {
|
||||
// protocol: tcpUdpData.protocol,
|
||||
// proxyPort: tcpUdpData.proxyPort
|
||||
// // enableProxy: tcpUdpData.enableProxy
|
||||
// });
|
||||
// }
|
||||
// const res = await api
|
||||
// .put<
|
||||
// AxiosResponse<Resource>
|
||||
// >(`/org/${orgId}/resource/`, payload)
|
||||
// .catch((e) => {
|
||||
// toast({
|
||||
// variant: "destructive",
|
||||
// title: t("resourceErrorCreate"),
|
||||
// description: formatAxiosError(
|
||||
// e,
|
||||
// t("resourceErrorCreateDescription")
|
||||
// )
|
||||
// });
|
||||
// });
|
||||
// if (res && res.status === 201) {
|
||||
// const id = res.data.data.resourceId;
|
||||
// const niceId = res.data.data.niceId;
|
||||
// setNiceId(niceId);
|
||||
// // Create targets if any exist
|
||||
// if (targets.length > 0) {
|
||||
// try {
|
||||
// for (const target of targets) {
|
||||
// const data: any = {
|
||||
// ip: target.ip,
|
||||
// port: target.port,
|
||||
// method: target.method,
|
||||
// enabled: target.enabled,
|
||||
// siteId: target.siteId,
|
||||
// hcEnabled: target.hcEnabled,
|
||||
// hcPath: target.hcPath || null,
|
||||
// hcMethod: target.hcMethod || null,
|
||||
// hcInterval: target.hcInterval || null,
|
||||
// hcTimeout: target.hcTimeout || null,
|
||||
// hcHeaders: target.hcHeaders || null,
|
||||
// hcScheme: target.hcScheme || null,
|
||||
// hcHostname: target.hcHostname || null,
|
||||
// hcPort: target.hcPort || null,
|
||||
// hcFollowRedirects:
|
||||
// target.hcFollowRedirects || null,
|
||||
// hcStatus: target.hcStatus || null
|
||||
// };
|
||||
// // Only include path-related fields for HTTP resources
|
||||
// if (isHttp) {
|
||||
// data.path = target.path;
|
||||
// data.pathMatchType = target.pathMatchType;
|
||||
// data.rewritePath = target.rewritePath;
|
||||
// data.rewritePathType = target.rewritePathType;
|
||||
// data.priority = target.priority;
|
||||
// }
|
||||
// await api.put(`/resource/${id}/target`, data);
|
||||
// }
|
||||
// } catch (targetError) {
|
||||
// console.error("Error creating targets:", targetError);
|
||||
// toast({
|
||||
// variant: "destructive",
|
||||
// title: t("targetErrorCreate"),
|
||||
// description: formatAxiosError(
|
||||
// targetError,
|
||||
// t("targetErrorCreateDescription")
|
||||
// )
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
// if (isHttp) {
|
||||
// router.push(`/${orgId}/settings/resources/${niceId}`);
|
||||
// } else {
|
||||
// const tcpUdpData = tcpUdpForm.getValues();
|
||||
// // Only show config snippets if enableProxy is explicitly true
|
||||
// // if (tcpUdpData.enableProxy === true) {
|
||||
// setShowSnippets(true);
|
||||
// router.refresh();
|
||||
// // } else {
|
||||
// // // If enableProxy is false or undefined, go directly to resource page
|
||||
// // router.push(`/${orgId}/settings/resources/${id}`);
|
||||
// // }
|
||||
// }
|
||||
// }
|
||||
// } catch (e) {
|
||||
// console.error(t("resourceErrorCreateMessage"), e);
|
||||
// toast({
|
||||
// variant: "destructive",
|
||||
// title: t("resourceErrorCreate"),
|
||||
// description: t("resourceErrorCreateMessageDescription")
|
||||
// });
|
||||
// }
|
||||
// setCreateLoading(false);
|
||||
}
|
||||
return (
|
||||
<Form {...baseForm}>
|
||||
<form action={formAction} id="base-resource-form">
|
||||
<SettingsContainer>
|
||||
<SettingsSection>
|
||||
<SettingsSectionHeader>
|
||||
<SettingsSectionTitle>
|
||||
{t("blueprintInfo")}
|
||||
</SettingsSectionTitle>
|
||||
</SettingsSectionHeader>
|
||||
<SettingsSectionBody>
|
||||
<SettingsSectionForm>
|
||||
<FormField
|
||||
control={baseForm.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("name")}</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
<FormDescription>
|
||||
{t("blueprintNameDescription")}
|
||||
</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</SettingsSectionForm>
|
||||
</SettingsSectionBody>
|
||||
</SettingsSection>
|
||||
|
||||
<SettingsSection>
|
||||
<SettingsSectionHeader>
|
||||
<SettingsSectionTitle>
|
||||
{t("contents")}
|
||||
</SettingsSectionTitle>
|
||||
<SettingsSectionDescription>
|
||||
{t("blueprintContentsDescription")}
|
||||
</SettingsSectionDescription>
|
||||
</SettingsSectionHeader>
|
||||
<SettingsSectionBody>
|
||||
<div
|
||||
className={cn(
|
||||
"resize-y h-52 min-h-52 overflow-y-auto overflow-x-clip max-w-full"
|
||||
// "w-[80dvw] sm:w-[88dvw] md:w-[82dvw] lg:w-[70dvw] xl:w-[855px]"
|
||||
)}
|
||||
>
|
||||
<Editor
|
||||
className="w-full h-full max-w-full"
|
||||
language="yaml"
|
||||
// value={changedContents}
|
||||
theme="vs-dark"
|
||||
options={{
|
||||
minimap: {
|
||||
enabled: false
|
||||
}
|
||||
}}
|
||||
// onChange={(value) => setChangedContents(value ?? "")}
|
||||
/>
|
||||
|
||||
<textarea name="" id="" hidden />
|
||||
</div>
|
||||
</SettingsSectionBody>
|
||||
</SettingsSection>
|
||||
|
||||
<div className="flex justify-end space-x-2 mt-8">
|
||||
<Button
|
||||
type="submit"
|
||||
// onClick={async () => {
|
||||
// // const isHttp = baseForm.watch("http");
|
||||
// // const baseValid = await baseForm.trigger();
|
||||
// // const settingsValid = isHttp
|
||||
// // ? await httpForm.trigger()
|
||||
// // : await tcpUdpForm.trigger();
|
||||
// // console.log(httpForm.getValues());
|
||||
// // if (baseValid && settingsValid) {
|
||||
// // onSubmit();
|
||||
// // }
|
||||
// }}
|
||||
loading={isSubmitting}
|
||||
// disabled={!areAllTargetsValid()}
|
||||
>
|
||||
{t("resourceCreate")}
|
||||
</Button>
|
||||
</div>
|
||||
</SettingsContainer>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
@@ -71,8 +71,16 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
disabled={loading || props.disabled} // Disable button when loading
|
||||
{...props}
|
||||
>
|
||||
{loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
{props.children}
|
||||
{asChild ? (
|
||||
props.children
|
||||
) : (
|
||||
<>
|
||||
{loading && (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
)}
|
||||
{props.children}
|
||||
</>
|
||||
)}
|
||||
</Comp>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user