Skip to content

Commit

Permalink
Merge pull request #8 from rohit-zip/main
Browse files Browse the repository at this point in the history 
feature/blog-drawer
  • Loading branch information
@rohit-zip
rohit-zip authored Jun 15, 2024
2 parents 0b0b437 + 84a96b2 commit 6e3969c
Show file tree
Hide file tree
Showing 7 changed files with 83 additions and 77 deletions.
2 changes: 1 addition & 1 deletion app/(root)/(pages)/blog/[blogId]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
39 changes: 15 additions & 24 deletions components/custom/blog/BlogActionButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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",
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
46 changes: 46 additions & 0 deletions components/custom/blog/BlogCommentField.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
6 changes: 3 additions & 3 deletions components/custom/details/BlogDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"}>
Expand All @@ -36,7 +36,7 @@ const BlogDetails = ({data}: { data: any }) => {

<BlogDetailsUserInfo data={data}/>

<BlogActionButton data={data}/>
<BlogActionButton data={data} />

<div dangerouslySetInnerHTML={{__html: data.detailsHtml}}/>

Expand Down Expand Up @@ -74,7 +74,7 @@ const BlogDetails = ({data}: { data: any }) => {
className={"flex items-center justify-center text-xl"}
variant={"faded"}
>
<AiOutlineMessage />
<AiOutlineMessage/>
</Button>
</div>
</div>
Expand Down
47 changes: 5 additions & 42 deletions components/custom/drawers/BlogCommentDrawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,11 @@ import {useSelector} from "react-redux";
import {RootState} from "@/state/store";
import { FaEdit } from 'react-icons/fa';
import {Card, CardContent, CardFooter, CardHeader} from "@/components/ui/card";
import BlogCommentField from "@/components/custom/blog/BlogCommentField";
import { AiOutlineLike } from 'react-icons/ai';

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(
Expand All @@ -22,49 +21,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>
Expand All @@ -81,7 +44,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>
Expand Down
18 changes: 12 additions & 6 deletions components/custom/drawers/BlogCommentMobileDrawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,27 +9,33 @@ 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
</div>
<DrawerFooter>
<Button>Submit</Button>
<DrawerClose asChild>
<Button variant="outline">Cancel</Button>
</DrawerClose>
</DrawerFooter>
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/ui/drawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
))
Expand Down

0 comments on commit 6e3969c

Please sign in to comment.