building componets for tweets

mscode07 · mscode07 · commit 2986c21e1e48 · 2025-01-05T21:36:46.000+05:30
diff --git a/apps/X/app/favicon.ico b/apps/X/app/favicon.ico
diff --git a/apps/X/app/icon.svg b/apps/X/app/icon.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
+  <!-- Black background -->
+  <rect width="50" height="50" rx="7" fill="black"/>
+  <!-- White X logo -->
+  <path d="M 13.085938 13 L 21.023438 13 L 26.660156 21.009766 L 33.5 13 L 36 13 L 27.789062 22.613281 L 37.914062 37 L 29.978516 37 L 23.4375 27.707031 L 15.5 37 L 13 37 L 22.308594 26.103516 L 13.085938 13 z M 16.914062 15 L 31.021484 35 L 34.085938 35 L 19.978516 15 L 16.914062 15 z" fill="white"/>
+</svg>
diff --git a/apps/X/app/layout.tsx b/apps/X/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
+import { Provieder } from "./provider";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -23,9 +24,11 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" className="dark">
-      <body className={`${geistSans.variable} ${geistMono.variable} m-0`}>
-        {children}
-      </body>
+      <Provieder>
+        <body className={`${geistSans.variable} ${geistMono.variable} m-0`}>
+          {children}
+        </body>
+      </Provieder>
     </html>
   );
 }
diff --git a/apps/X/app/lib/auth.ts b/apps/X/app/lib/auth.ts
@@ -116,26 +116,25 @@ export const authOptions = {
   Secret: process.env.NEXTAUTH_SECRET || "secr3t",
 
   callbacks: {
-    async jwt({ token }: { token: JWT }) {
+    async jwt({ token, user }: any) {
+      if (user) {
+        token.id = user.id;
+      }
       return token;
     },
-
     async session({ session, token }: any) {
-      const user = await db.user.findUnique({
-        where: { id: token.sub },
-      });
-      console.log(user, "Thsi is the user");
+      // const user = await db.user.findUnique({
+      //   where: { id: token.sub },
+      // });
 
       if (token) {
-        session.accessToken = token.accessToken;
-        console.log(session.accessToken, " This is from the sesson function 1");
         session.user.id = token.sub;
-        console.log(session.userid, " This is from the sesson function 2");
       }
+
       return session;
     },
   },
   pages: {
-    signIn: "/",
+    signIn: "/signin",
   },
 };
diff --git a/apps/X/app/page.tsx b/apps/X/app/page.tsx
@@ -5,13 +5,14 @@ import { redirect } from "next/navigation";
 const Page = async () => {
   const session = await getServerSession(authOptions);
 
-  if (!session?.user) {
-    console.log("This is the User session >>>>>>>>>>>>>>>>>", session?.user);
-
+  if (!session) {
+    console.log("No session,redirecting to SIGNIN");
     redirect("/signin");
-  } else {
+  }
+  if (session.user && session.user.id) {
     redirect("/home");
   }
+  return <div>Loading......</div>;
 };
 
 export default Page;
diff --git a/apps/X/app/provider.tsx b/apps/X/app/provider.tsx
@@ -0,0 +1,6 @@
+"use client";
+import { SessionProvider } from "next-auth/react";
+
+export const Provieder = ({ children }: { children: React.ReactNode }) => {
+  return <SessionProvider>{children}</SessionProvider>;
+};
diff --git a/apps/X/package.json b/apps/X/package.json
@@ -11,6 +11,7 @@
     "check-types": "tsc --noEmit"
   },
   "dependencies": {
+    "@radix-ui/react-avatar": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-slot": "^1.1.1",
     "@repo/ui": "*",
diff --git a/apps/X/src/components/home/CenterComp.tsx b/apps/X/src/components/home/CenterComp.tsx
diff --git a/apps/X/src/components/home/HomeCenterComp.tsx b/apps/X/src/components/home/HomeCenterComp.tsx
@@ -0,0 +1,11 @@
+import { TweetComp } from "../ui";
+
+
+export const CenterComp = () => {
+  return (
+    <div>
+      Center Home
+      <TweetComp />
+    </div>
+  );
+};
diff --git a/apps/X/src/components/ui/LoginComp.tsx b/apps/X/src/components/ui/LoginComp.tsx
@@ -38,6 +38,8 @@ export const LoginComp = () => {
       const result = await signIn("credentials", {
         username: formData.username,
         password: formData.password,
+        redirect: true,
+        callbackUrl: "/home",
       });
     } catch (error) {
       console.log(error, "Error with Credentials");
diff --git a/apps/X/src/components/ui/TweetComp.tsx b/apps/X/src/components/ui/TweetComp.tsx
@@ -0,0 +1,9 @@
+import { UserAvatar } from "./usrAvatar";
+
+export const TweetComp = () => {
+  return (
+    <div>
+      <UserAvatar />
+    </div>
+  );
+};
diff --git a/apps/X/src/components/ui/UserCredentials.tsx b/apps/X/src/components/ui/UserCredentials.tsx
@@ -31,6 +31,8 @@ export const UserCredentials = () => {
         email: formData.email,
         name: formData.name,
         password: formData.password,
+        redirect: true,
+        callbackUrl: "/home",
       });
     } catch (error) {
       console.log(error, "Error with Credentials");
diff --git a/apps/X/src/components/ui/avatar.tsx b/apps/X/src/components/ui/avatar.tsx
@@ -0,0 +1,47 @@
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "@/lib/utils";
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };
diff --git a/apps/X/src/components/ui/index.ts b/apps/X/src/components/ui/index.ts
@@ -9,14 +9,18 @@ import { LoginComp } from "./LoginComp";
 import { UserCredentials } from "./UserCredentials";
 import { HomeRight } from "../home/HomeRight";
 import { HomeLeft } from "../home/HomeLeft";
-import { CenterComp } from "../home/CenterComp";
+import { CenterComp } from "../home/HomeCenterComp";
+import { TweetComp } from "./TweetComp";
+import { UserAvatar } from "./usrAvatar";
 
 export {
   SigninComp,
+  UserAvatar,
   SigninRightCom,
   Button,
   X_logoBIG,
   Dialog,
+  TweetComp,
   X_logo,
   Input,
   HomeRight,
diff --git a/apps/X/src/components/ui/usrAvatar.tsx b/apps/X/src/components/ui/usrAvatar.tsx
@@ -0,0 +1,12 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+
+export function UserAvatar() {
+  return (
+    <div>
+      <Avatar>
+        <AvatarImage src="https://github.com/mscode07.png" />
+        <AvatarFallback>ON</AvatarFallback>
+      </Avatar>
+    </div>
+  );
+}
diff --git a/yarn.lock b/yarn.lock
@@ -553,6 +553,16 @@
   resolved "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.1.tgz"
   integrity sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==
 
+"@radix-ui/react-avatar@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-avatar/-/react-avatar-1.1.2.tgz#24af4c66bb5271460a4a6b74c4f4f9d4789d3d90"
+  integrity sha512-GaC7bXQZ5VgZvVvsJ5mu/AEbjYLnhhkoidOboC50Z6FFlLA03wG2ianUoH+zgDQ31/9gCF59bE4+2bBgTyMiig==
+  dependencies:
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-primitive" "2.0.1"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
 "@radix-ui/react-compose-refs@1.1.1":
   version "1.1.1"
   resolved "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz"
