Skip to content

Commit fcab107

Browse files
mscode07mscode07
committed
Done with Post page
1 parent e983f59 commit fcab107

11 files changed

Lines changed: 164 additions & 74 deletions

File tree

‎apps/X/app/(pages)/post/page.tsx‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎apps/X/app/layout.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,9 @@ export default function RootLayout({
2626
return (
2727
<html lang="en" className="dark">
2828
<Provider>
29-
<body className={`${geistSans.variable} ${geistMono.variable} m-0`}>
29+
<body
30+
className={`${geistSans.variable} ${geistMono.variable} m-0 bg-black`}
31+
>
3032
<RouteGard>{children}</RouteGard>
3133
</body>
3234
</Provider>

‎apps/X/src/components/TopHeader.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const TopHeader = () => {
2020
</div>
2121
<div>
2222
<p className="font-bold text-xl">{session?.user?.name}</p>
23-
<p className="text-gray-500">28.3K posts</p>
23+
<p className="text-gray-500">33.5K posts</p>
2424
</div>
2525
</div>
2626
</div>

‎apps/X/src/components/ui/Post/Post.tsx‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎apps/X/src/components/ui/Post/PostDialogComp.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
2+
import axios from "axios";
3+
import { useSession } from "next-auth/react";
4+
import { useState } from "react";
5+
export const PostDialogComp = () => {
6+
const { data: session } = useSession();
7+
const [userInput, setUserInput] = useState("");
8+
9+
const handleChange = (e: any) => {
10+
console.log(e.target.value);
11+
setUserInput(e.target.value);
12+
};
13+
const handleClick = async () => {
14+
if (!session?.user?.id) {
15+
console.error("No user Fount");
16+
return;
17+
}
18+
try {
19+
const res = await axios.post("/api/post", { content: userInput });
20+
console.log("This is the Response :=>", res);
21+
setUserInput(" ");
22+
} catch (error) {
23+
console.log("Error while sending Tweet");
24+
}
25+
};
26+
27+
return (
28+
<div>
29+
<div className="fixed inset-0 flex items-center justify-center ">
30+
<div className="bg-black p-6 rounded-lg shadow-lg w-full max-w-lg">
31+
<div className="mt-4">
32+
<Avatar>
33+
<AvatarImage
34+
src={session?.user?.image || ""}
35+
alt={session?.user?.name || "User"}
36+
/>
37+
<AvatarFallback>{session?.user?.name?.[0]}</AvatarFallback>
38+
</Avatar>
39+
</div>
40+
<textarea
41+
onChange={handleChange}
42+
placeholder="What's happening?"
43+
className="w-full ml-11 h-32 bg-black border-none p-3 rounded-lg text-white focus:outline-none resize-none"
44+
/>
45+
<hr />
46+
<div className="flex justify-end mt-4 ">
47+
<button
48+
className="bg-white px-6 py-2 rounded-full text-black font-bold"
49+
onClick={handleClick}
50+
>
51+
Post
52+
</button>
53+
</div>
54+
</div>
55+
</div>
56+
</div>
57+
);
58+
};

‎apps/X/src/components/ui/Post/TopPostHome.tsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const TopPost = () => {
1919
const [postInput, setPostInput] = useState("");
2020
const { data: session } = useSession();
2121

22-
const handelChanges = (e: React.ChangeEvent<HTMLInputElement>) => {
22+
const handelChanges = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
2323
setPostInput(e.target.value);
2424
};
2525
const handelClick = async () => {
@@ -31,7 +31,6 @@ export const TopPost = () => {
3131
try {
3232
const res = await axios.post("/api/post", { content: postInput });
3333
console.log("Post saved successfully:", res.data);
34-
3534
setPostInput("");
3635
} catch (error) {
3736
console.log("Errro while Posting", error);
@@ -40,21 +39,29 @@ export const TopPost = () => {
4039
return (
4140
<div>
4241
<div className="p-3 border border-x-0">
43-
<div className="flex">
42+
<div className="flex ">
4443
<div>
4544
<UserAvatar />
4645
</div>
4746
<div>
48-
<Input
47+
{/* <Input
4948
className="focus:outline-none focus-visible:ring-0 border-none"
5049
placeholder="What is hanppening?!"
5150
onChange={handelChanges}
5251
value={postInput}
5352
name="Post"
53+
/> */}
54+
<textarea
55+
placeholder="What's happening?"
56+
className="focus:outline-none focus-visible:ring-0 w-96 ml-3 mt-3 bg-transparent border-none p-3 rounded-lg text-white resize-none overflow-auto "
57+
value={postInput}
58+
onChange={handelChanges}
59+
name="Post"
5460
/>
5561
</div>
5662
</div>
57-
<div className="flex items-center ml-12">
63+
<hr />
64+
<div className="flex items-center ml-12 mt-2">
5865
<div className="flex gap-4 text-blue-500 text-lg cursor-pointer">
5966
<div className="relative group hover:bg-neutral-900 rounded-xl ">
6067
<div>

‎apps/X/src/components/ui/Profile/UserInfo.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { PiBalloon } from "react-icons/pi";
1212
import { Button } from "../button";
1313
import { TweetComp } from "../TweetComp";
1414
import { NextResponse } from "next/server";
15+
import { LoaderComp } from "@/components/LoaderComp";
1516

1617
interface UserDataProps {
1718
DOB: string;
@@ -280,9 +281,17 @@ export const UserInfo = () => {
280281
<br />
281282
<hr />
282283
<div>
283-
{userTweet.map((tweet) => (
284-
<TweetComp key={tweet.id} tweet={tweet} />
285-
))}
284+
{loading ? (
285+
<div className="flex items-center justify-center h-screen">
286+
<LoaderComp />
287+
</div>
288+
) : (
289+
<div>
290+
{userTweet.map((tweet) => (
291+
<TweetComp key={tweet.id} tweet={tweet} />
292+
))}
293+
</div>
294+
)}
286295
</div>
287296
</div>
288297
);

‎apps/X/src/components/ui/TweetComp.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export const TweetComp = ({ tweet }: TweetProps) => {
3636
return (
3737
<div>
3838
<div>
39-
<div className="border border-slate-800 border-spacing-x-0.5">
39+
<div className="border border-slate-800 border-spacing-x-0.5 hover:bg-neutral-900/60 transition duration-400 cursor-pointer">
4040
<div className="flex p-3 gap-2 w-full">
4141
<div className="mt-1 cursor-pointer">
4242
<Avatar>
@@ -60,9 +60,9 @@ export const TweetComp = ({ tweet }: TweetProps) => {
6060
})}
6161
</p>
6262
</div>
63-
<div className="flex justify-end cursor-pointer hover:bg-black hover:rounded-2xl pr-3">
63+
<div className="flex justify-end cursor-pointer hover:bg-neutral-900/40 hover:rounded-2xl pr-3">
6464
<Popover>
65-
<PopoverTrigger className="font-bold text-slate-500">
65+
<PopoverTrigger className="font-bold text-slate-500 hover:bg-blue-500/30 hover:text-blue-500 rounded-full h-8 w-8 text-center transition duration-200">
6666
...
6767
</PopoverTrigger>
6868
<PopoverContent>

‎apps/X/src/components/ui/dialog.tsx‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
"use client"
1+
"use client";
22

3-
import * as React from "react"
4-
import * as DialogPrimitive from "@radix-ui/react-dialog"
5-
import { X } from "lucide-react"
3+
import * as React from "react";
4+
import * as DialogPrimitive from "@radix-ui/react-dialog";
5+
import { X } from "lucide-react";
66

7-
import { cn } from "@/lib/utils"
7+
import { cn } from "@/lib/utils";
88

9-
const Dialog = DialogPrimitive.Root
9+
const Dialog = DialogPrimitive.Root;
1010

11-
const DialogTrigger = DialogPrimitive.Trigger
11+
const DialogTrigger = DialogPrimitive.Trigger;
1212

13-
const DialogPortal = DialogPrimitive.Portal
13+
const DialogPortal = DialogPrimitive.Portal;
1414

15-
const DialogClose = DialogPrimitive.Close
15+
const DialogClose = DialogPrimitive.Close;
1616

1717
const DialogOverlay = React.forwardRef<
1818
React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -21,13 +21,13 @@ const DialogOverlay = React.forwardRef<
2121
<DialogPrimitive.Overlay
2222
ref={ref}
2323
className={cn(
24-
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
24+
"fixed inset-0 z-50 bg-black/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
2525
className
2626
)}
2727
{...props}
2828
/>
29-
))
30-
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
29+
));
30+
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
3131

3232
const DialogContent = React.forwardRef<
3333
React.ElementRef<typeof DialogPrimitive.Content>,
@@ -45,13 +45,13 @@ const DialogContent = React.forwardRef<
4545
>
4646
{children}
4747
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
48-
<X className="h-4 w-4" />
48+
{/* <X className="h-4 w-4" /> */}
4949
<span className="sr-only">Close</span>
5050
</DialogPrimitive.Close>
5151
</DialogPrimitive.Content>
5252
</DialogPortal>
53-
))
54-
DialogContent.displayName = DialogPrimitive.Content.displayName
53+
));
54+
DialogContent.displayName = DialogPrimitive.Content.displayName;
5555

5656
const DialogHeader = ({
5757
className,
@@ -64,8 +64,8 @@ const DialogHeader = ({
6464
)}
6565
{...props}
6666
/>
67-
)
68-
DialogHeader.displayName = "DialogHeader"
67+
);
68+
DialogHeader.displayName = "DialogHeader";
6969

7070
const DialogFooter = ({
7171
className,
@@ -78,8 +78,8 @@ const DialogFooter = ({
7878
)}
7979
{...props}
8080
/>
81-
)
82-
DialogFooter.displayName = "DialogFooter"
81+
);
82+
DialogFooter.displayName = "DialogFooter";
8383

8484
const DialogTitle = React.forwardRef<
8585
React.ElementRef<typeof DialogPrimitive.Title>,
@@ -93,8 +93,8 @@ const DialogTitle = React.forwardRef<
9393
)}
9494
{...props}
9595
/>
96-
))
97-
DialogTitle.displayName = DialogPrimitive.Title.displayName
96+
));
97+
DialogTitle.displayName = DialogPrimitive.Title.displayName;
9898

9999
const DialogDescription = React.forwardRef<
100100
React.ElementRef<typeof DialogPrimitive.Description>,
@@ -105,8 +105,8 @@ const DialogDescription = React.forwardRef<
105105
className={cn("text-sm text-muted-foreground", className)}
106106
{...props}
107107
/>
108-
))
109-
DialogDescription.displayName = DialogPrimitive.Description.displayName
108+
));
109+
DialogDescription.displayName = DialogPrimitive.Description.displayName;
110110

111111
export {
112112
Dialog,
@@ -119,4 +119,4 @@ export {
119119
DialogFooter,
120120
DialogTitle,
121121
DialogDescription,
122-
}
122+
};

‎apps/X/src/components/ui/home/HomeComp.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { CenterComp, HomeLeft, HomeRight } from "@/components/ui";
22

33
export const HomeComp = () => {
44
return (
5-
<div className="flex h-screen overflow-y-auto">
5+
<div className="flex h-screen justify-center overflow-y-auto">
66
<div className="custom:w-96 w-10 custom:ml-24 ml-16 h-screen sticky top-0 flex-shrink-0 mr-7 custom:mr-10">
77
<HomeLeft />
88
</div>

0 commit comments

Comments
 (0)