diff --git a/next.config.mjs b/next.config.mjs index cdbe88e..c43db3f 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -8,6 +8,9 @@ const nextConfig = { { hostname: "www.google.com", }, + { + hostname: "lh3.googleusercontent.com", + }, ], }, }; diff --git a/public/grid.svg b/public/grid.svg new file mode 100644 index 0000000..76e3b29 --- /dev/null +++ b/public/grid.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 73c01d4..801e60d 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -4,6 +4,7 @@ import localFont from "next/font/local"; import "@/env.server"; import "./globals.css"; import { Providers } from "./providers"; +import { Background } from "@/components/background"; const geistSans = localFont({ src: "./fonts/GeistVF.woff", diff --git a/src/app/page.tsx b/src/app/page.tsx index f51520e..19fb282 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,63 +1,68 @@ +import Link from "next/link"; +import { Suspense } from "react"; + +import { Background } from "@/components/background"; import { Testimonials } from "@/components/home/Testimonials"; import { BookOpen } from "@/components/icons"; import { MainLayout } from "@/components/layouts/MainLayout"; import ProjectsList from "@/components/projects/projects-list"; import SearchBar, { SearchBarPlaceholder } from "@/components/ui/search-bar"; -import Link from "next/link"; -import { Suspense } from "react"; export default function Home() { return ( - -
- - -

- Why we built ReLaunch? + <> + + +

+ + +

+ Why we built ReLaunch? +

+ +

+ Showcasing ideas to the public! +

+

+ Share your work and connect with a global audience in a space + designed to reflect your unique style.

- -

- Showcasing ideas to the public! -

-

- Share your work and connect with a global audience in a space designed - to reflect your unique style. -

-
- }> - - +
+ }> + + +
-
-
-
-
- -
+
+
+
+ +
-
-

All projects

- +
+

All projects

+ +
-
- + + ); } diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx deleted file mode 100644 index d1f48d3..0000000 --- a/src/app/profile/page.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { auth } from "@/modules/auth"; - -export default async function ProfilePage() { - const session = await auth(); - - if (!session?.user) return null; - - return ( -
- User Avatar -

{session.user.name}

-
- ); -} diff --git a/src/app/u/[id]/page.tsx b/src/app/u/[id]/page.tsx new file mode 100644 index 0000000..bcb4bff --- /dev/null +++ b/src/app/u/[id]/page.tsx @@ -0,0 +1,61 @@ +import Image from "next/image"; +import { redirect } from "next/navigation"; + +import { constructMetadata } from "@/lib/utils"; +import { getUserProfile } from "@/modules/user/get-user"; +import { MainLayout } from "@/components/layouts/MainLayout"; +import { getUserProjects } from "@/modules/actions/get-user-projects"; +import { ProjectsGrid } from "@/components/projects/projects-grid"; + +interface Props { + params: { id: string }; +} + +export async function generateMetadata({ params }: Props) { + const { id } = await params; + const user = await getUserProfile(id); + + if (!user) return; + + return constructMetadata({ + title: `${user.name} | Relaunch`, + description: `Checkout ${user.name} Projects on Relaunch and give him feedback and support.`, + image: user.image, + }); +} + +export default async function ProfilePage({ params }: Props) { + const { id } = await params; + const user = await getUserProfile(id); + const projects = await getUserProjects({ userId: id }); + + if (!user) { + redirect("/"); + } + + return ( + +
+
+ {user.name!} +
+ +
+

Gallery

+
+ +
+
+ + ); +} diff --git a/src/components/background.tsx b/src/components/background.tsx new file mode 100644 index 0000000..29bfcc1 --- /dev/null +++ b/src/components/background.tsx @@ -0,0 +1,59 @@ +export function Background() { + return ( +
+
+
+
+
+ ); +} + +const styles: { [key: string]: React.CSSProperties } = { + backgroundMain: { + width: "100vw", + minHeight: "100vh", + position: "fixed", + zIndex: 1, + display: "flex", + justifyContent: "center", + padding: "120px 24px 160px 24px", + pointerEvents: "none", + }, + backgroundMainBefore: { + background: "radial-gridient(circle, rgba(2, 0, 36, 0) 0, #fafafa 100%)", + position: "absolute", + content: '""', + zIndex: 2, + width: "100%", + height: "100%", + top: 0, + }, + backgroundMainAfter: { + content: '""', + backgroundImage: "url(/grid.svg)", + zIndex: 1, + position: "absolute", + width: "100%", + height: "100%", + top: 0, + opacity: 0.4, + filter: "invert(1)", + }, + backgroundContent: { + zIndex: 3, + width: "100%", + maxWidth: "640px", + backgroundImage: `radial-gradient(at 27% 37%, hsla(215, 98%, 61%, 1) 0px, transparent 0%), + radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 1) 0px, transparent 50%), + radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 1) 0px, transparent 50%), + radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 1) 0px, transparent 50%), + radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 1) 0px, transparent 50%), + radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 1) 0px, transparent 50%), + radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 1) 0px, transparent 50%)`, + position: "absolute", + height: "100%", + filter: "blur(100px) saturate(150%)", + top: "80px", + opacity: 0.15, + }, +}; diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx index a450f54..4d49299 100644 --- a/src/components/navbar.tsx +++ b/src/components/navbar.tsx @@ -59,7 +59,7 @@ export default function Navbar({ > - + diff --git a/src/modules/actions/get-user-projects.ts b/src/modules/actions/get-user-projects.ts index 1da64d5..0ca0ed3 100644 --- a/src/modules/actions/get-user-projects.ts +++ b/src/modules/actions/get-user-projects.ts @@ -7,13 +7,11 @@ export const getUserProjects = async ({ userId, }: { userId: string; -}): Promise => { +}): Promise => { const result = await db .select() .from(projects) .where(eq(projects.userId, userId)); - if (!result) return null; - return result; }; diff --git a/src/modules/user/get-user.ts b/src/modules/user/get-user.ts new file mode 100644 index 0000000..ff88562 --- /dev/null +++ b/src/modules/user/get-user.ts @@ -0,0 +1,17 @@ +import { eq } from "drizzle-orm"; +import { cache } from "react"; + +import { db } from "@/db"; +import { users } from "@/db/schema"; + +export const getUserProfile = cache(async (id: string) => { + const [result] = await db + .select() + .from(users) + .where(eq(users.id, id)) + .limit(1); + + if (!result) return null; + + return result; +});