From 6cab1fbf5bc31394b547f6983fc49f7798f077c3 Mon Sep 17 00:00:00 2001
From: Rohit <rohitparih@gmail.com>
Date: Fri, 14 Jun 2024 23:57:55 +0530
Subject: [PATCH] feature/blog-drawer

---
 app/(root)/(pages)/blog/[blogId]/page.tsx     |  2 +-
 components/custom/blog/BlogActionButton.tsx   | 39 ++++++---------
 components/custom/blog/BlogCommentField.tsx   | 46 ++++++++++++++++++
 components/custom/details/BlogDetails.tsx     |  6 +--
 .../custom/drawers/BlogCommentDrawer.tsx      | 47 ++-----------------
 .../drawers/BlogCommentMobileDrawer.tsx       | 18 ++++---
 components/ui/drawer.tsx                      |  2 +-
 7 files changed, 83 insertions(+), 77 deletions(-)
 create mode 100644 components/custom/blog/BlogCommentField.tsx

diff --git a/app/(root)/(pages)/blog/[blogId]/page.tsx b/app/(root)/(pages)/blog/[blogId]/page.tsx
index fbea95d..176bbec 100644
--- a/app/(root)/(pages)/blog/[blogId]/page.tsx
+++ b/app/(root)/(pages)/blog/[blogId]/page.tsx
@@ -29,7 +29,7 @@ export default async function DynamicBlog({ params }: { params: { blogId: string
     const response = await getBlogDetails(blogId);
 
     return (
-        <main className={"max-w-screen-xl container flex h-auto flex-row gap-2 w-full mt-4 md:mt-10 pb-10"}>
+        <main className={"max-w-screen-xl min-w-[280px] container flex h-auto flex-row gap-2 w-full mt-4 md:mt-10 pb-10"}>
             <main className={"w-full md:w-[70%]"}>
                 <BlogDetails data={response} />
             </main>
diff --git a/components/custom/blog/BlogActionButton.tsx b/components/custom/blog/BlogActionButton.tsx
index cbca14d..ecfacd7 100644
--- a/components/custom/blog/BlogActionButton.tsx
+++ b/components/custom/blog/BlogActionButton.tsx
@@ -19,41 +19,31 @@ import {FaXTwitter} from "react-icons/fa6";
 import {FaInstagram, FaLinkedin} from "react-icons/fa";
 import BlogCommentDrawer from "@/components/custom/drawers/BlogCommentDrawer";
 import BlogCommentMobileDrawer from "@/components/custom/drawers/BlogCommentMobileDrawer";
+import useMediaQuery from "@/hooks/useMediaQuery";
+
+const BlogActionButton = ({data, isDividerShown = true}: { data: any, isDividerShown?: boolean }) => {
+
+    const breakPoint = useMediaQuery(640);
 
-const BlogActionButton = ({data, isDividerShown = true}: {data: any, isDividerShown?: boolean }) => {
     return (
         <div className={"flex flex-col space-y-2"}>
             {isDividerShown && <Divider className={"w-[90%] self-center"}/>}
             <div className={"flex items-center justify-between md:px-6"}>
                 <div className={"flex items-center gap-2"}>
-                    <div className={"flex items-center"}>
+                    <div className={"flex items-center gap-1"}>
                         <small className={"text-sm"}>
                             10
                         </small>
-                        <Button
-                            isIconOnly={true}
-                            variant={"light"}
-                            size={"sm"}
-                            className={"text-xl"}
-                        >
-                            <AiOutlineLike/>
-                        </Button>
+                        <AiOutlineLike className={"text-xl"}/>
                     </div>
 
                     <Divider orientation={"vertical"} className={"h-6"}/>
 
-                    <div className={"flex items-center"}>
-                        <small className={"text-sm"}>
-                            10
-                        </small>
-                        <BlogCommentDrawer data={data}/>
-                    </div>
-
-                    <div className={"flex items-center"}>
+                    <div className={"flex items-center gap-1"}>
                         <small className={"text-sm"}>
                             10
                         </small>
-                        <BlogCommentMobileDrawer/>
+                        {breakPoint ? <BlogCommentMobileDrawer/> : <BlogCommentDrawer data={data}/>}
                     </div>
                 </div>
 
@@ -70,7 +60,8 @@ const BlogActionButton = ({data, isDividerShown = true}: {data: any, isDividerSh
                     <Dropdown
                         showArrow
                         radius="sm"
-                        backdrop={"blur"}
+                        backdrop={"opaque"}
+                        placement={"left"}
                         classNames={{
                             base: "before:bg-default-200", // change arrow background
                             content: "p-0 border-small border-divider bg-background",
@@ -109,7 +100,7 @@ const BlogActionButton = ({data, isDividerShown = true}: {data: any, isDividerSh
                             <DropdownSection showDivider>
                                 <DropdownItem>
                                     <div className={"flex items-center gap-2"}>
-                                        <IoIosLink />
+                                        <IoIosLink/>
                                         <span>Copy Link</span>
                                     </div>
                                 </DropdownItem>
@@ -118,21 +109,21 @@ const BlogActionButton = ({data, isDividerShown = true}: {data: any, isDividerSh
                             <DropdownSection className={"w-full"}>
                                 <DropdownItem>
                                     <div className={"flex items-center gap-2"}>
-                                        <FaLinkedin />
+                                        <FaLinkedin/>
                                         <span>Share on LinkedIn</span>
                                     </div>
                                 </DropdownItem>
 
                                 <DropdownItem>
                                     <div className={"flex items-center gap-2"}>
-                                        <FaXTwitter />
+                                        <FaXTwitter/>
                                         <span>Share on X</span>
                                     </div>
                                 </DropdownItem>
 
                                 <DropdownItem>
                                     <div className={"flex items-center gap-2"}>
-                                        <FaInstagram />
+                                        <FaInstagram/>
                                         <span>Share on Instagram</span>
                                     </div>
                                 </DropdownItem>
diff --git a/components/custom/blog/BlogCommentField.tsx b/components/custom/blog/BlogCommentField.tsx
new file mode 100644
index 0000000..d173885
--- /dev/null
+++ b/components/custom/blog/BlogCommentField.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import {Card, CardContent, CardFooter, CardHeader} from "@/components/ui/card";
+import {Avatar, Button} from "@nextui-org/react";
+import {useSelector} from "react-redux";
+import {RootState} from "@/state/store";
+
+const BlogCommentField = () => {
+
+    const {isAuthenticated} = useSelector((state: RootState) => state.auth);
+    const {name, profileImage} = useSelector((state: RootState) => state.profile);
+
+    return (
+        <div className={"flex flex-col my-6"}>
+            {isAuthenticated && (
+                <Card>
+                    <CardHeader className={"p-3"}>
+                        <div className={"flex items-center gap-2"}>
+                            <Avatar
+                                src={profileImage ? profileImage : ""}
+                                showFallback={true}
+                                size={"md"}
+                            />
+                            <span>{name}</span>
+                        </div>
+                    </CardHeader>
+
+                    <CardContent>
+                                <textarea
+                                    className={"border-none outline-none bg-transparent w-full resize-none"}
+                                    rows={4}
+                                    placeholder={"Any thoughts ?"}
+                                />
+                    </CardContent>
+
+                    <CardFooter className={"flex justify-end py-3"}>
+                        <Button color={"primary"} size={"sm"}>
+                            Send
+                        </Button>
+                    </CardFooter>
+                </Card>
+            )}
+        </div>
+    );
+};
+
+export default BlogCommentField;
\ No newline at end of file
diff --git a/components/custom/details/BlogDetails.tsx b/components/custom/details/BlogDetails.tsx
index cd62aca..05a29b5 100644
--- a/components/custom/details/BlogDetails.tsx
+++ b/components/custom/details/BlogDetails.tsx
@@ -10,7 +10,7 @@ import Image from "next/image";
 const BlogDetails = ({data}: { data: any }) => {
 
     return (
-        <div className={"mt-2 md:mt-6 flex flex-col gap-10"}>
+        <div className={"relative mt-2 md:mt-6 flex flex-col gap-10"}>
 
             {data.coverImage && (
                 <div className={"w-full"}>
@@ -36,7 +36,7 @@ const BlogDetails = ({data}: { data: any }) => {
 
             <BlogDetailsUserInfo data={data}/>
 
-            <BlogActionButton data={data}/>
+            <BlogActionButton data={data} />
 
             <div dangerouslySetInnerHTML={{__html: data.detailsHtml}}/>
 
@@ -74,7 +74,7 @@ const BlogDetails = ({data}: { data: any }) => {
                             className={"flex items-center justify-center text-xl"}
                             variant={"faded"}
                         >
-                            <AiOutlineMessage />
+                            <AiOutlineMessage/>
                         </Button>
                     </div>
                 </div>
diff --git a/components/custom/drawers/BlogCommentDrawer.tsx b/components/custom/drawers/BlogCommentDrawer.tsx
index 4346f12..4018e0a 100644
--- a/components/custom/drawers/BlogCommentDrawer.tsx
+++ b/components/custom/drawers/BlogCommentDrawer.tsx
@@ -5,11 +5,10 @@ import {HiOutlineChatBubbleOvalLeftEllipsis} from "react-icons/hi2";
 import {useSelector} from "react-redux";
 import {RootState} from "@/state/store";
 import {Card, CardContent, CardFooter, CardHeader} from "@/components/ui/card";
+import BlogCommentField from "@/components/custom/blog/BlogCommentField";
 
 const BlogCommentDrawer = ({data}: { data: any }) => {
 
-    const {isAuthenticated} = useSelector((state: RootState) => state.auth);
-    const {name, profileImage} = useSelector((state: RootState) => state.profile);
     const [selectedKeys, setSelectedKeys] = React.useState(new Set(["relevant"]));
 
     const selectedValue = React.useMemo(
@@ -20,49 +19,13 @@ const BlogCommentDrawer = ({data}: { data: any }) => {
     return (
         <Sheet>
             <SheetTrigger asChild>
-                <Button
-                    isIconOnly={true}
-                    variant={"light"}
-                    size={"sm"}
-                    className={"text-xl"}
-                >
-                    <HiOutlineChatBubbleOvalLeftEllipsis/>
-                </Button>
+                <HiOutlineChatBubbleOvalLeftEllipsis className={"text-xl"}/>
             </SheetTrigger>
-            <SheetContent side={"right"} className={"w-[500px] p-2"}>
+            <SheetContent side={"right"} className={"min-w-[440px] p-2"}>
                 <SheetHeader className={"p-4"}>
                     <SheetTitle className={"text-2xl"}>Discussions</SheetTitle>
                 </SheetHeader>
-                <div className={"flex flex-col my-6"}>
-                    {isAuthenticated && (
-                        <Card>
-                            <CardHeader className={"p-3"}>
-                                <div className={"flex items-center gap-2"}>
-                                    <Avatar
-                                        src={profileImage ? profileImage : ""}
-                                        showFallback={true}
-                                        size={"md"}
-                                    />
-                                    <span>{name}</span>
-                                </div>
-                            </CardHeader>
-
-                            <CardContent>
-                                <textarea
-                                    className={"border-none outline-none bg-transparent w-full resize-none"}
-                                    rows={4}
-                                    placeholder={"Any thoughts ?"}
-                                />
-                            </CardContent>
-
-                            <CardFooter className={"flex justify-end py-3"}>
-                                <Button color={"primary"} size={"sm"}>
-                                    Send
-                                </Button>
-                            </CardFooter>
-                        </Card>
-                    )}
-                </div>
+                <BlogCommentField />
                 <SheetFooter>
                     <Dropdown>
                         <DropdownTrigger>
@@ -79,7 +42,7 @@ const BlogCommentDrawer = ({data}: { data: any }) => {
                             disallowEmptySelection
                             selectionMode="single"
                             selectedKeys={selectedKeys}
-                            onSelectionChange={(e)=> console.log(e)}
+                            onSelectionChange={(e) => console.log(e)}
                         >
                             <DropdownItem key="relevant">Relevant</DropdownItem>
                             <DropdownItem key="recent">Recent</DropdownItem>
diff --git a/components/custom/drawers/BlogCommentMobileDrawer.tsx b/components/custom/drawers/BlogCommentMobileDrawer.tsx
index d2ab6a9..83417b4 100644
--- a/components/custom/drawers/BlogCommentMobileDrawer.tsx
+++ b/components/custom/drawers/BlogCommentMobileDrawer.tsx
@@ -9,19 +9,26 @@ import {
     DrawerTitle,
     DrawerTrigger
 } from "@/components/ui/drawer";
+import {HiOutlineChatBubbleOvalLeftEllipsis} from "react-icons/hi2";
 import {Button} from "@/components/ui/button";
+import BlogCommentField from "@/components/custom/blog/BlogCommentField";
 
 const BlogCommentMobileDrawer = () => {
     return (
         <Drawer>
             <DrawerTrigger asChild>
-                <Button variant="outline">Open Drawer</Button>
+                <HiOutlineChatBubbleOvalLeftEllipsis className={"text-xl"}/>
             </DrawerTrigger>
-            <DrawerContent>
-                <div className="mx-auto w-full max-w-sm">
+            <DrawerContent className={"outline-none w-full"}>
+                <div className="mx-auto w-full">
                     <DrawerHeader>
-                        <DrawerTitle>Move Goal</DrawerTitle>
-                        <DrawerDescription>Set your daily activity goal.</DrawerDescription>
+                        <DrawerTitle className={"text-xl"}>
+                            Discussions
+                        </DrawerTitle>
+
+                        <DrawerDescription>
+                            <BlogCommentField />
+                        </DrawerDescription>
                     </DrawerHeader>
                     <div>
                         Drawer
@@ -29,7 +36,6 @@ const BlogCommentMobileDrawer = () => {
                     <DrawerFooter>
                         <Button>Submit</Button>
                         <DrawerClose asChild>
-                            <Button variant="outline">Cancel</Button>
                         </DrawerClose>
                     </DrawerFooter>
                 </div>
diff --git a/components/ui/drawer.tsx b/components/ui/drawer.tsx
index 2370564..c024539 100644
--- a/components/ui/drawer.tsx
+++ b/components/ui/drawer.tsx
@@ -28,7 +28,7 @@ const DrawerOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Overlay
     ref={ref}
-    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    className={cn("fixed inset-0 z-50 bg-black/80 outline-none", className)}
     {...props}
   />
 ))