init page profile stuff

app/p/[didOrHandle]/ProfilePageLayout.tsx

···
+"use client";
+import { Actions } from "app/(home-pages)/home/Actions/Actions";
+import { DashboardLayout } from "components/PageLayouts/DashboardLayout";
+import { useState } from "react";
+import { ProfileTabs, TabContent } from "./ProfileTabs/Tabs";
+import { Json } from "supabase/database.types";
+import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
+
+export const ProfilePageLayout = (props: {
+  profile: {
+    did: string;
+    handle: string | null;
+    indexed_at: string;
+    record: Json;
+  } | null;
+}) => {
+  if (!props.profile) return null;
+
+  let profileRecord = props.profile.record as unknown as ProfileViewDetailed;
+
+  console.log(profileRecord);
+  return (
+    <DashboardLayout
+      id={props.profile.did}
+      cardBorderHidden={false}
+      defaultTab="home"
+      tabs={{
+        home: {
+          content: <ProfilePageContent profile={props.profile} />,
+          controls: null,
+        },
+      }}
+      actions={<Actions />}
+      currentPage="home"
+    />
+  );
+};
+
+export type profileTabsType =
+  | "activity"
+  | "posts"
+  | "comments"
+  | "subscriptions";
+const ProfilePageContent = (props: {
+  profile: {
+    did: string;
+    handle: string | null;
+    indexed_at: string;
+    record: Json;
+  } | null;
+}) => {
+  let [tab, setTab] = useState<profileTabsType>("activity");
+
+  let profileRecord = props.profile?.record as unknown as ProfileViewDetailed;
+  console.log(profileRecord);
+
+  return (
+    <div
+      className={`
+        max-w-prose mx-auto w-full h-full
+        flex flex-col
+        border border-border rounded-md
+        text-center px-3 sm:px-4 mt-8`}
+    >
+      <div className="bg-test rounded-full h-16 w-16 mx-auto -mt-8" />
+      <h3 className="pt-2">
+        {profileRecord.displayName
+          ? profileRecord.displayName
+          : `@${props.profile?.handle}`}
+      </h3>
+      {profileRecord.displayName && (
+        <div className="text-tertiary text-sm pb-1">
+          @{props.profile?.handle}
+        </div>
+      )}
+      <div className="text-secondary">{profileRecord.description}</div>
+      <div className="flex flex-row gap-2 mx-auto my-3">
+        <div>pub 1</div>
+        <div>pub 2</div>
+      </div>
+      <ProfileTabs tab={tab} setTab={setTab} />
+      <TabContent tab={tab} />
+    </div>
+  );
+};
+
+const PubListingCompact = () => {
+  return <div></div>;
+};

app/p/[didOrHandle]/ProfileTabs/Activity/Activity.tsx

···
+export const Activity = (props: {
+  icon: React.ReactNode;
+  activity: React.ReactNode;
+  content: React.ReactNode;
+}) => {
+  return (
+    <div className="flex flex-col">
+      <div className="flex gap-2 items-center text-tertiary font-bold">
+        {props.icon} {props.activity}
+      </div>
+      <div>{props.content}</div>
+    </div>
+  );
+};

app/p/[didOrHandle]/ProfileTabs/Activity/Comment.tsx

···
+import { CommentTiny } from "components/Icons/CommentTiny";
+import { Activity } from "./Activity";
+
+export const CommentActivty = () => {
+  return (
+    <Activity
+      icon={<CommentTiny />}
+      activity={"celine commented"}
+      content={<div>hello</div>}
+    />
+  );
+};

app/p/[didOrHandle]/ProfileTabs/Tabs.tsx

···
+import { profileTabsType } from "../ProfilePageLayout";
+
+export const ProfileTabs = (props: {
+  tab: profileTabsType;
+  setTab: (t: profileTabsType) => void;
+}) => {
+  let buttonStyle = "text-secondary";
+  return (
+    <div className="flex flex-col w-full">
+      <div className="flex gap-2 justify-between">
+        <div className="flex gap-2">
+          <button
+            className={buttonStyle}
+            onClick={() => {
+              props.setTab("activity");
+            }}
+          >
+            Activity
+          </button>
+          <button
+            className={buttonStyle}
+            onClick={() => {
+              props.setTab("posts");
+            }}
+          >
+            Posts
+          </button>
+          <button
+            className={buttonStyle}
+            onClick={() => {
+              props.setTab("comments");
+            }}
+          >
+            Comments
+          </button>
+        </div>
+        <button
+          className={buttonStyle}
+          onClick={() => {
+            props.setTab("subscriptions");
+          }}
+        >
+          Subscriptions
+        </button>
+      </div>
+      <hr className="border-border-light mb-2 mt-1" />
+    </div>
+  );
+};
+
+export const TabContent = (props: { tab: profileTabsType }) => {
+  switch (props.tab) {
+    case "activity":
+      return <div>activty stuff here!</div>;
+    case "posts":
+      return <div>posts here!</div>;
+    case "comments":
+      return <div>comments here!</div>;
+    case "subscriptions":
+      return <div>subscriptions here!</div>;
+  }
+};

app/p/[didOrHandle]/page.tsx

···
-import { supabaseServerClient } from "supabase/serverClient";
-import { AtUri } from "@atproto/syntax";
-import { ids } from "lexicons/api/lexicons";
-import { PubLeafletDocument } from "lexicons/api";
-import { Metadata } from "next";
 import { idResolver } from "app/(home-pages)/reader/idResolver";
-import { DocumentPageRenderer } from "app/lish/[did]/[publication]/[rkey]/DocumentPageRenderer";
 import { NotFoundLayout } from "components/PageLayouts/NotFoundLayout";
-
+import { ProfilePageLayout } from "./ProfilePageLayout";
+import { supabaseServerClient } from "supabase/serverClient";
 export default async function ProfilePage(props: {
   params: Promise<{ didOrHandle: string }>;
 }) {
···
 
   // Resolve handle to DID if necessary
   let did = didOrHandle;
+
   if (!didOrHandle.startsWith("did:")) {
     let resolved = await idResolver.handle.resolve(didOrHandle);
     if (!resolved) {
···
     }
     did = resolved;
   }
+  let { data: profile } = await supabaseServerClient
+    .from("bsky_profiles")
+    .select(`*`)
+    .eq("did", did)
+    .single();
 
-  return <DocumentPageRenderer did={did} rkey={params.rkey} />;
+  return <ProfilePageLayout profile={profile} />;
 }