Skip to content

Commit ca19a9c

Browse files
mscode07mscode07
authored
Merge pull request #24 from mscode07/dev
working on UI
2 parents c42b747 + bd75af5 commit ca19a9c

File tree

8 files changed

+159
-91
lines changed

8 files changed

+159
-91
lines changed

‎apps/X/app/message/page.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function Page() {
2+
return <div>Message</div>;
3+
}

‎apps/X/app/page.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ const Page = async () => {
66
try {
77
const session = await getServerSession(authOptions);
88
console.log("Full session object:", JSON.stringify(session, null, 2));
9-
console.log("UseriD test>>>>>>>>>>>>>>", session?.user?.id);
109

1110
if (!session?.user?.id) {
1211
console.log("No valid session, redirecting to signin");

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export const Post = (IsOpen: boolean) => {
2+
return <div>
3+
4+
</div>;
5+
};

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

Lines changed: 69 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export const TopPost = () => {
4949
</div>
5050
<div>
5151
<Input
52-
className="ffocus:outline-none focus-visible:ring-0 border-none"
52+
className="focus:outline-none focus-visible:ring-0 border-none"
5353
placeholder="What is hanppening?!"
5454
onChange={handelChanges}
5555
value={postInput}
@@ -59,40 +59,84 @@ export const TopPost = () => {
5959
</div>
6060
<div className="flex items-center ml-12">
6161
<div className="flex gap-4 text-blue-500 text-lg cursor-pointer">
62-
<div>
63-
<TbPhotoSquareRounded />
62+
<div className="relative group hover:bg-neutral-900 rounded-xl ">
63+
<div>
64+
<TbPhotoSquareRounded />
65+
</div>
66+
<span className="absolute left-1/2 -translate-x-1/2 text-sm bg-gray-800 text-white px-2 py-1 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity">
67+
Media
68+
</span>
6469
</div>
65-
<div>
66-
<MdOutlineGifBox />
70+
<div className="relative group hover:bg-neutral-900 rounded-xl">
71+
<div>
72+
<MdOutlineGifBox />
73+
</div>
74+
<span className="absolute left-1/2 -translate-x-1/2 text-sm bg-gray-800 text-white px-2 py-1 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity">
75+
GIF
76+
</span>
6777
</div>
68-
<div>
69-
<X_Icon />
78+
<div className="relative group hover:bg-neutral-900 rounded-xl">
79+
<div>
80+
<X_Icon />
81+
</div>
82+
<span className="absolute left-1/2 -translate-x-1/2 text-sm bg-gray-800 text-white px-2 py-1 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity">
83+
GROK
84+
</span>
7085
</div>
71-
<div>
72-
<HiMiniListBullet />
86+
<div className="relative group hover:bg-neutral-900 rounded-xl">
87+
<div>
88+
<HiMiniListBullet />
89+
</div>
90+
<span className="absolute left-1/2 -translate-x-1/2 text-sm bg-gray-800 text-white px-2 py-1 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity">
91+
Poll
92+
</span>
7393
</div>
74-
<div>
75-
<GrEmoji />
94+
<div className="relative group hover:bg-neutral-900 rounded-xl">
95+
<div>
96+
<GrEmoji />
97+
</div>
98+
<span className="absolute left-1/2 -translate-x-1/2 text-sm bg-gray-800 text-white px-2 py-1 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity">
99+
Emoji
100+
</span>
76101
</div>
77-
<div>
78-
<RiCalendarScheduleLine />
102+
<div className="relative group hover:bg-neutral-900 rounded-xl">
103+
<div>
104+
<RiCalendarScheduleLine />
105+
</div>
106+
<span className="absolute left-1/2 -translate-x-1/2 text-sm bg-gray-800 text-white px-2 py-1 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity">
107+
Schedule
108+
</span>
79109
</div>
80-
<div>
81-
<IoLocationOutline />
110+
<div className="relative group hover:bg-neutral-900 rounded-xl">
111+
<div>
112+
<IoLocationOutline />
113+
</div>
114+
<span className="absolute left-1/2 -translate-x-1/2 text-sm bg-gray-800 text-white px-2 py-1 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity">
115+
Location
116+
</span>
82117
</div>
83-
<div>
84-
<BsTypeBold />
118+
<div className="relative group hover:bg-neutral-900 rounded-xl">
119+
<div>
120+
<BsTypeBold />
121+
</div>
122+
<span className="absolute left-1/2 -translate-x-1/2 text-sm bg-gray-800 text-white px-2 py-1 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity">
123+
Bold
124+
</span>
85125
</div>
86-
<div>
87-
<AiOutlineItalic />
126+
<div className="relative group hover:bg-neutral-900 rounded-xl">
127+
<div>
128+
<AiOutlineItalic />
129+
</div>
130+
<span className="absolute left-1/2 -translate-x-1/2 text-sm bg-gray-800 text-white px-2 py-1 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity">
131+
Italic
132+
</span>
88133
</div>
89134
</div>
90-
<Button
91-
onClick={handelClick}
92-
className="ml-28 rounded-2xl font-semibold"
93-
>
94-
Post
95-
</Button>
135+
<div className="ml-auto">
136+
<Button onClick={handelClick} className="rounded-2xl font-semibold">
137+
Post
138+
</Button>
139+
</div>
96140
</div>
97141
</div>
98142
</div>

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { TopHead, TopPost, TweetComp } from "..";
22

33
export const CenterComp = () => {
44
return (
5-
<div>
5+
<div className="">
66
<div className="">
77
<TopHead />
88
</div>
@@ -11,8 +11,13 @@ export const CenterComp = () => {
1111
</div>
1212
<div className="">
1313
<TweetComp />
14+
<TweetComp />
15+
<TweetComp />
16+
<TweetComp />
17+
<TweetComp />
1418
</div>
1519
</div>
1620
);
1721
};
1822
//border border-slate-800 border-x-0
23+
//custom:w-11/12 w-max-96

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

Lines changed: 9 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,21 @@ import { CenterComp, HomeLeft, HomeRight } from "@/components/ui";
22

33
export const HomeComp = () => {
44
return (
5-
<div>
6-
<div></div>
7-
<div className="grid grid-cols-6 ">
8-
<div></div>
9-
<div className="">
10-
<HomeLeft />
11-
</div>
12-
<div className="flex mx-10">
13-
<div className="border border-y-0 col-span-3 ">
5+
<div className="relative">
6+
<div className="flex h-full">
7+
<div className="custom:w-96 w-10 custom:ml-24 ml-10"></div>
8+
<div className="flex">
9+
<div className="custom:px-10 px-2 mr-10 custom:m-0 custom:left-10 left-0">
10+
<HomeLeft />
11+
</div>
12+
<div className="border border-y-0 custom:w-5/12 w-8/12 h-full overflow-y-hidden">
1413
<CenterComp />
1514
</div>
16-
<div className="ml-10 col-span-2 ">
15+
<div className="">
1716
<HomeRight />
1817
</div>
1918
</div>
2019
</div>
21-
{/* <div className="">
22-
<div className=""></div>
23-
<div className="">
24-
<HomeRight />
25-
</div>
26-
<div className=""></div>
27-
<div className=""></div>
28-
<div className=""></div>
29-
</div> */}
3020
{/* border-slate-800 border border-y-0 h-screen */}
3121
</div>
3222
);

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

Lines changed: 66 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -6,112 +6,134 @@ import { FaRegBookmark } from "react-icons/fa";
66
import { FaRegUser } from "react-icons/fa6";
77
import { GoHome } from "react-icons/go";
88
import { IoMdSearch } from "react-icons/io";
9+
import { TbOctagonPlus } from "react-icons/tb";
910
import { MdOutlineMail } from "react-icons/md";
1011
import { RiGroupLine, RiNotification2Line } from "react-icons/ri";
1112
import { Button, UserAvatar, X_logo } from "..";
1213
import GrokIcon from "../Grok";
1314
import X_Icon from "../X_Icon";
15+
import Link from "next/link";
16+
import { useState } from "react";
1417
export const HomeLeft = () => {
18+
const [isOpen, setIsOpen] = useState(false);
19+
20+
const onPostClick = () => {
21+
console.log("Click");
22+
setIsOpen(!isOpen);
23+
};
1524
return (
1625
<div>
1726
<div className="h-screen flex flex-col justify-between pt-6">
1827
<div className="flex flex-col items-end">
19-
<div className="flex flex-col align-baseline">
20-
<div>
21-
<div className="mb-4 ml-4">
22-
<X_logo />
23-
</div>
28+
<div className="flex flex-col ">
29+
<div className="w-8 custom:w-full">
30+
<Link href={"/home"}>
31+
<div className="mb-4 ml-4">
32+
<X_logo />
33+
</div>
34+
</Link>
2435
<div className="flex items-center text-xl mb-3 ">
25-
<div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl px-4 py-2">
26-
<div className="text-2xl ">
27-
<GoHome />
36+
<Link href={"/home"}>
37+
<div className="custom:hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl px-4 py-2">
38+
<div className="text-2xl hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl">
39+
<GoHome />
40+
</div>
41+
<div className="custom:visible invisible">Home</div>
2842
</div>
29-
Home
30-
</div>
43+
</Link>
3144
</div>
3245
<div className="flex items-center text-xl mb-3">
33-
<div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl px-4 py-2 items-center">
34-
<div className="text-2xl">
46+
<div className="custom:hover:bg-neutral-900 flex gap-4 custom:hover:bg-opacity-40 transition duration-200 custom:hover:rounded-2xl px-4 py-2 items-center">
47+
<div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl text-2xl">
3548
<IoMdSearch />
3649
</div>
37-
Explore
50+
<div className="custom:visible invisible">Explore</div>
3851
</div>
3952
</div>
4053
<div className="flex items-center text-xl mb-3">
41-
<div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl px-4 py-2">
42-
<div className="text-2xl">
54+
<div className="custom:hover:bg-neutral-900 flex gap-4 custom:hover:bg-opacity-40 transition duration-200 custom:hover:rounded-2xl px-4 py-2">
55+
<div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl text-2xl">
4356
<RiNotification2Line />
4457
</div>
45-
Notifications
58+
<div className="custom:visible invisible">Notifications</div>
4659
</div>
4760
</div>
4861
<div className="flex items-center text-xl mb-3">
49-
<div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl px-4 py-2">
50-
<div className="text-2xl">
62+
<div className="custom:hover:bg-neutral-900 flex gap-4 custom:hover:bg-opacity-40 transition duration-200 custom:hover:rounded-2xl px-4 py-2">
63+
<div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl text-2xl">
5164
<MdOutlineMail />
5265
</div>
53-
Messages
66+
<div className="custom:visible invisible">Messages</div>
5467
</div>
5568
</div>
5669
<div className="flex items-center text-xl mb-3">
57-
<div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl px-4 py-2">
58-
<div className="text-2xl">
70+
<div className="custom:hover:bg-neutral-900 flex gap-4 custom:hover:bg-opacity-40 transition duration-200 custom:hover:rounded-2xl px-4 py-2">
71+
<div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl text-2xl">
5972
<GrokIcon />
6073
</div>
61-
Grok
74+
<div className="custom:visible invisible">Grok</div>
6275
</div>
6376
</div>
6477
<div className="flex items-center text-xl mb-3">
65-
<div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl px-4 py-2 items-center">
66-
<div className="text-3xl">
78+
<div className="custom:hover:bg-neutral-900 flex gap-4 custom:hover:bg-opacity-40 transition duration-200 custom:hover:rounded-2xl px-4 py-2 items-center">
79+
<div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl text-2xl">
6780
<X_Icon />
6881
</div>
69-
Premium
82+
<div className="custom:visible invisible">Premium</div>
7083
</div>
7184
</div>
7285
<div className="flex items-center text-xl mb-3">
73-
<div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl px-4 py-2">
74-
<div className="text-2xl">
86+
<div className="custom:hover:bg-neutral-900 flex gap-4 custom:hover:bg-opacity-40 transition duration-200 custom:hover:rounded-2xl px-4 py-2">
87+
<div className="hover:bg-neutral-800 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl text-2xl">
7588
<FaRegBookmark />
7689
</div>
77-
Bookmarks
90+
<div className="custom:visible invisible">Bookmarks</div>
7891
</div>
7992
</div>
8093
<div className="flex items-center text-xl mb-3">
81-
<div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl px-4 py-2">
82-
<div className="text-2xl">
94+
<div className="custom:hover:bg-neutral-900 flex gap-4 custom:hover:bg-opacity-40 transition duration-200 custom:hover:rounded-2xl px-4 py-2">
95+
<div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl text-2xl">
8396
<RiGroupLine />
8497
</div>
85-
Communities
98+
<div className="custom:visible invisible">Communities</div>
8699
</div>
87100
</div>
88101
<div className="flex items-center text-xl mb-3">
89-
<div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl px-4 py-2">
90-
<div className="text-2xl">
102+
<div className="custom:hover:bg-neutral-900 flex gap-4 custom:hover:bg-opacity-40 transition duration-200 custom:hover:rounded-2xl px-4 py-2">
103+
<div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl text-2xl">
91104
<AiOutlineThunderbolt />
92105
</div>
93-
Verified Orgs
106+
<div className="custom:visible invisible">Communities</div>
94107
</div>
95108
</div>
96109
<div className="flex items-center text-xl mb-3">
97-
<div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl px-4 py-2">
98-
<div className="text-2xl">
110+
<div className="custom:hover:bg-neutral-900 flex gap-4 custom:hover:bg-opacity-40 transition duration-200 custom:hover:rounded-2xl px-4 py-2">
111+
<div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl text-2xl">
99112
<FaRegUser />
100113
</div>
101-
Profile
114+
<div className="custom:visible invisible">Profile</div>
102115
</div>
103116
</div>
104-
<div className="flex items-center py-0.5 gap-4 text-xl mb-3">
105-
<div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl px-4 py-2">
106-
<div className="text-2xl">
117+
<div className="flex items-center py-0.5 gap-4 text-xl">
118+
<div className="custom:hover:bg-neutral-900 flex gap-4 custom:hover:bg-opacity-40 transition duration-200 custom:hover:rounded-2xl px-4 py-2">
119+
<div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl text-2xl">
107120
<CgMoreO />
108121
</div>
109-
More
122+
<div className="custom:visible invisible">More</div>
110123
</div>
111124
</div>
112-
<Button className="rounded-3xl w-full mt-6 px-20 py-6 font-semibold ">
113-
Post
114-
</Button>
125+
<div className="">
126+
<Button
127+
className="invisible custom:visible rounded-3xl w-full custom:mt-3 px-20 py-6 font-semibold"
128+
onClick={onPostClick}
129+
>
130+
Post
131+
</Button>
132+
<TbOctagonPlus
133+
className="custom:hidden block text-4xl ml-3 cursor-pointer hover:bg-white hover:rounded-3xl hover:text-black "
134+
onClick={onPostClick}
135+
/>
136+
</div>
115137
</div>
116138
<div className="mt-28">
117139
<div>

‎apps/X/tailwind.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default {
1212
theme: {
1313
extend: {
1414
screens: {
15-
custom: "927px",
15+
custom: "961px",
1616
},
1717
borderRadius: {
1818
lg: "var(--radius)",

0 commit comments

Comments
 (0)