mirror of
https://github.com/crocofied/CoreControl.git
synced 2025-12-29 16:14:43 +00:00
Updated Dialogues
This commit is contained in:
@@ -4,6 +4,7 @@ import { useState } from "react";
|
||||
import axios from "axios";
|
||||
import ErrorToast from "@/components/Error";
|
||||
import SuccessToast from "@/components/Success";
|
||||
import { Building2, MapPin, FileText } from "lucide-react";
|
||||
|
||||
interface AddSiteProps {
|
||||
onSiteAdded?: () => void;
|
||||
@@ -44,55 +45,67 @@ export default function AddSite({ onSiteAdded }: AddSiteProps) {
|
||||
return (
|
||||
<div>
|
||||
<dialog id="add_site" className="modal">
|
||||
<div className="modal-box w-2/3 max-w-2/3">
|
||||
<div className="flex flex-col gap-4">
|
||||
<header>
|
||||
<h3 className="text-2xl font-semibold tracking-tight">Add New Site</h3>
|
||||
<p className="text-sm text-gray-500 mt-1">Provide details for the new site location</p>
|
||||
</header>
|
||||
<div className="modal-box w-11/12 max-w-3xl border-l-4 border-success">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="bg-success text-success-content rounded-full p-2 flex items-center justify-center">
|
||||
<Building2 className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="font-bold text-xl">Add New Site</h3>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="bg-base-200 p-4 rounded-lg mb-4">
|
||||
<div className="space-y-4">
|
||||
<div className="form-control">
|
||||
<label className="label">
|
||||
<span className="label-text font-medium text-base">Site Name</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin className="h-4 w-4 opacity-70" />
|
||||
<span className="label-text font-medium">Site Name</span>
|
||||
</div>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input input-bordered w-full focus:ring-2"
|
||||
className="input input-bordered w-full"
|
||||
placeholder="e.g. Downtown Office"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-control">
|
||||
<label className="label">
|
||||
<span className="label-text font-medium text-base">
|
||||
Description
|
||||
<span className="ml-2 text-sm font-normal text-gray-400">(optional)</span>
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<FileText className="h-4 w-4 opacity-70" />
|
||||
<span className="label-text font-medium">Description</span>
|
||||
<span className="ml-1 text-xs opacity-60">(optional)</span>
|
||||
</div>
|
||||
</label>
|
||||
<textarea
|
||||
className="textarea textarea-bordered w-full focus:ring-2"
|
||||
placeholder="Enter a brief description..."
|
||||
className="textarea textarea-bordered w-full"
|
||||
placeholder="Enter a brief description of this site..."
|
||||
rows={4}
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="modal-action flex justify-end">
|
||||
<form method="dialog" className="flex gap-3">
|
||||
<button className="btn btn-ghost">Cancel</button>
|
||||
<button className="btn btn-primary px-6" onClick={addSite}>Add Site</button>
|
||||
</form>
|
||||
</div>
|
||||
<div className="modal-action">
|
||||
<form method="dialog" className="flex gap-3 w-full justify-end">
|
||||
<button className="btn btn-outline">Cancel</button>
|
||||
<button
|
||||
className="btn btn-success text-success-content"
|
||||
onClick={addSite}
|
||||
>
|
||||
Add Site
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
<ErrorToast message={error} show={error !== ''} onClose={() => setError('')} />
|
||||
<SuccessToast message={success} show={success !== ''} onClose={() => setSuccess('')} />
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user