egutierrez/linkwarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

recreated modals and many other components

Browse Source
This commit is contained in:
daniel31x13
2023-12-01 12:01:56 -05:00
parent 6d51b6de53
commit 732a5227d3
28 changed files with 1144 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Modals/NewCollectionModal.tsx
+28 -24
View File
@@ -18,15 +18,15 @@ export default function NewCollectionModal({
isOpen,
onClose,
}: Props) {
const newModal = document.getElementById(modalId);
const modal = document.getElementById(modalId);
useEffect(() => {
newModal?.addEventListener("close", () => {
modal?.addEventListener("close", () => {
onClose();
});
return () => {
newModal?.addEventListener("close", () => {
modal?.addEventListener("close", () => {
onClose();
});
};
@@ -63,7 +63,7 @@ export default function NewCollectionModal({
toast.dismiss(load);
if (response.ok) {
toast.success(`Collection "Created!"`);
toast.success("Created!");
(document.getElementById(modalId) as any).close();
} else toast.error(response.data as string);
@@ -107,28 +107,32 @@ export default function NewCollectionModal({
setCollection({ ...collection, name: e.target.value })
}
/>
<div className="color-picker flex justify-between">
<div className="flex flex-col justify-between items-center w-32">
<p className="w-full mb-2">Color</p>
<div style={{ color: collection.color }}>
<FontAwesomeIcon
icon={faFolder}
className="w-12 h-12 drop-shadow"
/>
<div>
<p className="w-full mb-2">Color</p>
<div className="color-picker flex justify-between">
<div className="flex flex-col gap-2 items-center w-32">
<div style={{ color: collection.color }}>
<FontAwesomeIcon
icon={faFolder}
className="w-12 h-12 drop-shadow"
/>
</div>
<div
className="btn btn-ghost btn-xs"
onClick={() =>
setCollection({ ...collection, color: "#0ea5e9" })
}
>
Reset
</div>
</div>
<div
className="btn btn-ghost btn-xs"
onClick={() =>
setCollection({ ...collection, color: "#0ea5e9" })
<HexColorPicker
color={collection.color}
onChange={(e) =>
setCollection({ ...collection, color: e })
}
>
Reset
</div>
/>
</div>
<HexColorPicker
color={collection.color}
onChange={(e) => setCollection({ ...collection, color: e })}
/>
</div>
</div>
</div>
@@ -136,7 +140,7 @@ export default function NewCollectionModal({
<div className="w-full">
<p className="mb-2">Description</p>
<textarea
className="w-full h-[11rem] resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
className="w-full h-[13rem] resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
placeholder="The purpose of this Collection..."
value={collection.description}
onChange={(e) =>