dev #1

Merged
RizqiSyahrendra merged 3 commits from dev into main 2025-02-21 09:52:03 +00:00
3 changed files with 10 additions and 5 deletions
Showing only changes of commit 8e0018c185 - Show all commits

View File

@ -2,6 +2,7 @@ import type { ElementType } from "react";
import Link from "next/link"; import Link from "next/link";
import React from "react"; import React from "react";
import { CgSpinner } from "react-icons/cg";
export type Props = { export type Props = {
appearance?: "default" | "primary" | "secondary"; appearance?: "default" | "primary" | "secondary";
@ -12,6 +13,7 @@ export type Props = {
label?: string; label?: string;
newTab?: boolean | null; newTab?: boolean | null;
onClick?: () => void; onClick?: () => void;
isLoading?: boolean;
}; };
export const Button: React.FC<Props> = ({ export const Button: React.FC<Props> = ({
@ -21,6 +23,7 @@ export const Button: React.FC<Props> = ({
href, href,
label, label,
newTab, newTab,
isLoading,
}) => { }) => {
const newTabProps = newTab ? { rel: "noopener noreferrer", target: "_blank" } : {}; const newTabProps = newTab ? { rel: "noopener noreferrer", target: "_blank" } : {};
const Element: ElementType = el; const Element: ElementType = el;
@ -35,19 +38,21 @@ export const Button: React.FC<Props> = ({
const content = ( const content = (
<div className="btn btn-mod btn-color btn-large btn-full btn-circle btn-hover-anim"> <div className="btn btn-mod btn-color btn-large btn-full btn-circle btn-hover-anim">
<span>{label}</span> <span className="flex flex-row">
{label} {isLoading && <CgSpinner color="var(--ext-color-primary-1)" className="animate-spin ml-2" size={24} />}
</span>
</div> </div>
); );
return ( return (
<Element {...elementProps}> <Element {...elementProps} {...{ disabled: isLoading }}>
<React.Fragment> <React.Fragment>
{(el === "link" || el === "a") && ( {(el === "link" || el === "a") && (
<Link {...newTabProps} href={href || ""}> <Link {...newTabProps} href={href || ""}>
{content} {content}
</Link> </Link>
)} )}
{el === "button" && content} {el === "button" && <>{content}</>}
</React.Fragment> </React.Fragment>
</Element> </Element>
); );

View File

@ -76,7 +76,7 @@ export const FormBlock: React.FC<
// delay loading indicator by 1s // delay loading indicator by 1s
loadingTimerID = setTimeout(() => { loadingTimerID = setTimeout(() => {
setIsLoading(true); setIsLoading(true);
}, 1000); }, 250);
try { try {
const req = await fetch(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/form-submissions`, { const req = await fetch(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/form-submissions`, {
@ -160,7 +160,7 @@ export const FormBlock: React.FC<
return null; return null;
})} })}
</div> </div>
<Button appearance="primary" el="button" form={formID} label={submitButtonLabel} /> <Button appearance="primary" el="button" form={formID} label={submitButtonLabel} isLoading={isLoading} />
</form> </form>
)} )}
</div> </div>