113 lines
3.2 KiB
TypeScript
113 lines
3.2 KiB
TypeScript
import { Tab } from "@headlessui/react";
|
|
import React, { useEffect, useState } from "react";
|
|
import { Toaster } from "react-hot-toast";
|
|
import NewLink from "./Tabs.tsx/NewLink";
|
|
import NewCollection from "./Tabs.tsx/NewCollection";
|
|
|
|
type Props = {
|
|
index?: number;
|
|
modalId: string;
|
|
isOpen: boolean;
|
|
onClose: Function;
|
|
};
|
|
|
|
export default function New({ index, modalId, isOpen, onClose }: Props) {
|
|
const newModal = document.getElementById(modalId);
|
|
const [tabIndex, setTabIndex] = useState(index);
|
|
|
|
useEffect(() => {
|
|
setTabIndex(index);
|
|
|
|
newModal?.addEventListener("close", () => {
|
|
onClose();
|
|
});
|
|
|
|
return () => {
|
|
newModal?.addEventListener("close", () => {
|
|
onClose();
|
|
});
|
|
};
|
|
}, [isOpen]);
|
|
|
|
return (
|
|
<dialog
|
|
id={modalId}
|
|
className="modal backdrop-blur-sm overflow-y-auto"
|
|
open={isOpen}
|
|
>
|
|
<Toaster
|
|
position="top-center"
|
|
reverseOrder={false}
|
|
toastOptions={{
|
|
className:
|
|
"border border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
|
|
}}
|
|
/>
|
|
<div className="modal-box max-h-full overflow-y-visible border border-neutral-content w-11/12 max-w-2xl">
|
|
<form method="dialog">
|
|
<button className="btn btn-sm outline-none btn-circle btn-ghost absolute right-5 top-5">
|
|
✕
|
|
</button>
|
|
</form>
|
|
|
|
<Tab.Group
|
|
onChange={(i: any) => setTabIndex(i)}
|
|
selectedIndex={tabIndex}
|
|
>
|
|
<Tab.List className="tabs-boxed flex w-fit mr-auto justify-center gap-1 p-1">
|
|
<Tab
|
|
className={({ selected }) =>
|
|
`${
|
|
selected ? "btn-primary" : "btn-ghost"
|
|
} outline-none rounded-md btn btn-sm w-24`
|
|
}
|
|
>
|
|
Link
|
|
</Tab>
|
|
{/* <Tab
|
|
className={({ selected }) =>
|
|
`${
|
|
selected ? "btn-primary" : "btn-ghost"
|
|
} outline-none rounded-md btn btn-sm w-24`
|
|
}
|
|
>
|
|
File
|
|
</Tab> */}
|
|
{/* <Tab
|
|
className={({ selected }) =>
|
|
`${
|
|
selected ? "btn-primary" : "btn-ghost"
|
|
} outline-none rounded-md btn btn-sm w-24`
|
|
}
|
|
>
|
|
Note
|
|
</Tab> */}
|
|
<Tab
|
|
className={({ selected }) =>
|
|
`${
|
|
selected ? "btn-primary" : "btn-ghost"
|
|
} outline-none rounded-md btn btn-sm w-24`
|
|
}
|
|
>
|
|
Collection
|
|
</Tab>
|
|
</Tab.List>
|
|
<Tab.Panels className="mt-5">
|
|
<Tab.Panel>
|
|
<NewLink isOpen={isOpen} modalId={modalId} />
|
|
</Tab.Panel>
|
|
{/* <Tab.Panel>File</Tab.Panel> */}
|
|
{/* <Tab.Panel>Note</Tab.Panel> */}
|
|
<Tab.Panel>
|
|
<NewCollection isOpen={isOpen} modalId={modalId} />
|
|
</Tab.Panel>
|
|
</Tab.Panels>
|
|
</Tab.Group>
|
|
</div>
|
|
<form method="dialog" className="modal-backdrop">
|
|
<button>close</button>
|
|
</form>
|
|
</dialog>
|
|
);
|
|
}
|