diff --git a/apps/X/public/grok.svg b/apps/X/public/grok.svg new file mode 100644 index 0000000..536e713 --- /dev/null +++ b/apps/X/public/grok.svg @@ -0,0 +1 @@ +Grok \ No newline at end of file diff --git a/apps/X/public/x icon.svg b/apps/X/public/x icon.svg new file mode 100644 index 0000000..98af112 --- /dev/null +++ b/apps/X/public/x icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/X/src/components/home/CenterComp.tsx b/apps/X/src/components/home/CenterComp.tsx deleted file mode 100644 index e633dd4..0000000 --- a/apps/X/src/components/home/CenterComp.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { TweetComp } from "../ui"; - -export const CenterComp = () => { - return ( -
-
- -
-
- ); -}; diff --git a/apps/X/src/components/home/HomeComp.tsx b/apps/X/src/components/home/HomeComp.tsx deleted file mode 100644 index 692f4eb..0000000 --- a/apps/X/src/components/home/HomeComp.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { HomeRight, Button, CenterComp, HomeLeft } from "@/components/ui"; - -export const HomeComp = () => { - return ( -
-
-
-
- -
-
- -
- {/*
*/} -
- -
-
-
-
- ); -}; diff --git a/apps/X/src/components/home/HomeLeft.tsx b/apps/X/src/components/home/HomeLeft.tsx deleted file mode 100644 index 19a7732..0000000 --- a/apps/X/src/components/home/HomeLeft.tsx +++ /dev/null @@ -1,4 +0,0 @@ -"use client" -export const HomeLeft = () => { - return
Home Left
; -}; diff --git a/apps/X/src/components/home/HomeRight.tsx b/apps/X/src/components/home/HomeRight.tsx deleted file mode 100644 index 98547d2..0000000 --- a/apps/X/src/components/home/HomeRight.tsx +++ /dev/null @@ -1,4 +0,0 @@ -"use client" -export const HomeRight = () => { - return
Home Right Side
; -}; diff --git a/apps/X/src/components/ui/Grok.tsx b/apps/X/src/components/ui/Grok.tsx new file mode 100644 index 0000000..0c456f5 --- /dev/null +++ b/apps/X/src/components/ui/Grok.tsx @@ -0,0 +1,23 @@ +import React from "react"; + +interface IconProps extends React.SVGProps {} + +const GrokIcon: React.FC = (props) => { + return ( + + Grok + + + ); +}; + +export default GrokIcon; diff --git a/apps/X/src/components/ui/Post/TopPost.tsx b/apps/X/src/components/ui/Post/TopPost.tsx new file mode 100644 index 0000000..7125d0e --- /dev/null +++ b/apps/X/src/components/ui/Post/TopPost.tsx @@ -0,0 +1,37 @@ +"use client"; +import { useState } from "react"; +import { Button } from "../button"; +import { Input } from "../input"; +import { UserAvatar } from "../usrAvatar"; + +export const TopPost = () => { + const [postInput, setPostInput] = useState(""); + + const handelChanges = (e: React.ChangeEvent) => { + setPostInput(e.target.value); + }; + const handelClick = () => { + console.log(postInput); + }; + return ( +
+
+
+
+ +
+
+ +
+
+ +
+
+ ); +}; diff --git a/apps/X/src/components/ui/Post/topHead.tsx b/apps/X/src/components/ui/Post/topHead.tsx new file mode 100644 index 0000000..b73b62f --- /dev/null +++ b/apps/X/src/components/ui/Post/topHead.tsx @@ -0,0 +1,3 @@ +export const TopHead = () => { + return
Top of head
; +}; diff --git a/apps/X/src/components/ui/TweetComp.tsx b/apps/X/src/components/ui/TweetComp.tsx index 812e8d5..6cf5483 100644 --- a/apps/X/src/components/ui/TweetComp.tsx +++ b/apps/X/src/components/ui/TweetComp.tsx @@ -8,7 +8,7 @@ import { RiShare2Line } from "react-icons/ri"; ; export const TweetComp = () => { return ( -
+
diff --git a/apps/X/src/components/ui/X_Icon.tsx b/apps/X/src/components/ui/X_Icon.tsx new file mode 100644 index 0000000..2db3838 --- /dev/null +++ b/apps/X/src/components/ui/X_Icon.tsx @@ -0,0 +1,24 @@ +import React from "react"; + +interface IconProps extends React.SVGProps {} + +const X_Icon: React.FC = (props) => { + return ( + + + + ); +}; + +export default X_Icon; diff --git a/apps/X/src/components/ui/X_logo.tsx b/apps/X/src/components/ui/X_logo.tsx index 7fcfeb7..e8ef80c 100644 --- a/apps/X/src/components/ui/X_logo.tsx +++ b/apps/X/src/components/ui/X_logo.tsx @@ -1,7 +1,7 @@ export const X_logo = () => { return (
-
+
-
+
diff --git a/apps/X/src/components/ui/home/CenterComp.tsx b/apps/X/src/components/ui/home/CenterComp.tsx new file mode 100644 index 0000000..889c0c2 --- /dev/null +++ b/apps/X/src/components/ui/home/CenterComp.tsx @@ -0,0 +1,18 @@ +import { TopHead, TopPost, TweetComp } from ".."; + +export const CenterComp = () => { + return ( +
+
+ +
+
+ +
+
+ +
+
+ ); +}; +//border border-slate-800 border-x-0 diff --git a/apps/X/src/components/ui/home/HomeComp.tsx b/apps/X/src/components/ui/home/HomeComp.tsx new file mode 100644 index 0000000..1937964 --- /dev/null +++ b/apps/X/src/components/ui/home/HomeComp.tsx @@ -0,0 +1,33 @@ +import { CenterComp, HomeLeft, HomeRight } from "@/components/ui"; + +export const HomeComp = () => { + return ( +
+
+
+
+
+ +
+
+
+ +
+
+ +
+
+
+ {/*
+
+
+ +
+
+
+
+
*/} + {/* border-slate-800 border border-y-0 h-screen */} +
+ ); +}; diff --git a/apps/X/src/components/ui/home/HomeLeft.tsx b/apps/X/src/components/ui/home/HomeLeft.tsx new file mode 100644 index 0000000..b8000a7 --- /dev/null +++ b/apps/X/src/components/ui/home/HomeLeft.tsx @@ -0,0 +1,126 @@ +"use client"; + +import { AiOutlineThunderbolt } from "react-icons/ai"; +import { CgMoreO } from "react-icons/cg"; +import { FaRegBookmark } from "react-icons/fa"; +import { FaRegUser } from "react-icons/fa6"; +import { GoHome } from "react-icons/go"; +import { IoMdSearch } from "react-icons/io"; +import { MdOutlineMail } from "react-icons/md"; +import { RiGroupLine, RiNotification2Line } from "react-icons/ri"; +import { Button, UserAvatar, X_logo } from ".."; +import GrokIcon from "../Grok"; +import X_Icon from "../X_Icon"; +export const HomeLeft = () => { + return ( +
+
+
+
+
+
+ +
+
+
+
+ +
+ Home +
+
+
+
+
+ +
+ Explore +
+
+
+
+
+ +
+ Notifications +
+
+
+
+
+ +
+ Messages +
+
+
+
+
+ +
+ Grok +
+
+
+
+
+ +
+ Premium +
+
+
+
+
+ +
+ Bookmarks +
+
+
+
+
+ +
+ Communities +
+
+
+
+
+ +
+ Verified Orgs +
+
+
+
+
+ +
+ Profile +
+
+
+
+
+ +
+ More +
+
+ +
+
+
+ +
+
+
+
+
+
+ ); +}; diff --git a/apps/X/src/components/ui/home/HomeRight.tsx b/apps/X/src/components/ui/home/HomeRight.tsx new file mode 100644 index 0000000..cc7a2c5 --- /dev/null +++ b/apps/X/src/components/ui/home/HomeRight.tsx @@ -0,0 +1,4 @@ +"use client"; +export const HomeRight = () => { + return
Home Right
; +}; diff --git a/apps/X/src/components/ui/index.ts b/apps/X/src/components/ui/index.ts index 14107a6..c4a4ed6 100644 --- a/apps/X/src/components/ui/index.ts +++ b/apps/X/src/components/ui/index.ts @@ -1,22 +1,27 @@ -import { SigninRightCom } from "./SigninRightCom"; -import { SigninComp } from "./SigninComp"; +import { SigninRightCom } from "./auth/SigninRightCom"; +import { SigninComp } from "./auth/SigninComp"; import { X_logoBIG } from "./X_logoBIG"; import { Dialog } from "./dialog"; import { X_logo } from "./X_logo"; import { Input } from "./input"; -import { LoginComp } from "./LoginComp"; -import { UserCredentials } from "./UserCredentials"; -import { HomeRight } from "../home/HomeRight"; -import { HomeLeft } from "../home/HomeLeft"; -import { CenterComp } from "../home/CenterComp"; +import { LoginComp } from "./auth/LoginComp"; +import { UserCredentials } from "./auth/UserCredentials"; +import { HomeRight } from "./home/HomeRight"; +import { CenterComp } from "./home/CenterComp"; import { TweetComp } from "./TweetComp"; import { UserAvatar } from "./usrAvatar"; import { Button } from "./button"; -import { HomeComp } from "../home/HomeComp"; +import { HomeComp } from "./home/HomeComp"; +import { HomeLeft } from "./home/HomeLeft"; +import { TopHead } from "./Post/topHead"; +import { TopPost } from "./Post/TopPost"; export { + TopHead, + TopPost, SigninComp, HomeComp, + HomeLeft, Button, UserAvatar, SigninRightCom, @@ -26,7 +31,6 @@ export { X_logo, Input, HomeRight, - HomeLeft, CenterComp, UserCredentials, LoginComp, diff --git a/apps/X/tailwind.config.js b/apps/X/tailwind.config.js index b70cd1d..5076d01 100644 --- a/apps/X/tailwind.config.js +++ b/apps/X/tailwind.config.js @@ -12,7 +12,7 @@ export default { theme: { extend: { screens: { - custom: "943px", + custom: "927px", }, borderRadius: { lg: "var(--radius)",