+ {size === "sm" ? "Integer finibus dolor felis, eu placerat sapien dictum sit amet." : size === "md" ? "Integer finibus dolor felis, eu placerat sapien dictum sit amet. Vestibulum quis eros sed massa mollis feugiat. Integer pulvinar enim nec ultricies convallis." : "Integer finibus dolor felis, eu placerat sapien dictum sit amet. Vestibulum quis eros sed massa mollis feugiat. Integer pulvinar enim nec ultricies convallis."}
+
+
+
+
+ )
+}
+ export default Ad
\ No newline at end of file
diff --git a/src/app/components/AddPost.tsx b/src/app/components/AddPost.tsx
new file mode 100644
index 00000000..4d92de49
--- /dev/null
+++ b/src/app/components/AddPost.tsx
@@ -0,0 +1,60 @@
+import Image from "next/image"
+
+const AddPost = () => {
+ return (
+
+ {/* Avatar */}
+
+
+ {/* post */}
+
+ {/* text input */}
+
+
+
+
+
+
+ {/* post option */}
+
+ {/* add image */}
+
+
+
+ Photo
+
+ {/* add video */}
+
+
+
+ Videos
+
+ {/* add poll */}
+
+
+
+ Poll
+
+ {/* add event */}
+
+
+
+ Event
+
+
+
+
+
+
+ )
+
+
+}
+
+export default AddPost
\ No newline at end of file
diff --git a/src/app/components/Birthdays.tsx b/src/app/components/Birthdays.tsx
new file mode 100644
index 00000000..7f81ab4b
--- /dev/null
+++ b/src/app/components/Birthdays.tsx
@@ -0,0 +1,33 @@
+import Link from "next/link"
+import Image from "next/image"
+
+const Birthdays = () => {
+ return (
+
+ {/* TOP */}
+
+ Birthdays
+
+ {/* USER */}
+
+
+
+ Wayne Burton
+
+
+
+
+
+ {/* UPCOMING */}
+
+
+
+ Upcoming Birtdays
+ See other 12 upcoming birtdays
+
+
+
+ )
+}
+
+export default Birthdays
\ No newline at end of file
diff --git a/src/app/components/Comments.tsx b/src/app/components/Comments.tsx
new file mode 100644
index 00000000..45acf03f
--- /dev/null
+++ b/src/app/components/Comments.tsx
@@ -0,0 +1,43 @@
+import Image from "next/image"
+const Comments = () => {
+ return (
+
+ {/* WRITE */}
+
+
+
+
+
+
+
+ {/* COMMENTS */}
+
+ {/* COMMENT */}
+
+ {/* AVATAR */}
+
+
+ {/* DESC */}
+
+ testuser
+
Coffee is a beverage brewed from roasted coffee beans. Darkly colored, bitter, and slightly acidic, coffee has a stimulating effect on humans, primarily due to its caffeine content and i love them so much
+
+
+
+ |
+ 123 Likes
+
+
Reply
+
+
+ {/* ICON */}
+
+
+
+
+ )
+}
+
+export default Comments
\ No newline at end of file
diff --git a/src/app/components/Feed.tsx b/src/app/components/Feed.tsx
new file mode 100644
index 00000000..68f4b179
--- /dev/null
+++ b/src/app/components/Feed.tsx
@@ -0,0 +1,12 @@
+import Image from "next/image"
+import Post from "./Post"
+
+const Feed = () => {
+ return (
+
+
+
+ )
+}
+
+export default Feed
\ No newline at end of file
diff --git a/src/app/components/FriendRequests.tsx b/src/app/components/FriendRequests.tsx
new file mode 100644
index 00000000..ace0dfbd
--- /dev/null
+++ b/src/app/components/FriendRequests.tsx
@@ -0,0 +1,49 @@
+import Link from "next/link"
+import Image from "next/image"
+
+const FriendRequests = () => {
+ return (
+
+ {/* TOP */}
+
+ Friend Requests
+ See all
+
+ {/* USER */}
+
+
+
+ Wayne Burton
+
+
+
+
+
+
+
+
+
+
+ Wayne Burton
+
+
+
+
+
+
+
+
+
+
+ Wayne Burton
+
+
+
+
+
+
+
+ )
+}
+
+export default FriendRequests
\ No newline at end of file
diff --git a/src/app/components/LeftMenu.tsx b/src/app/components/LeftMenu.tsx
new file mode 100644
index 00000000..2c1bc9d6
--- /dev/null
+++ b/src/app/components/LeftMenu.tsx
@@ -0,0 +1,77 @@
+import ProfileCard from "./ProfileCard"
+import Link from "next/link"
+import Image from "next/image"
+import Ad from "./Ad"
+
+const LeftMenu = ({ type }: { type: "home" | "profile" }) => {
+ return (
+
+
+
+
+ )
+}
+
+export default Navbar
\ No newline at end of file
diff --git a/src/app/components/Post.tsx b/src/app/components/Post.tsx
new file mode 100644
index 00000000..5a818d69
--- /dev/null
+++ b/src/app/components/Post.tsx
@@ -0,0 +1,62 @@
+"use user"
+import Image from "next/image"
+import Comments from "./Comments"
+const Post = () => {
+ return (
+
+ {/* USER */}
+
+
+
+ Feilin
+
+
+
+
+ {/* DESC */}
+
+
+
+
+
Coffee is a beverage brewed from roasted coffee beans. Darkly colored, bitter, and slightly acidic, coffee has a stimulating effect on humans, primarily due to its caffeine content
+
+ {/* INTERACTION */}
+
+ {/* Likes */}
+
+
+
+ |
+ 500 Likes
+
+
+ {/* Comment */}
+
+
+
+ |
+ 500 Comments
+
+
+
+
+
+
+ |
+ 500 Shares
+
+
+
+
+
+
+ )
+}
+
+export default Post
\ No newline at end of file
diff --git a/src/app/components/ProfileCard.tsx b/src/app/components/ProfileCard.tsx
new file mode 100644
index 00000000..8b7ee3ce
--- /dev/null
+++ b/src/app/components/ProfileCard.tsx
@@ -0,0 +1,26 @@
+import Image from "next/image"
+
+const ProfileCard = () => {
+ return (
+
+
+
+
+
+
+ Edward Gabriel May
+
+
+
+
+
+
+ 500 Followers
+
+
+
+
+ )
+}
+
+export default ProfileCard
\ No newline at end of file
diff --git a/src/app/components/RightMenu.tsx b/src/app/components/RightMenu.tsx
new file mode 100644
index 00000000..9a9c1aa6
--- /dev/null
+++ b/src/app/components/RightMenu.tsx
@@ -0,0 +1,20 @@
+import FriendRequests from "./FriendRequests"
+import Birthdays from "./Birthdays"
+import Ad from "./Ad"
+import UserInfoCard from "./UserInfoCard"
+import UserMediaCard from "./UserMediaCard"
+const RightMenu = ({userId}: {userId?:string}) => {
+ return (
+
+ {userId ? (<>
+
+
+ ) : null}
+
+
+
+
+ )
+}
+
+export default RightMenu
\ No newline at end of file
diff --git a/src/app/components/Stories.tsx b/src/app/components/Stories.tsx
new file mode 100644
index 00000000..2f294047
--- /dev/null
+++ b/src/app/components/Stories.tsx
@@ -0,0 +1,16 @@
+import Image from "next/image"
+const Stories = () => {
+ return (
+
+
+ {/* Stories */}
+
+
+ Feilin
+
+
+
+ )
+}
+
+export default Stories
\ No newline at end of file
diff --git a/src/app/components/UserInfoCard.tsx b/src/app/components/UserInfoCard.tsx
new file mode 100644
index 00000000..92dbcf0f
--- /dev/null
+++ b/src/app/components/UserInfoCard.tsx
@@ -0,0 +1,53 @@
+import Link from "next/link"
+import Image from "next/image"
+
+const UserInfoCard = ({ userId }: { userId?: string }) => {
+ return (
+
+ {/* TOP */}
+
+ User Info
+ See all
+
+ {/* BOTTOM */}
+
+
+ Lyod Flemming
+ @jonathan
+
+
Integer finibus dolor felis, eu placerat sapien dictum sit amet. Vestibulum quis eros sed massa mollis feugiat. Integer pulvinar enim nec ultricies convallis.
+
+
+
+ Living in Denver
+
+
+
+
+ Went to Sunny Highschool
+
+
+
+
+ Work at Astra
+
+
+
+
+
+ ali.dev
+
+
+
+ Joined November 2024
+
+
+
+
+ Block User
+
+
+ )
+}
+
+export default UserInfoCard
\ No newline at end of file
diff --git a/src/app/components/UserMediaCard.tsx b/src/app/components/UserMediaCard.tsx
new file mode 100644
index 00000000..5ba1608f
--- /dev/null
+++ b/src/app/components/UserMediaCard.tsx
@@ -0,0 +1,50 @@
+import Link from "next/link"
+import Image from "next/image"
+
+const UserMediaCard = ({ userId }: { userId?: string }) => {
+ return (
+
+ {/* TOP */}
+
+ User Media
+ See all
+
+ {/* BOTTOM */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default UserMediaCard
\ No newline at end of file
diff --git a/src/app/globals.css b/src/app/globals.css
index bd6213e1..3e4cb23d 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,3 +1,12 @@
@tailwind base;
@tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+/* globals.css or equivalent file */
+.scrollbar-hide {
+ -ms-overflow-style: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+ display: none; /* For Chrome, Safari, and Opera */
+}
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 04269735..1595a87f 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,7 +1,14 @@
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
-
+import Navbar from "./components/Navbar";
+import {
+ ClerkProvider,
+ // SignInButton,
+ // SignedIn,
+ // SignedOut,
+ // UserButton
+} from '@clerk/nextjs'
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
@@ -15,8 +22,17 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
-
- {children}
-
+
+
+
+
+
+
+
+ {children}
+
+
+
+
);
}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3d365a49..ec0a034c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,30 @@
+import LeftMenu from "./components/LeftMenu";
+import RightMenu from "./components/RightMenu";
+import Feed from "./components/Feed";
+import AddPost from "./components/AddPost";
+import Stories from "./components/Stories";
const Homepage = () => {
return (
-
Homepage
+
+ {/* Left components */}
+
+
+
+
+ {/* Center components */}
+
+
+
+
+
+
+
+
+ {/* Right components */}
+
+
+
+
)
}
diff --git a/src/app/profile/[id]/page.tsx b/src/app/profile/[id]/page.tsx
new file mode 100644
index 00000000..93a2e2e4
--- /dev/null
+++ b/src/app/profile/[id]/page.tsx
@@ -0,0 +1,50 @@
+import LeftMenu from "../../components/LeftMenu";
+import RightMenu from "../../components/RightMenu";
+import Feed from "../../components/Feed";
+import Image from "next/image"
+
+const ProfilePage = () => {
+ return (
+
+ {/* Left components */}
+
+
+
+
+ {/* Center components */}
+
+
+
+
+
+
+
+
Justinian
+
+
+ 123
+ Posts
+
+
+ 2k
+ Followers
+
+
+ 1k
+ Following
+
+
+
+
+
+
+
+ {/* Right components */}
+
+
+
+
+ )
+}
+
+export default ProfilePage
\ No newline at end of file
diff --git a/src/app/profile/[id]page.tsx b/src/app/profile/[id]page.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/sign-in/[[...sign-in]]/page.tsx b/src/app/sign-in/[[...sign-in]]/page.tsx
new file mode 100644
index 00000000..5f2bae3f
--- /dev/null
+++ b/src/app/sign-in/[[...sign-in]]/page.tsx
@@ -0,0 +1,7 @@
+import { SignIn } from "@clerk/nextjs";
+
+export default function Page() {
+ return (
+
+
);
+}
\ No newline at end of file
diff --git a/src/app/sign-up/[[...sign-up]]/page.tsx b/src/app/sign-up/[[...sign-up]]/page.tsx
new file mode 100644
index 00000000..db206dbc
--- /dev/null
+++ b/src/app/sign-up/[[...sign-up]]/page.tsx
@@ -0,0 +1,7 @@
+import { SignUp } from "@clerk/nextjs";
+
+export default function Page() {
+ return(
+
+
);
+}
\ No newline at end of file
diff --git a/src/middleware.ts b/src/middleware.ts
new file mode 100644
index 00000000..b4970260
--- /dev/null
+++ b/src/middleware.ts
@@ -0,0 +1,16 @@
+import { auth, clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
+
+
+const isProtectedRoute = createRouteMatcher(["/settings(.*)"])
+export default clerkMiddleware((auth,req)=>{
+ if(isProtectedRoute(req)) auth().protect();
+});
+
+export const config = {
+ matcher: [
+ // Skip Next.js internals and all static files, unless found in search params
+ '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
+ // Always run for API routes
+ '/(api|trpc)(.*)',
+ ],
+};
\ No newline at end of file