added a feature for sending mail from within the application
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
|
||||
NEXT_PUBLIC_API_BASE_URL=http://localhost:8080
|
||||
BACKEND_BASE_URL=http://localhost:8080
|
||||
|
||||
# Middleware to limited site to only root page
|
||||
NEXT_PUBLIC_LAUNCH_ONLY_ROOT=false
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
"use server";
|
||||
|
||||
export type SendEmailPayload = {
|
||||
recipient: string;
|
||||
subject: string;
|
||||
body: string;
|
||||
};
|
||||
|
||||
export type ApiResponse<T> = {
|
||||
success?: boolean;
|
||||
message?: string;
|
||||
data?: T;
|
||||
};
|
||||
|
||||
export type EmailRequest = {
|
||||
id: number;
|
||||
recipient: string;
|
||||
subject: string;
|
||||
body: string;
|
||||
sentAt: string | null;
|
||||
status: "PENDING" | "SENT" | "FAILED" | string;
|
||||
errorMessage: string | null;
|
||||
createdAt: string;
|
||||
};
|
||||
|
||||
export async function sendEmailAction(
|
||||
payload: SendEmailPayload
|
||||
): Promise<ApiResponse<EmailRequest>> {
|
||||
const baseUrl = process.env.BACKEND_BASE_URL;
|
||||
if (!baseUrl) {
|
||||
throw new Error("BACKEND_BASE_URL is not set");
|
||||
}
|
||||
|
||||
const res = await fetch(`${baseUrl}/api/email/send`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
// Authorization: `Bearer ${process.env.BACKEND_JWT}`, // if needed
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
cache: "no-store",
|
||||
});
|
||||
|
||||
const data: ApiResponse<EmailRequest> | null = await res
|
||||
.json()
|
||||
.catch(() => null);
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(data?.message ?? `Request failed with ${res.status}`);
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
throw new Error("Empty response body");
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { sendEmailAction, type ApiResponse, type EmailRequest } from "/app/actions/sendEmail";
|
||||
import { Button, Field, Input, Textarea } from "@/components/ui/form";
|
||||
|
||||
export default function SendEmailForm(): JSX.Element {
|
||||
const [result, setResult] = useState<
|
||||
ApiResponse<EmailRequest> | { error: string } | null
|
||||
>(null);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const [showSuccess, setShowSuccess] = useState(false);
|
||||
const successTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (successTimerRef.current) clearTimeout(successTimerRef.current);
|
||||
};
|
||||
}, []);
|
||||
|
||||
async function onSubmit(e: React.FormEvent<HTMLFormElement>): Promise<void> {
|
||||
e.preventDefault();
|
||||
setResult(null);
|
||||
|
||||
setShowSuccess(false);
|
||||
if (successTimerRef.current) clearTimeout(successTimerRef.current);
|
||||
|
||||
const form = new FormData(e.currentTarget);
|
||||
|
||||
const recipient = String(form.get("recipient") ?? "");
|
||||
const subject = String(form.get("subject") ?? "");
|
||||
const body = String(form.get("body") ?? "");
|
||||
|
||||
try {
|
||||
setSubmitting(true);
|
||||
const data = await sendEmailAction({ recipient, subject, body });
|
||||
setResult(data);
|
||||
|
||||
if (data?.success === true) {
|
||||
setShowSuccess(true);
|
||||
|
||||
successTimerRef.current = setTimeout(() => {
|
||||
setShowSuccess(false);
|
||||
}, 2000);
|
||||
}
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : "Unknown error";
|
||||
setResult({ error: message });
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-xl px-4 py-10 text-zinc-50">
|
||||
<h1 className="text-2xl font-semibold tracking-tight">
|
||||
Send <span className="text-amber-300">Email</span>
|
||||
</h1>
|
||||
<p className="mt-2 text-sm text-zinc-400">
|
||||
Compose a message and send it from the admin panel.
|
||||
</p>
|
||||
|
||||
<form onSubmit={onSubmit} className="mt-6 space-y-4">
|
||||
{result && "error" in result && (
|
||||
<div className="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
|
||||
{result.error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Field label="Recipient" htmlFor="recipient">
|
||||
<Input
|
||||
id="recipient"
|
||||
name="recipient"
|
||||
type="email"
|
||||
placeholder="user@example.com"
|
||||
defaultValue="user@example.com"
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Subject" htmlFor="subject">
|
||||
<Input
|
||||
id="subject"
|
||||
name="subject"
|
||||
placeholder="Test subject"
|
||||
defaultValue="Test subject"
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Body" htmlFor="body">
|
||||
<Textarea
|
||||
id="body"
|
||||
name="body"
|
||||
placeholder="Write your message…"
|
||||
defaultValue="Test body"
|
||||
rows={6}
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Button type="submit" disabled={submitting}>
|
||||
{submitting ? "Sending…" : showSuccess ? "Success" : "Send"}
|
||||
</Button>
|
||||
|
||||
<div className="rounded-md border border-zinc-800 bg-zinc-950/60 p-3">
|
||||
<div className="text-xs font-medium text-zinc-400">Response</div>
|
||||
<pre className="mt-2 overflow-x-auto text-xs text-zinc-200">
|
||||
{result ? JSON.stringify(result, null, 2) : "No response yet."}
|
||||
</pre>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -49,10 +49,15 @@ const navItems = [
|
||||
icon: <Settings className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
label: "Email Request",
|
||||
label: "List Emails",
|
||||
href: "/admin/email",
|
||||
icon: <LucideMail className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
label: "Send a Email",
|
||||
href: "/admin/email/send",
|
||||
icon: <LucideMail className="h-4 w-4" />,
|
||||
},
|
||||
];
|
||||
|
||||
// ADMIN CHECK FOR LOGIN
|
||||
|
||||
+48
-65
@@ -5,6 +5,7 @@ import { FormEvent, useState } from "react";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import { Button, Field, Input } from "@/components/ui/form";
|
||||
|
||||
export default function LoginPage() {
|
||||
const router = useRouter();
|
||||
@@ -30,75 +31,57 @@ export default function LoginPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-black text-zinc-50">
|
||||
<div className="mx-auto flex max-w-md flex-col px-4 py-10">
|
||||
<h1 className="text-2xl font-semibold tracking-tight">
|
||||
Log In to <span className="text-amber-300">The Armory</span>
|
||||
</h1>
|
||||
<p className="mt-2 text-sm text-zinc-400">
|
||||
Use your beta credentials to get back to your saved builds.
|
||||
</p>
|
||||
<main className="min-h-screen bg-black text-zinc-50">
|
||||
<div className="mx-auto flex max-w-md flex-col px-4 py-10">
|
||||
<h1 className="text-2xl font-semibold tracking-tight">
|
||||
Log In to <span className="text-amber-300">The Armory</span>
|
||||
</h1>
|
||||
<p className="mt-2 text-sm text-zinc-400">
|
||||
Use your beta credentials to get back to your saved builds.
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleSubmit} className="mt-6 space-y-4">
|
||||
{error && (
|
||||
<div className="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
<form onSubmit={handleSubmit} className="mt-6 space-y-4">
|
||||
{error && (
|
||||
<div className="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-medium text-zinc-400" htmlFor="email">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
required
|
||||
className="w-full rounded-md border border-zinc-800 bg-zinc-900/70 px-3 py-2 text-sm text-zinc-50 focus:outline-none focus:ring-1 focus:ring-amber-400"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<Field label="Email" htmlFor="email">
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
required
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label
|
||||
className="text-xs font-medium text-zinc-400"
|
||||
htmlFor="password"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
required
|
||||
className="w-full rounded-md border border-zinc-800 bg-zinc-900/70 px-3 py-2 text-sm text-zinc-50 focus:outline-none focus:ring-1 focus:ring-amber-400"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<Field label="Password" htmlFor="password">
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
required
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="mt-2 w-full rounded-md border border-amber-400/70 bg-amber-400/20 px-3 py-2 text-sm font-semibold text-amber-100 hover:bg-amber-400/30 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{loading ? "Signing in…" : "Log In"}
|
||||
</button>
|
||||
</form>
|
||||
<Button type="submit" disabled={loading}>
|
||||
{loading ? "Signing in…" : "Log In"}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<p className="mt-4 text-xs text-zinc-500">
|
||||
New here?{" "}
|
||||
<Link
|
||||
href="/register"
|
||||
className="text-amber-300 hover:text-amber-200"
|
||||
>
|
||||
Join the beta
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<p className="mt-4 text-xs text-zinc-500">
|
||||
New here?{" "}
|
||||
<Link href="/register" className="text-amber-300 hover:text-amber-200">
|
||||
Join the beta
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
+57
-78
@@ -5,6 +5,7 @@ import { FormEvent, useState } from "react";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import { Button, Field, Input } from "@/components/ui/form";
|
||||
|
||||
export default function RegisterPage() {
|
||||
const router = useRouter();
|
||||
@@ -31,89 +32,67 @@ export default function RegisterPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-black text-zinc-50">
|
||||
<div className="mx-auto flex max-w-md flex-col px-4 py-10">
|
||||
<h1 className="text-2xl font-semibold tracking-tight">
|
||||
Join the <span className="text-amber-300">Battl Builder</span> Beta
|
||||
</h1>
|
||||
<p className="mt-2 text-sm text-zinc-400">
|
||||
Create an account so we can save your builds, watch price drops, and
|
||||
roll out new features to you first.
|
||||
</p>
|
||||
<main className="min-h-screen bg-black text-zinc-50">
|
||||
<div className="mx-auto flex max-w-md flex-col px-4 py-10">
|
||||
<h1 className="text-2xl font-semibold tracking-tight">
|
||||
Join the <span className="text-amber-300">Battl Builder</span> Beta
|
||||
</h1>
|
||||
<p className="mt-2 text-sm text-zinc-400">
|
||||
Create an account so we can save your builds, watch price drops, and
|
||||
roll out new features to you first.
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleSubmit} className="mt-6 space-y-4">
|
||||
{error && (
|
||||
<div className="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
<form onSubmit={handleSubmit} className="mt-6 space-y-4">
|
||||
{error && (
|
||||
<div className="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-1">
|
||||
<label
|
||||
className="text-xs font-medium text-zinc-400"
|
||||
htmlFor="displayName"
|
||||
>
|
||||
Display Name (optional)
|
||||
</label>
|
||||
<input
|
||||
id="displayName"
|
||||
type="text"
|
||||
className="w-full rounded-md border border-zinc-800 bg-zinc-900/70 px-3 py-2 text-sm text-zinc-50 focus:outline-none focus:ring-1 focus:ring-amber-400"
|
||||
value={displayName}
|
||||
onChange={(e) => setDisplayName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<Field label="Display Name (optional)" htmlFor="displayName">
|
||||
<Input
|
||||
id="displayName"
|
||||
type="text"
|
||||
value={displayName}
|
||||
onChange={(e) => setDisplayName(e.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-medium text-zinc-400" htmlFor="email">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
required
|
||||
className="w-full rounded-md border border-zinc-800 bg-zinc-900/70 px-3 py-2 text-sm text-zinc-50 focus:outline-none focus:ring-1 focus:ring-amber-400"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<Field label="Email" htmlFor="email">
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
required
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label
|
||||
className="text-xs font-medium text-zinc-400"
|
||||
htmlFor="password"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
required
|
||||
className="w-full rounded-md border border-zinc-800 bg-zinc-900/70 px-3 py-2 text-sm text-zinc-50 focus:outline-none focus:ring-1 focus:ring-amber-400"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<Field label="Password" htmlFor="password">
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
required
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="mt-2 w-full rounded-md border border-amber-400/70 bg-amber-400/20 px-3 py-2 text-sm font-semibold text-amber-100 hover:bg-amber-400/30 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{loading ? "Creating account…" : "Join Beta"}
|
||||
</button>
|
||||
</form>
|
||||
<Button type="submit" disabled={loading}>
|
||||
{loading ? "Creating account…" : "Join Beta"}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<p className="mt-4 text-xs text-zinc-500">
|
||||
Already have an account?{" "}
|
||||
<Link href="/login" className="text-amber-300 hover:text-amber-200">
|
||||
Log in
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<p className="mt-4 text-xs text-zinc-500">
|
||||
Already have an account?{" "}
|
||||
<Link href="/login" className="text-amber-300 hover:text-amber-200">
|
||||
Log in
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { sendEmailAction, type ApiResponse, type EmailRequest } from "/app/actions/sendEmail";
|
||||
import { Button, Field, Input, Textarea } from "@/components/ui/form";
|
||||
|
||||
export default function SendEmailForm(): JSX.Element {
|
||||
const [result, setResult] = useState<
|
||||
ApiResponse<EmailRequest> | { error: string } | null
|
||||
>(null);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const [showSuccess, setShowSuccess] = useState(false);
|
||||
const successTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (successTimerRef.current) clearTimeout(successTimerRef.current);
|
||||
};
|
||||
}, []);
|
||||
|
||||
async function onSubmit(e: React.FormEvent<HTMLFormElement>): Promise<void> {
|
||||
e.preventDefault();
|
||||
setResult(null);
|
||||
|
||||
setShowSuccess(false);
|
||||
if (successTimerRef.current) clearTimeout(successTimerRef.current);
|
||||
|
||||
const form = new FormData(e.currentTarget);
|
||||
|
||||
const recipient = String(form.get("recipient") ?? "");
|
||||
const subject = String(form.get("subject") ?? "");
|
||||
const body = String(form.get("body") ?? "");
|
||||
|
||||
try {
|
||||
setSubmitting(true);
|
||||
const data = await sendEmailAction({ recipient, subject, body });
|
||||
setResult(data);
|
||||
|
||||
if (data?.success === true) {
|
||||
setShowSuccess(true);
|
||||
|
||||
successTimerRef.current = setTimeout(() => {
|
||||
setShowSuccess(false);
|
||||
setResult(null); // clear the response panel too
|
||||
}, 2000);
|
||||
}
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : "Unknown error";
|
||||
setResult({ error: message });
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-xl px-4 py-10 text-zinc-50">
|
||||
<h1 className="text-2xl font-semibold tracking-tight">
|
||||
Send <span className="text-amber-300">Email</span>
|
||||
</h1>
|
||||
<p className="mt-2 text-sm text-zinc-400">
|
||||
Compose a message and send it from the admin panel.
|
||||
</p>
|
||||
|
||||
<form onSubmit={onSubmit} className="mt-6 space-y-4">
|
||||
{result && "error" in result && (
|
||||
<div className="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
|
||||
{result.error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Field label="Recipient" htmlFor="recipient">
|
||||
<Input
|
||||
id="recipient"
|
||||
name="recipient"
|
||||
type="email"
|
||||
placeholder="user@example.com"
|
||||
defaultValue="user@example.com"
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Subject" htmlFor="subject">
|
||||
<Input
|
||||
id="subject"
|
||||
name="subject"
|
||||
placeholder="Test subject"
|
||||
defaultValue="Test subject"
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Body" htmlFor="body">
|
||||
<Textarea
|
||||
id="body"
|
||||
name="body"
|
||||
placeholder="Write your message…"
|
||||
defaultValue="Test body"
|
||||
rows={6}
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Button type="submit" disabled={submitting}>
|
||||
{submitting ? "Sending…" : showSuccess ? "Success" : "Send"}
|
||||
</Button>
|
||||
|
||||
<div className="rounded-md border border-zinc-800 bg-zinc-950/60 p-3">
|
||||
<div className="text-xs font-medium text-zinc-400">Response</div>
|
||||
<pre className="mt-2 overflow-x-auto text-xs text-zinc-200">
|
||||
{result ? JSON.stringify(result, null, 2) : "No response yet."}
|
||||
</pre>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
// components/ui/form.tsx
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import { cn } from "@/lib/cn";
|
||||
|
||||
export const labelClass = "text-xs font-medium text-zinc-400";
|
||||
|
||||
export const inputBaseClass =
|
||||
"w-full rounded-md border border-zinc-800 bg-zinc-900/70 px-3 py-2 text-sm text-zinc-50 " +
|
||||
"placeholder:text-zinc-500 focus:outline-none focus:ring-1 focus:ring-amber-400";
|
||||
|
||||
export const buttonBaseClass =
|
||||
"w-full rounded-md border border-amber-400/70 bg-amber-400/20 px-3 py-2 text-sm font-semibold text-amber-100 " +
|
||||
"hover:bg-amber-400/30 disabled:cursor-not-allowed disabled:opacity-50 transition-colors";
|
||||
|
||||
export const Input = React.forwardRef<
|
||||
HTMLInputElement,
|
||||
React.InputHTMLAttributes<HTMLInputElement>
|
||||
>(function Input({ className, ...props }, ref) {
|
||||
return <input ref={ref} className={cn(inputBaseClass, className)} {...props} />;
|
||||
});
|
||||
|
||||
export const Textarea = React.forwardRef<
|
||||
HTMLTextAreaElement,
|
||||
React.TextareaHTMLAttributes<HTMLTextAreaElement>
|
||||
>(function Textarea({ className, ...props }, ref) {
|
||||
return (
|
||||
<textarea ref={ref} className={cn(inputBaseClass, className)} {...props} />
|
||||
);
|
||||
});
|
||||
|
||||
export function Button({
|
||||
className,
|
||||
...props
|
||||
}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
|
||||
return <button className={cn(buttonBaseClass, className)} {...props} />;
|
||||
}
|
||||
|
||||
type FieldProps = {
|
||||
label: string;
|
||||
htmlFor: string;
|
||||
hint?: React.ReactNode;
|
||||
error?: React.ReactNode;
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
export function Field({
|
||||
label,
|
||||
htmlFor,
|
||||
hint,
|
||||
error,
|
||||
className,
|
||||
children,
|
||||
}: FieldProps) {
|
||||
return (
|
||||
<div className={cn("space-y-1", className)}>
|
||||
<label className={labelClass} htmlFor={htmlFor}>
|
||||
{label}
|
||||
</label>
|
||||
|
||||
{children}
|
||||
|
||||
{error ? (
|
||||
<p className="text-xs text-red-300">{error}</p>
|
||||
) : hint ? (
|
||||
<p className="text-xs text-zinc-500">{hint}</p>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
// lib/cn.ts
|
||||
import clsx, { type ClassValue } from "clsx";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return clsx(inputs);
|
||||
}
|
||||
Reference in New Issue
Block a user