168 lines
3.9 KiB
TypeScript
168 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import type { TaskInput } from "@/types/task";
|
|
|
|
export default function AddTaskForm({
|
|
onSubmit,
|
|
onClose,
|
|
}: {
|
|
onSubmit: (task: TaskInput) => Promise<void> | void;
|
|
onClose: () => void;
|
|
}) {
|
|
const [formData, setFormData] = useState<TaskInput>({
|
|
title: "",
|
|
description: "",
|
|
dueDate: "",
|
|
topic: "",
|
|
});
|
|
|
|
const handleChange = (
|
|
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
|
|
) => {
|
|
setFormData({ ...formData, [e.target.name]: e.target.value });
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!formData.topic) {
|
|
alert("Please select a topic before saving.");
|
|
return;
|
|
}
|
|
await onSubmit(formData);
|
|
onClose();
|
|
};
|
|
|
|
return (
|
|
<div style={styles.overlay}>
|
|
<div style={styles.modal}>
|
|
<h2 style={styles.title}>Add New Task</h2>
|
|
<form onSubmit={handleSubmit} style={styles.form}>
|
|
<input
|
|
name="title"
|
|
placeholder="Title"
|
|
value={formData.title}
|
|
onChange={handleChange}
|
|
required
|
|
style={styles.input}
|
|
/>
|
|
<textarea
|
|
name="description"
|
|
placeholder="Description"
|
|
value={formData.description}
|
|
onChange={handleChange}
|
|
style={styles.textarea}
|
|
/>
|
|
<input
|
|
name="dueDate"
|
|
type="date"
|
|
value={formData.dueDate}
|
|
onChange={handleChange}
|
|
required
|
|
style={styles.input}
|
|
/>
|
|
|
|
<select
|
|
name="topic"
|
|
value={formData.topic}
|
|
onChange={handleChange}
|
|
required
|
|
style={styles.input}
|
|
>
|
|
<option value="">Select a topic...</option>
|
|
<option value="Academic">Academic</option>
|
|
<option value="Work">Work</option>
|
|
<option value="Personal">Personal</option>
|
|
<option value="Creative">Creative</option>
|
|
<option value="Household">Household</option>
|
|
<option value="Other">Other</option>
|
|
</select>
|
|
|
|
<div style={styles.actions}>
|
|
<button type="submit" style={styles.saveButton}>
|
|
Save
|
|
</button>
|
|
<button type="button" onClick={onClose} style={styles.cancelButton}>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const styles = {
|
|
overlay: {
|
|
position: "fixed" as const,
|
|
top: 0,
|
|
left: 0,
|
|
width: "100%",
|
|
height: "100%",
|
|
background: "rgba(0,0,0,0.4)",
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
zIndex: 1000,
|
|
},
|
|
modal: {
|
|
background: "#f8fafc",
|
|
padding: "25px",
|
|
borderRadius: "12px",
|
|
boxShadow: "0 10px 25px rgba(0,0,0,0.2)",
|
|
width: "350px",
|
|
},
|
|
title: {
|
|
marginBottom: "15px",
|
|
fontSize: "22px",
|
|
fontWeight: "700",
|
|
color: "var(--text-dark)",
|
|
textAlign: "center" as const,
|
|
},
|
|
form: {
|
|
display: "flex",
|
|
flexDirection: "column" as const,
|
|
gap: "12px",
|
|
},
|
|
input: {
|
|
padding: "10px",
|
|
borderRadius: "8px",
|
|
border: "1px solid #cbd5e1",
|
|
fontSize: "14px",
|
|
color: "var(--text-dark)",
|
|
fontFamily: "inherit",
|
|
},
|
|
textarea: {
|
|
padding: "10px",
|
|
borderRadius: "8px",
|
|
border: "1px solid #cbd5e1",
|
|
fontSize: "14px",
|
|
color: "var(--text-dark)",
|
|
fontFamily: "inherit",
|
|
minHeight: "60px",
|
|
},
|
|
actions: {
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
marginTop: "15px",
|
|
},
|
|
saveButton: {
|
|
background: "#0ea5e9",
|
|
color: "white",
|
|
border: "none",
|
|
padding: "8px 16px",
|
|
borderRadius: "8px",
|
|
cursor: "pointer",
|
|
fontWeight: "600",
|
|
},
|
|
cancelButton: {
|
|
background: "#e2e8f0",
|
|
color: "#0f172a",
|
|
border: "none",
|
|
padding: "8px 16px",
|
|
borderRadius: "8px",
|
|
cursor: "pointer",
|
|
fontWeight: "600",
|
|
},
|
|
};
|