add comments

src/components/DefaulModal.tsx

@@ -0,0 +1,57 @@
+import { FC, Fragment, ReactNode, useEffect } from 'react'
+import HeaderModal from './HeaderModal'
+
+interface Props {
+    open: boolean,
+    close: () => void,
+    children: ReactNode,
+    isHeader?: boolean,
+    title_header?: string,
+    width?: number
+}
+
+const DefaulModal: FC<Props> = (props: Props) => {
+
+    useEffect(() => {
+        if (props.open) {
+            document.body.style.overflow = 'hidden'
+        } else {
+            document.body.style.overflow = 'auto'
+        }
+    }, [props.open])
+
+
+    return (
+        <Fragment>
+            {
+                props.open && (
+                    <Fragment>
+                        <div style={{ maxWidth: props.width }} className='xl:justify-center xl:items-center items-end flex overflow-x-hidden  overflow-y-auto fixed inset-0 z-[99999999999]  h-auto top-0 bottom-0 m-auto outline-none focus:outline-none xl:max-w-xl mx-auto'>
+                            <div className='relative xl:h-full max-h-[80%] bottom-0 left-0  flex xl:items-center sm:h-auto w-full xl:my-6 xl:p-2'>
+                                <div className='border-0 h-auto p-5 lg:min-w-full overflow-y-auto rounded-3xl rounded-b-none xl:rounded-b-3xl relative flex flex-col w-full bg-white max-h-[100%]  outline-none focus:outline-none'>
+
+
+                                    {
+                                        props.isHeader && props.title_header &&
+                                        <div onClick={props.close} className='pb-6 border-b border-white border-opacity-20'>
+                                            <div className='h-[5px] w-[200px] mx-auto bg-[#D1D3D7] rounded-full mb-4 xl:hidden'></div>
+                                            <HeaderModal close={props.close} label={props.title_header} />
+                                        </div>
+                                    }
+
+                                    {props.children}
+
+
+                                </div>
+                            </div>
+                        </div>
+
+                        <div onClick={props.close} className='fixed size-full top-0 bottom-0 right-0 modalGlass inset-0 z-[99999] '></div>
+                    </Fragment>
+                )
+            }
+        </Fragment>
+    )
+}
+
+export default DefaulModal

src/components/HeaderModal.tsx

@@ -0,0 +1,21 @@
+import { CloseCircle } from 'iconsax-react'
+import { FC } from 'react'
+
+
+type Props = {
+    label: string,
+    close: () => void,
+}
+
+const HeaderModal: FC<Props> = (props: Props) => {
+    return (
+        <div className='flex justify-between items-center border-b border-border pb-4'>
+            <div className='text-sm'>{props.label}</div>
+            <div className='size-7 rounded-full  flex justify-center items-center'>
+                <CloseCircle size={20} color='black' onClick={props.close} />
+            </div>
+        </div>
+    )
+}
+
+export default HeaderModal

src/components/ui/textarea.tsx

@@ -1,17 +1,31 @@
 import * as React from "react"
 
 import { cn } from "@/lib/utils"
+import Error from "../Error"
 
-function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+interface TextareaProps extends React.ComponentProps<"textarea"> {
+  error_text?: string
+}
+
+function Textarea({ className, error_text, ...props }: TextareaProps) {
   return (
-    <textarea
-      data-slot="textarea"
-      className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className
-      )}
-      {...props}
-    />
+    <div className="w-full">
+      <textarea
+        data-slot="textarea"
+        className={cn(
+          "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          error_text && "border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20",
+          className
+        )}
+        {...props}
+      />
+      {
+        error_text &&
+        <Error
+          errorText={error_text}
+        />
+      }
+    </div>
   )
 }