69 lines
1.9 KiB
TypeScript
69 lines
1.9 KiB
TypeScript
import { useState } from "react";
|
|
import { FaPlus } from "react-icons/fa";
|
|
|
|
type RecipientAddCardProps = {
|
|
addRecipient: (name: string, email: string, type: "mailToSign" | "inPerson" | "cc") => void; // Adjust the parameter type as needed
|
|
};
|
|
|
|
const RecipientAddCard: React.FC<RecipientAddCardProps> = ({ addRecipient }) => {
|
|
|
|
const [recipient] = useState()
|
|
|
|
const handleRecipientAdd = () => {
|
|
|
|
}
|
|
|
|
|
|
return (
|
|
<div className="p-4 bg-[var(--primaryLight)] shadow-sm mb-4 w-[650px] rounded-md">
|
|
<p className="pb-4 text-md">Add Recipient Details</p>
|
|
<div className="py-1">
|
|
<input
|
|
|
|
type="text"
|
|
placeholder="Recipient Name"
|
|
className="w-full p-2 rounded mb-2 bg-white"
|
|
/>
|
|
</div>
|
|
<div className="py-1">
|
|
<input
|
|
type="email"
|
|
placeholder="Recipient Email"
|
|
className="w-full p-2 rounded mb-2 bg-white"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex justify-between py-2">
|
|
<div className="flex gap-4 justify-end">
|
|
{[
|
|
{ label: "Mail To Sign", value: "mailToSign" },
|
|
{ label: "In-Person", value: "inPerson" },
|
|
{ label: "CC", value: "cc" }
|
|
].map((option) => (
|
|
<label key={option.value} className="flex items-center gap-2">
|
|
<input
|
|
type="radio"
|
|
name={`send-type`}
|
|
value={option.value}
|
|
defaultChecked={option.value === "mailToSign"}
|
|
className="accent-blue-500"
|
|
/>
|
|
{option.label}
|
|
</label>
|
|
))}
|
|
</div>
|
|
|
|
|
|
<button
|
|
// onClick={addRecipient}
|
|
className="flex cursor-pointer items-center gap-2 bg-green-500 text-white px-4 py-2 rounded-lg shadow-md hover:bg-green-600"
|
|
>
|
|
<FaPlus /> Add Recipient
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RecipientAddCard; |