feat(#212): implemented user profile with grid

app/user/[uid]/page.tsx

@@ -0,0 +1,29 @@
+import { Profile } from "@/components/layout/profile";
+import { RocksGridBuilder } from "@/components/widget/builder";
+import prisma from "@/services/prisma";
+
+type UserProfileProps = {
+  params: {
+    uid: string;
+  };
+};
+
+export default async function UserProfile({ params }: UserProfileProps) {
+  const userId = params.uid;
+
+  const user = await prisma.user.findUnique({
+    where: { id: userId },
+  });
+  if (!user) return <p>User not found</p>;
+
+  return (
+    <div className="container mx-auto py-24 flex divide-y-2">
+      <div className="w-1/6">
+        <Profile user={user} />
+      </div>
+      <div className="w-5/2">
+        <RocksGridBuilder rocks={[]} />
+      </div>
+    </div>
+  );
+}

components/layout/navbar.tsx

@@ -28,6 +28,7 @@ const links = [
 
 export default function NavbarWithLogin({ session }: INavbarWithLogin) {
   const segment = useSelectedLayoutSegment();
+
   return (
     <div className="flex h-16 mx-auto px-8 sm:px-0 items-center justify-between border-b border-b-slate-200 py-4 dark:border-b-gray-500">
       <Link href="/" className="items-center space-x-2 md:flex">
@@ -82,6 +83,9 @@ export default function NavbarWithLogin({ session }: INavbarWithLogin) {
                     <DropdownMenuItem>{link.title}</DropdownMenuItem>
                   </Link>
                 ))}
+                <DropdownMenuItem className="text-slate-500">
+                  <Link href="/profile">Profile</Link>
+                </DropdownMenuItem>
                 <DropdownMenuItem className="text-slate-500">
                   <Link href="/connect">Connects</Link>
                 </DropdownMenuItem>

components/layout/profile.tsx

@@ -0,0 +1,23 @@
+import { User } from "@prisma/client";
+import NextImage from "next/image";
+
+type ProfileType = {
+  user: User;
+};
+
+export const Profile = ({ user }: ProfileType) => {
+  return (
+    <div className="flex flex-col justify-center  items-center py-3">
+      {user.image && (
+        <NextImage
+          className="rounded-full border-gray-300 border"
+          alt={user.name || ""}
+          src={user.image}
+          width={200}
+          height={200}
+        />
+      )}
+      <p className="text-3xl py-4">{user.name}</p>
+    </div>
+  );
+};

components/ui/image.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import NextImage, { ImageProps } from "next/image";
 import { cn } from "@/utils";

components/widget/builder.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { Responsive, WidthProvider } from "react-grid-layout";
+import "react-grid-layout/css/styles.css";
+import "react-resizable/css/styles.css";
+import { useMemo } from "react";
+import { FaPlus } from "react-icons/fa";
+
+const ResponsiveGridLayout = WidthProvider(Responsive);
+
+type RocksGridBuilderProps = {
+  rocks: Array<JSX.Element>;
+};
+
+export function RocksGridBuilder({ rocks }: RocksGridBuilderProps) {
+  // const layout: Array<Layout> = [];
+
+  function onBreakpointChange(newBreakpoint: string, newCols: number) {
+    console.log({ newBreakpoint, newCols });
+  }
+
+  const addPlaceholder = useMemo(
+    () => (
+      <div
+        key={"grid_0"}
+        data-grid={{
+          x: 0,
+          y: 0,
+          w: 1,
+          h: 1,
+          isResizable: false,
+        }}
+      >
+        <div className="flex flex-col justify-center items-center text-center border-gray-300 border">
+          <FaPlus className="text-2xl" color="#555555" fontWeight="300" />
+          <p>Add a widget</p>
+        </div>
+      </div>
+    ),
+    []
+  );
+
+  return (
+    <ResponsiveGridLayout
+      className="layout"
+      breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
+      cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
+      onBreakpointChange={onBreakpointChange}
+      rowHeight={30}
+      autoSize={true}
+    >
+      {addPlaceholder}
+      {rocks.map((rock, index) => {
+        return (
+          <div
+            key={index}
+            data-grid={{
+              x: 0,
+              y: 0,
+              w: rock.props.width / 30 / 4,
+              h: rock.props.height / 30,
+              isResizable: false,
+            }}
+          >
+            {rock}
+          </div>
+        );
+      })}
+    </ResponsiveGridLayout>
+  );
+}

lib/@dsvgui/components/article/export.ts

@@ -0,0 +1,5 @@
+import { getGridComponents } from "../../utils";
+import { Base, Compact, WithoutImage } from "./index.stories";
+import { Article } from "./index";
+
+export default getGridComponents([Base, Compact, WithoutImage], Article);