chore(social): reply form ui

apps/social/src/app/components/navbar.tsx

@@ -24,7 +24,7 @@ export async function Navbar() {
   const { user, session } = await getSession();
 
   return (
-    <nav className="py-3 container md:px-0 grid grid-cols-3 items-center w-full max-w-lg bg-opacity-95 bg-bg backdrop-blur-3xl fixed top-0 left-0 right-0 z-50">
+    <nav className="py-3 container md:px-0 grid grid-cols-3 items-center w-full max-w-lg bg-opacity-95 bg-bg backdrop-blur-3xl fixed top-0 left-0 right-0 z-50 rounded-md">
       <Link href="/" aria-label="back">
         <ArrowLeft />
       </Link>
@@ -51,7 +51,7 @@ export async function Navbar() {
         <DropdownMenuContent className="font-semibold [&>*]:cursor-pointer [&>*]:border-b [&>*]:last:border-0 mr-4">
           <DropdownMenuItem>Profile</DropdownMenuItem>
           <DropdownMenuSeparator />
-          <DropdownMenuItem>
+          <DropdownMenuItem asChild>
             {session ? (
               <form action={logout} className="place-self-end">
                 <SignOutButton />

apps/social/src/app/post/[id]/page.tsx

@@ -1,4 +1,5 @@
-import { PostCard, PostCardMain } from "../../components/post-card";
+import { PostCard, PostCardMain } from "@/app/components/post-card";
+import ReplyForm from "../components/reply-form";
 
 const postData = {
   id: "C-r5lAwpJUg",
@@ -76,20 +77,22 @@ const repliesData = [
 
 export default function Post() {
   return (
-    <main>
-      <section className="w-full max-w-lg mx-auto bg-background">
-        <PostCardMain key={postData.createdAt} {...postData} />
+    <main className="w-full max-w-lg mx-auto bg-background pb-24">
+      <PostCardMain key={postData.createdAt} {...postData} />
 
-        <div className="w-full container py-4 border-b mb-6 font-medium text-muted-foreground">
-          Replies
-        </div>
+      <div className="w-full container py-4 border-b mb-6 font-medium text-muted-foreground">
+        Replies
+      </div>
 
-        <div className="space-y-6">
-          {repliesData.map((reply) => {
-            return <PostCard key={reply.createdAt} {...reply} />;
-          })}
-        </div>
-      </section>
+      <div className="space-y-6">
+        {repliesData.map((reply) => {
+          return <PostCard key={reply.createdAt} {...reply} />;
+        })}
+      </div>
+
+      <div>
+        <ReplyForm />
+      </div>
     </main>
   );
 }

apps/social/src/app/post/components/reply-form.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { useDynamicTextarea } from "@/hooks/use-dynamic-textarea";
+import { Button } from "@umamin/ui/components/button";
+import { Textarea } from "@umamin/ui/components/textarea";
+import { Loader2, Send } from "lucide-react";
+import { useState } from "react";
+
+export default function ReplyForm() {
+  const [content, setContent] = useState("");
+  const [message, setMessage] = useState("");
+  const [isSending, setIsSending] = useState(false);
+  const inputRef = useDynamicTextarea(content);
+
+  return (
+    <div className="fixed px-5 sm:px-7 bottom-0 left-1/2 -translate-x-1/2 w-full pb-4 rounded-b-lg bg-background pt-3 max-w-xl">
+      <form
+        //   onSubmit={handleSubmit}
+        className="flex items-center space-x-2 w-full self-center"
+      >
+        <Textarea
+          id="message"
+          required
+          ref={inputRef}
+          value={content}
+          onChange={(e) => {
+            setContent(e.target.value);
+          }}
+          maxLength={500}
+          placeholder="Leave a reply..."
+          className="focus-visible:ring-transparent text-base resize-none min-h-10 max-h-20 bg-muted"
+          autoComplete="off"
+        />
+        <Button
+          data-testid="note-send-reply-btn"
+          type="submit"
+          size="icon"
+          disabled={isSending}
+        >
+          {isSending ? (
+            <Loader2 className="w-4 h-4 animate-spin" />
+          ) : (
+            <Send className="h-4 w-4" />
+          )}
+          <span className="sr-only">Send</span>
+        </Button>
+      </form>
+    </div>
+  );
+}

apps/social/src/hooks/use-dynamic-textarea.ts

@@ -0,0 +1,24 @@
+import { useEffect, useRef, RefCallback } from "react";
+
+function updateTextAreaSize(textArea?: HTMLTextAreaElement | null) {
+  if (textArea == null) return;
+  textArea.style.height = "3rem";
+  textArea.style.height = `${textArea.scrollHeight}px`;
+}
+
+export function useDynamicTextarea(
+  content: string
+): RefCallback<HTMLTextAreaElement> {
+  const textAreaRef = useRef<HTMLTextAreaElement | null>(null);
+
+  const inputRef = (textArea: HTMLTextAreaElement) => {
+    updateTextAreaSize(textArea);
+    textAreaRef.current = textArea;
+  };
+
+  useEffect(() => {
+    updateTextAreaSize(textAreaRef.current);
+  }, [content]);
+
+  return inputRef;
+}