add block feature

2023-05-22 14:04:35 +07:00
parent bada9132f1
commit 6d43d2c53a
13 changed files with 465 additions and 175 deletions
--- a/src/app/space/components/create.tsx
+++ b/src/app/space/components/create.tsx
@@ -0,0 +1,93 @@
+import { Dialog, Transition } from "@headlessui/react";
+import CancelIcon from "@icons/cancel";
+import PlusIcon from "@icons/plus";
+import { Fragment, useState } from "react";
+
+export function CreateBlockModal() {
+	const [isOpen, setIsOpen] = useState(false);
+	const [loading, setLoading] = useState(false);
+
+	const closeModal = () => {
+		setIsOpen(false);
+	};
+
+	const openModal = () => {
+		setIsOpen(true);
+	};
+
+	return (
+		<>
+			<button
+				type="button"
+				onClick={() => openModal()}
+				className="group inline-flex h-8 items-center gap-2.5 rounded-md px-2.5 hover:bg-zinc-900"
+			>
+				<div className="inline-flex h-5 w-5 shrink items-center justify-center rounded bg-zinc-900 group-hover:bg-zinc-800">
+					<PlusIcon width={12} height={12} className="text-zinc-500" />
+				</div>
+				<div>
+					<h5 className="font-semibold text-zinc-400 group-hover:text-zinc-200">
+						Create a new block
+					</h5>
+				</div>
+			</button>
+			<Transition appear show={isOpen} as={Fragment}>
+				<Dialog as="div" className="relative z-10" onClose={closeModal}>
+					<Transition.Child
+						as={Fragment}
+						enter="ease-out duration-300"
+						enterFrom="opacity-0"
+						enterTo="opacity-100"
+						leave="ease-in duration-200"
+						leaveFrom="opacity-100"
+						leaveTo="opacity-0"
+					>
+						<div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md" />
+					</Transition.Child>
+					<div className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
+						<Transition.Child
+							as={Fragment}
+							enter="ease-out duration-300"
+							enterFrom="opacity-0 scale-95"
+							enterTo="opacity-100 scale-100"
+							leave="ease-in duration-200"
+							leaveFrom="opacity-100 scale-100"
+							leaveTo="opacity-0 scale-95"
+						>
+							<Dialog.Panel className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-lg border border-zinc-800 bg-zinc-900">
+								<div className="h-min w-full shrink-0 border-b border-zinc-800 px-5 py-6">
+									<div className="flex flex-col gap-2">
+										<div className="flex items-center justify-between">
+											<Dialog.Title
+												as="h3"
+												className="text-xl font-semibold leading-none text-white"
+											>
+												Create block
+											</Dialog.Title>
+											<button
+												type="button"
+												onClick={closeModal}
+												className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
+											>
+												<CancelIcon
+													width={20}
+													height={20}
+													className="text-zinc-300"
+												/>
+											</button>
+										</div>
+										<Dialog.Description className="leading-tight text-zinc-300">
+											Channels are freedom square, everyone can speech freely,
+											no one can stop you or deceive what to speech
+										</Dialog.Description>
+									</div>
+								</div>
+								<div className="flex h-full w-full flex-col overflow-y-auto px-5 pb-5 pt-3" />
+							</Dialog.Panel>
+						</Transition.Child>
+					</div>
+				</Dialog>
+			</Transition>
+		</>
+	);
+}