Fixed questions, single question page, reply modal

code100x · Aug 20, 2024 · d766a56 · d766a56
1 parent bcbdc1e
commit d766a56
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 52 deletions.
diff --git a/src/app/questions/[slug]/@question/page.tsx b/src/app/questions/[slug]/@question/page.tsx
@@ -53,7 +53,7 @@ const SingleQuestionPage = async ({
       <Link href="/questions" className="p-4">
         Go Back
       </Link>
-      <div className="mt-3 flex items-center justify-center px-3">
+      <div className="mt-3 items-center justify-center px-3">
         {question && (
           <PostCard
             post={question}

diff --git a/src/app/questions/page.tsx b/src/app/questions/page.tsx
@@ -160,7 +160,7 @@ export default async function Home({
         <NewPostDialog />
         <div className="mx-auto md:mx-[15%] md:p-10">
           <div className="flex flex-col items-center p-4 dark:text-white">
-            <div className="flex">
+            <div className="mb-5 flex">
               <Search />
               <div className="px-3">
                 <DropdownMenu>

diff --git a/src/components/NewPostDialog.tsx b/src/components/NewPostDialog.tsx
@@ -137,7 +137,7 @@ export const NewPostDialog = () => {
               type="submit"
               className="mb-2 me-2 rounded-lg bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 text-center text-sm font-medium hover:bg-gradient-to-br dark:text-white"
             >
-              Post-it
+              Post
             </Button>
           </div>
         </div>

diff --git a/src/components/posts/PostCard.tsx b/src/components/posts/PostCard.tsx
@@ -137,15 +137,44 @@ const PostCard: React.FC<IProps> = ({
             </DropdownMenu>
           </div>
 
+          {!isAnswer && !enableLink && isExtendedQuestion(post) && (
+            <>
+              <TextSnippet className="mx-2 py-2 text-lg hover:underline">
+                {post?.title}
+              </TextSnippet>
+            </>
+          )}
+
           {!isAnswer && enableLink && isExtendedQuestion(post) && (
             <Link href={`/questions/${post?.slug}`}>
-              <TextSnippet className="p-2 text-lg hover:underline">
+              <TextSnippet className="mx-2 py-2 text-lg hover:underline">
                 {post?.title}
               </TextSnippet>
             </Link>
           )}
 
-          <CardFooter className="flex flex-col items-center justify-between border-gray-200 p-2 dark:border-gray-700">
+          <CardFooter className="flex flex-col items-start justify-between border-gray-200 p-2 dark:border-gray-700">
+            {post.content && (
+              <div data-color-mode={theme} className="max-w-3xl">
+                <div className="wmde-markdown-var"> </div>
+                <MDEditor.Markdown
+                  className="text-black dark:text-white"
+                  source={post.content}
+                  style={{
+                    whiteSpace: 'pre-wrap',
+                    wordBreak: 'break-word',
+                    overflowWrap: 'break-word',
+                    backgroundColor: 'transparent',
+                  }}
+                />
+              </div>
+            )}
+            <div className="my-2 mb-2 flex">
+              {isExtendedQuestion(post) &&
+                post.tags
+                  .filter((v) => v !== '')
+                  .map((v, index) => <Tag name={v} key={index + v} />)}
+            </div>
             <div className="flex w-full items-center justify-between">
               <div className="flex">
                 <VoteForm
@@ -193,10 +222,6 @@ const PostCard: React.FC<IProps> = ({
               ))}
           </CardFooter>
         </div>
-        {isExtendedQuestion(post) &&
-          post.tags
-            .filter((v) => v !== '')
-            .map((v, index) => <Tag name={v} key={index + v} />)}
 
         {/* {!isAnswer && enableLink && isExtendedQuestion(post) && (
           <Link href={`/questions/${post?.slug}`}>
@@ -205,46 +230,6 @@ const PostCard: React.FC<IProps> = ({
             </TextSnippet>
           </Link>
         )} */}
-        {!isAnswer && !enableLink && isExtendedQuestion(post) && (
-          <TextSnippet className="py-2 text-lg hover:underline">
-            {post?.title}
-          </TextSnippet>
-        )}
-        {post.content && (
-          <div data-color-mode={theme}>
-            <div className="wmde-markdown-var"> </div>
-            <MDEditor.Markdown
-              className="text-black dark:text-white"
-              source={post.content}
-              style={{
-                whiteSpace: 'pre-wrap',
-                wordBreak: 'break-word',
-                overflowWrap: 'break-word',
-                backgroundColor: 'transparent',
-              }}
-            />
-          </div>
-        )}
-
-        {enableReply && (
-          <div>
-            <hr className="mb-3 mt-3" />
-            <form onSubmit={handleSubmit}>
-              <div data-color-mode={theme}>
-                <div className="wmde-markdown-var"> </div>
-                <MDEditor
-                  id={post.id.toString()}
-                  value={markDownValue}
-                  onChange={handleMarkdownChange}
-                />
-                <FormPostErrors id="content" errors={fieldErrors} />
-                <Button type="submit" className="m-3">
-                  Reply
-                </Button>
-              </div>
-            </form>
-          </div>
-        )}
       </div>
     );
   };
@@ -255,6 +240,24 @@ const PostCard: React.FC<IProps> = ({
           {internalDetails()}
         </div>
       </CardBody>
+      {enableReply && (
+        <div className="m-4">
+          <form onSubmit={handleSubmit}>
+            <div data-color-mode={theme}>
+              <div className="wmde-markdown-var"> </div>
+              <MDEditor
+                id={post.id.toString()}
+                value={markDownValue}
+                onChange={handleMarkdownChange}
+              />
+              <FormPostErrors id="content" errors={fieldErrors} />
+              <Button type="submit" className="m-3">
+                Reply
+              </Button>
+            </div>
+          </form>
+        </div>
+      )}
     </Card>
   );
 };

diff --git a/src/components/search.tsx b/src/components/search.tsx
@@ -18,8 +18,8 @@ const Search = () => {
     router.push(getUpdatedUrl(path, paramsObj, { search }));
   };
   return (
-    <div className="relative flex h-10 w-full items-center space-x-2 md:w-[500px] lg:w-[300px] xl:w-[400px]">
-      <SearchIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 transform text-gray-500" />
+    <div className="relative flex h-10 w-full items-center space-x-2 md:w-[300px] lg:w-[400px] xl:w-[500px]">
+      <SearchIcon className="absolute left-5 top-1/2 h-4 w-4 -translate-y-1/2 transform text-gray-500" />
       <Input
         aria-label="Search Input"
         className="rounded-lg border-gray-300 bg-gray-50 px-10 text-base focus:outline-none dark:border-gray-700/50 dark:bg-transparent dark:text-white dark:placeholder-gray-400"
@@ -34,7 +34,8 @@ const Search = () => {
         type="submit"
         onClick={handleSearch}
       >
-        Search
+        <p className="hidden md:block">Search</p>
+        <SearchIcon className="block h-4 w-4 md:hidden" />
       </Button>
     </div>
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -137,7 +137,7 @@ export const NewPostDialog = () => { @@
                   type="submit"
                   className="mb-2 me-2 rounded-lg bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 text-center text-sm font-medium hover:bg-gradient-to-br dark:text-white"
                 >
-                  Post-it
+                  Post
                 </Button>
               </div>
             </div>
@@ Expand Down @@