tip tap integration with nextui progress

apps/sovoli.com/src/app/(dashboard)/new/components/NoteForm.tsx

@@ -0,0 +1,27 @@
+import { Form } from "@sovoli/ui/components/form";
+import { Input } from "@sovoli/ui/components/input";
+
+import { Tiptap } from "~/components/TipTap/Tiptap";
+
+export const NoteForm = () => {
+  return (
+    <Form className="w-full">
+      <Input
+        placeholder="Title"
+        name="title"
+        fullWidth
+        size="lg"
+        variant="bordered"
+        className="text-3xl"
+      />
+
+      <Input
+        name="description"
+        placeholder="Description"
+        fullWidth
+        variant="bordered"
+      />
+      <Tiptap />
+    </Form>
+  );
+};

apps/sovoli.com/src/app/(dashboard)/new/page.tsx

@@ -1,9 +1,9 @@
-import { Tiptap } from "~/components/TipTap/Tiptap";
+import { NoteForm } from "./components/NoteForm";
 
 export default function NewPage() {
   return (
     <div className="mx-auto max-w-7xl p-4">
-      <Tiptap />
+      <NoteForm />
     </div>
   );
 }

apps/sovoli.com/src/components/TipTap/Tiptap.tsx

@@ -3,32 +3,44 @@
 import { ButtonGroup } from "@sovoli/ui/components/button";
 import { EditorContent, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
+import { tv } from "tailwind-variants";
 
 import { MenuButtonRedo } from "./controls/MenuButtonRedo";
 import { MenuButtonUndo } from "./controls/MenuButtonUndo";
 import { MenuSelectHeading } from "./controls/MenuSelectHeading";
 
+const editorContainer = tv({
+  base: "w-full flex-row items-center gap-3 rounded-large border-2 border-default-200 px-3 shadow-sm hover:border-default-400 focus-within:border-default-foreground",
+  variants: {
+    focused: {
+      true: "border-default-foreground !important",
+    },
+  },
+});
+
 export const Tiptap = () => {
   const editor = useEditor({
     extensions: [StarterKit],
     editorProps: {
       attributes: {
         class:
-          "py-6 px-8 prose prose-base prose-blue prose-headings:scroll-mt-[80px]",
+          "w-full max-w-full py-6 px-8 prose prose-base prose-blue prose-headings:scroll-mt-[80px] focus:outline-none",
       },
     },
-    content: "<p>Hello World! 🌎️</p>",
+    content: "<p>Start writing...</p>",
   });
 
   if (!editor) return null;
 
   return (
-    <div>
-      <ButtonGroup variant="light">
-        <MenuButtonUndo editor={editor} />
-        <MenuButtonRedo editor={editor} />
-      </ButtonGroup>
-      <MenuSelectHeading editor={editor} />
+    <div className="w-full flex-row items-center gap-3 rounded-large border-2 border-default-200 px-3 shadow-sm focus-within:border-default-foreground hover:border-default-400 hover:focus-within:border-default-foreground">
+      <div>
+        <ButtonGroup variant="light">
+          <MenuButtonUndo editor={editor} />
+          <MenuButtonRedo editor={editor} />
+        </ButtonGroup>
+        <MenuSelectHeading editor={editor} />
+      </div>
       <EditorContent editor={editor} />
     </div>
   );

apps/sovoli.com/src/components/navbar/NewDropdown.tsx

@@ -15,7 +15,7 @@ export const NewDropdown = () => {
   return (
     <Dropdown>
       <DropdownTrigger>
-        <Button color="primary" endContent={<ChevronDownIcon />}>
+        <Button variant="bordered" endContent={<ChevronDownIcon />}>
           New
         </Button>
       </DropdownTrigger>

packages/ui/package.json

@@ -25,6 +25,8 @@
     "@nextui-org/divider": "2.2.4",
     "@nextui-org/dropdown": "2.3.7",
     "@nextui-org/image": "2.2.3",
+    "@nextui-org/input": "2.4.7",
+    "@nextui-org/form": "2.1.7",
     "@nextui-org/link": "2.2.5",
     "@nextui-org/modal": "2.2.5",
     "@nextui-org/navbar": "2.2.5",

packages/ui/src/components/form/index.tsx

@@ -0,0 +1 @@
+export * from "@nextui-org/form";

packages/ui/src/components/input/index.tsx

@@ -0,0 +1 @@
+export * from "@nextui-org/input";