Skip to content

Commit a80542e

Browse files
mscode07mscode07
committed
building UI
1 parent 2303249 commit a80542e

File tree

15 files changed

+178
-24
lines changed

15 files changed

+178
-24
lines changed

‎apps/X/public/grok.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎apps/X/public/x icon.svg‎

Lines changed: 1 addition & 0 deletions
Loading

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
1-
import { TweetComp } from "../ui";
1+
import { TopHead, TopPost, TweetComp } from "../ui";
22

33
export const CenterComp = () => {
44
return (
55
<div>
6-
<div className=" border-slate-800 border border-y-0 h-screen ">
6+
<div className="border border-slate-800 border-x-0">
7+
<TopHead />
8+
</div>
9+
<div>
10+
<TopPost />
11+
</div>
12+
<div className="">
713
<TweetComp />
814
</div>
915
</div>

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

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,33 @@
1-
import { HomeRight, Button, CenterComp, HomeLeft } from "@/components/ui";
1+
import { CenterComp, HomeLeft, HomeRight } from "@/components/ui";
22

33
export const HomeComp = () => {
44
return (
55
<div>
6-
<div className="grid grid-cols-9">
7-
<div className="col-span-1"></div>
8-
<div className="col-span-2">
9-
<HomeRight />
10-
</div>
11-
<div className="col-span-3">
12-
<CenterComp />
13-
</div>
14-
{/* <div className="col-span-1"></div> */}
15-
<div className="col-span-2">
6+
<div></div>
7+
<div className="grid grid-cols-6 ">
8+
<div></div>
9+
<div className="">
1610
<HomeLeft />
1711
</div>
18-
<div className="col-span-1"></div>
12+
<div className="flex mx-10">
13+
<div className="border col-span-3">
14+
<CenterComp />
15+
</div>
16+
<div className="ml-10 col-span-2 ">
17+
<HomeRight />
18+
</div>
19+
</div>
1920
</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> */}
30+
{/* border-slate-800 border border-y-0 h-screen */}
2031
</div>
2132
);
2233
};

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

Lines changed: 76 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,78 @@
1-
"use client"
1+
"use client";
2+
3+
import { AiOutlineThunderbolt } from "react-icons/ai";
4+
import { CgMoreO } from "react-icons/cg";
5+
import { FaRegBookmark } from "react-icons/fa";
6+
import { FaRegUser } from "react-icons/fa6";
7+
import { GoHome } from "react-icons/go";
8+
import { IoMdSearch } from "react-icons/io";
9+
import { MdOutlineMail } from "react-icons/md";
10+
import { RiGroupLine, RiNotification2Line } from "react-icons/ri";
11+
import { Button, UserAvatar, X_logo } from "../ui";
12+
import GrokIcon from "../ui/Grok";
13+
import X_Icon from "../ui/X_Icon";
214
export const HomeLeft = () => {
3-
return <div>Home Left</div>;
15+
return (
16+
<div>
17+
<div className="h-screen pt-4">
18+
<div className="flex flex-col items-end">
19+
<div className="flex flex-col">
20+
<div>
21+
<div className="mb-6 ">
22+
<X_logo />
23+
</div>
24+
<div className="flex items-center gap-4 text-xl mb-6">
25+
<GoHome />
26+
Home
27+
</div>
28+
<div className="flex items-center gap-4 text-xl mb-6">
29+
<IoMdSearch />
30+
Explore
31+
</div>
32+
<div className="flex items-center gap-4 text-xl mb-6">
33+
<RiNotification2Line />
34+
Notifications
35+
</div>
36+
<div className="flex items-center gap-4 text-xl mb-6">
37+
<MdOutlineMail />
38+
Messages
39+
</div>
40+
<div className="flex items-center gap-4 text-xl mb-6">
41+
<GrokIcon />
42+
Grok
43+
</div>
44+
<div className="flex items-center gap-4 text-xl mb-6">
45+
<X_Icon />
46+
Premium
47+
</div>
48+
<div className="flex items-center gap-4 text-xl mb-6">
49+
<FaRegBookmark />
50+
Bookmarks
51+
</div>
52+
<div className="flex items-center gap-4 text-xl mb-6">
53+
<RiGroupLine />
54+
Communities
55+
</div>
56+
<div className="flex items-center gap-4 text-xl mb-6">
57+
<AiOutlineThunderbolt />
58+
Verified Orgs
59+
</div>
60+
<div className="flex items-center gap-4 text-xl mb-6">
61+
<FaRegUser />
62+
Profile
63+
</div>
64+
<div className="flex items-center gap-4 text-xl mb-6">
65+
<CgMoreO />
66+
More
67+
</div>
68+
<Button className="rounded-3xl w-full mt-6 px-10 ">Post</Button>
69+
</div>
70+
</div>
71+
</div>
72+
<div className="mt-auto">
73+
<UserAvatar />
74+
</div>
75+
</div>
76+
</div>
77+
);
478
};

‎apps/X/src/components/home/HomeRight.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
"use client"
1+
"use client";
22
export const HomeRight = () => {
3-
return <div>Home Right Side</div>;
3+
return <div>Home Right</div>;
44
};

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from "react";
2+
3+
interface IconProps extends React.SVGProps<SVGSVGElement> {}
4+
5+
const GrokIcon: React.FC<IconProps> = (props) => {
6+
return (
7+
<svg
8+
fill="currentColor"
9+
fillRule="evenodd"
10+
height="1em"
11+
style={{ flex: "none", lineHeight: "1" }}
12+
viewBox="0 0 24 24"
13+
width="1em"
14+
xmlns="http://www.w3.org/2000/svg"
15+
{...props}
16+
>
17+
<title>Grok</title>
18+
<path d="M6.469 8.776L16.512 23h-4.464L2.005 8.776H6.47zm-.004 7.9l2.233 3.164L6.467 23H2l4.465-6.324zM22 2.582V23h-3.659V7.764L22 2.582zM22 1l-9.952 14.095-2.233-3.163L17.533 1H22z"></path>
19+
</svg>
20+
);
21+
};
22+
23+
export default GrokIcon;

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

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

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { RiShare2Line } from "react-icons/ri";
88
<RiShare2Line />;
99
export const TweetComp = () => {
1010
return (
11-
<div className="">
11+
<div className="border border-slate-800 border-x-0">
1212
<div className="flex p-3 gap-2">
1313
<div className="mt-1">
1414
<UserAvatar />

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const UserCredentials = () => {
4141

4242
return (
4343
<div>
44-
<div className="">
44+
<div className="ml-4">
4545
<X_logo />
4646
</div>
4747

0 commit comments

Comments
 (0)