wip: implement add bookmark

packages/web/src/components/dialog.tsx

@@ -1,7 +1,7 @@
 function Dialog({ children }: React.PropsWithChildren) {
 	return (
-		<div className="fixed z-20 top-0 bottom-0 left-0 right-0 flex items-center justify-center bg-stone-200">
-			<div className="w-full m-8 md:w-2/3 lg:w-1/3 flex flex-col items-center border-2 bg-stone-300 relative after:absolute after:-z-10 after:inset-0 after:bg-stone-400 after:translate-4 md:after:translate-8">
+		<div className="fixed z-20 top-0 bottom-0 left-0 right-0 flex items-center justify-center bg-stone-200 dark:bg-stone-900">
+			<div className="w-full m-8 md:w-2/3 lg:w-1/3 flex flex-col items-center border-2 bg-stone-300 dark:bg-stone-800 relative after:absolute after:-z-10 after:inset-0 after:bg-stone-400 dark:after:bg-stone-950 after:translate-4 md:after:translate-8">
 				{children}
 			</div>
 		</div>
@@ -9,11 +9,15 @@ function Dialog({ children }: React.PropsWithChildren) {
 }
 
 function DialogTitle({ children }: React.PropsWithChildren) {
-	return <h2 className="select-none font-bold w-full bg-stone-800 text-stone-300 text-center">{children}</h2>
+	return (
+		<h2 className="select-none font-bold w-full bg-stone-800 dark:bg-stone-300 text-stone-300 dark:text-stone-800 text-center">
+			{children}
+		</h2>
+	)
 }
 
 function DialogBody({ children }: React.PropsWithChildren) {
-	return <div className="m-8 text-center">{children}</div>
+	return <div className="m-8 w-full text-center">{children}</div>
 }
 
 function DialogActionRow({ children }: React.PropsWithChildren) {

packages/web/src/components/form-field.tsx

@@ -1,27 +1,34 @@
 import { clsx } from "clsx"
 import { useId } from "react"
+import { twMerge } from "tailwind-merge"
 
 interface FormFieldProps {
 	name: string
 	label: string
 	type: React.HTMLInputTypeAttribute
 	className?: string
+	labelClassName?: string
+	required?: boolean
 }
 
-function FormField({ name, label, type, className }: FormFieldProps) {
+function FormField({ name, label, type, className, labelClassName, required = false }: FormFieldProps) {
 	const id = useId()
 	return (
 		<div className={clsx("flex flex-col-reverse focus:text-teal-600", className)}>
 			<input
 				id={id}
+				required={required}
 				name={name}
 				type={type}
 				defaultValue=""
-				className="peer px-3 pb-2 pt-3 border focus:border-2 border-stone-800 focus:border-teal-600 focus:ring-0 focus:outline-none"
+				className="peer px-3 pb-2 pt-3 border focus:border-2 border-stone-800 dark:border-stone-200 focus:border-teal-600 focus:ring-0 focus:outline-none"
 			/>
 			<label
 				htmlFor={id}
-				className="select-none border-x-2 border-transparent w-min translate-y-[55%] bg-stone-200 mx-2 px-1 peer-focus:text-teal-600 peer-focus:font-bold"
+				className={twMerge(
+					"select-none border-x-2 border-transparent w-min translate-y-[55%] bg-stone-200 dark:bg-stone-900 mx-2 px-1 peer-focus:text-teal-600 peer-focus:font-bold",
+					labelClassName,
+				)}
 			>
 				{label}
 			</label>

packages/web/src/components/message.tsx

@@ -0,0 +1,22 @@
+import { clsx } from "clsx"
+
+enum MessageVariant {
+	Warning = "Warning",
+	Error = "Error",
+}
+
+const VARIANT_CLASSES = {
+	[MessageVariant.Warning]: "text-amber-600 dark:text-amber-200",
+	[MessageVariant.Error]: "text-red-500 dark:text-red-300",
+} as const
+
+interface MessageProps {
+	variant: MessageVariant
+	className?: string
+}
+
+function Message({ variant, className, children }: React.PropsWithChildren<MessageProps>) {
+	return <p className={clsx(VARIANT_CLASSES[variant], className)}>{children}</p>
+}
+
+export { Message, MessageVariant }