Adjusting some hard coded content and layout

Nounspace · May 5, 2024 · 0a12c34 · 0a12c34
1 parent c7a0c55
commit 0a12c34
Show file tree

Hide file tree

Showing 7 changed files with 194 additions and 72 deletions.
diff --git a/src/common/ui/templates/space/index.tsx b/src/common/ui/templates/space/index.tsx
@@ -2,7 +2,7 @@ import DefaultGrid from "@/fidgets/layout/grids/defaultGrid";
 import Gallery from "@/fidgets/ui/gallery";
 import Feed from "@/pages/feed";
 import GridLayout from "react-grid-layout";
-import React, { useState } from 'react';
+import React, { ReactElement, useState } from 'react';
 import _ from "lodash";
 import RGL, { WidthProvider } from "react-grid-layout";
 
@@ -17,11 +17,12 @@ type SpaceArgs = {
     }
   };
   isEditable: boolean;
+  children: ReactElement;
 } 
 
 const ReactGridLayout = WidthProvider(RGL);
 
-export default function Space({ config, isEditable }: SpaceArgs){
+export default function Space({ config, isEditable, children }: SpaceArgs){
 
   function generateDOM() {    
     return _.map(_.range(config.layoutConfig.items), function(i) {
@@ -40,6 +41,9 @@ export default function Space({ config, isEditable }: SpaceArgs){
   return (
     <div className="m-4">
       <ReactGridLayout onLayoutChange={onLayoutChange} {...config.layoutConfig}>
+        <div key={0} data-grid={config.fidgetConfigs[0]} className="overflow-hidden rounded-md flex justify-center items-center">
+          {children}
+        </div>
         {generateDOM()}
       </ReactGridLayout>
     </div>

diff --git a/src/fidgets/ui/frameFidget.tsx b/src/fidgets/ui/frameFidget.tsx
@@ -3,11 +3,11 @@ import { FaGear } from "react-icons/fa6";
 import Modal from "@/common/ui/components/Modal";
 import Frame from '@/common/ui/molecules/Frame';
 
-export default function FrameFidget() {
+export default function FrameFidget({url}) {
     const images = ["image1","image2","image3"]
 
     const [editMode, setMode] = useState(false);
-    const [frameURL, setFrameURL] = useState("https://far.cards/api/trade/user/4865");
+    const [frameURL, setFrameURL] = useState(url);
 
     function switchMode() {
       setMode(!editMode);
@@ -24,9 +24,11 @@ export default function FrameFidget() {
       <>
         <div className ="rounded-md flex-1 items-center justify-center overflow-hidden relative bg-contain">
           <Frame url = { frameURL }/>
-            <button onClick={switchMode} className = "size-1/12 opacity-50 hover:opacity-100 duration-500 z-10 flex justify-center items-center text-white font-semibold text-2xl">
-                <FaGear />
+          <div className = "mb-24 flex items-center justify-center opacity-0 hover:opacity-100 duration-500 absolute inset-0 z-10 flex bg-opacity-20 bg-[radial-gradient(169.40%_89.55%_at_94.76%_6.29%,rgba(0,0,0,0.40)_0%,rgba(255,255,255,0.00)_100%)]">
+            <button onClick={switchMode} className = "absolute flex-1 size-1/12 opacity-50 hover:opacity-100 duration-500 z-10 flex justify-center items-center text-white font-semibold text-2xl">
+              <FaGear />
             </button>
+          </div>
         </div>
         <Modal
           open={editMode}

diff --git a/src/fidgets/ui/gallery.tsx b/src/fidgets/ui/gallery.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { RiPencilFill } from "react-icons/ri";
 import { FaGear } from "react-icons/fa6";
 import Modal from "@/common/ui/components/Modal";
 
@@ -7,7 +8,7 @@ export default function Gallery() {
   const images = ["image1","image2","image3"]
 
   const [editMode, setMode] = useState(false);
-  const [imageURL, setImageURL] = useState("https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1024&h=1280&q=80");
+  const [imageURL, setImageURL] = useState("https://storage.googleapis.com/papyrus_images/d467b07030969fab95a8f44b1de596ab.png");
 
   function switchMode() {
     setMode(!editMode);
@@ -22,13 +23,11 @@ export default function Gallery() {
 
   return (
     <>
-      <div className ="rounded-md flex-1 items-center justify-center overflow-hidden relative size-11/12 bg-contain">
-        <img
-          src={`${imageURL}?${new Date().getTime()}`}
-          className = "flex-1 inset-0 bg-center bg-cover z-0 rounded-md"
-        />
-        <div className = "opacity-0 hover:opacity-100 duration-500 absolute inset-0 z-10 flex bg-slate-400 bg-opacity-0 justify-center items-center">
-          <button onClick={switchMode} className = "size-1/12 opacity-50 hover:opacity-100 duration-500 z-10 flex justify-center items-center text-white font-semibold text-2xl">
+      <div className ="bg-[image:var(--image-url)] rounded-md flex-1 items-center justify-center overflow-hidden relative bg-cover size-full"
+            style={{'--image-url': `url(${imageURL})`}}
+      >
+        <div className = "flex items-center justify-center opacity-0 hover:opacity-100 duration-500 absolute inset-0 z-10 flex bg-slate-400 bg-opacity-50">
+          <button onClick={switchMode} className = "absolute flex-1 size-1/12 opacity-50 hover:opacity-100 duration-500 z-10 flex justify-center items-center text-white font-semibold text-2xl">
             <FaGear />
           </button>
         </div>

diff --git a/src/pages/feed/index.tsx b/src/pages/feed/index.tsx
@@ -345,7 +345,7 @@ export default function Feed() {
     );
 
   const renderContent = () => (
-    <div className="p-4 border-2 row-span-8 col-span-6 max-h-full overflow-scroll rounded-md bg-white ">
+    <div className="border-2 max-h-full overflow-scroll rounded-md bg-white pr-4 pl-4">
       <div className="min-w-full">
         {isLoadingFeed && isEmpty(feed) && (
           <div className="ml-4">

diff --git a/src/pages/homebase/index.tsx b/src/pages/homebase/index.tsx
@@ -26,36 +26,36 @@ export default function Homebase(spaceID) {
             minH: 6,
             maxH: 12
         },
-        {   f: <Gallery/>,
+        {   f: <FrameFidget url = {"https://altumbase.com/degen/4888/dIVWKaIQZR"}/>,
             resizeHandles: availableHandles,
             x: 6,
             y: 0,
-            w: 2,
-            minW: 1,
-            h: 4,
-            minH: 1
-        },
-        {   f: <FrameFidget/>,
-            resizeHandles: availableHandles,
-            x: 8,
-            y: 0,
-            w: 2,
+            w: 3,
             minW: 2,
             maxW: 4,
-            h: 4,
+            h: 6,
             minH: 3,
             maxH: 12
         },
-        {   f: <FrameFidget/>,
+        {   f: <FrameFidget url = {"https://framedl.vercel.app?id=6390550a-d652-4bed-b258-d35ef6c9ff0dFramedl"}/>,
             resizeHandles: availableHandles,
-            x: 12,
+            x: 9,
             y: 0,
-            w: 2,
+            w: 3,
             minW: 2,
             maxW: 4,
             h: 4,
             minH: 3,
             maxH: 12
+        },
+        {   f: <Gallery/>,
+            resizeHandles: availableHandles,
+            x: 6,
+            y: 6,
+            w: 2,
+            minW: 1,
+            h: 4,
+            minH: 1
         }
     ]);
 
@@ -86,7 +86,7 @@ export default function Homebase(spaceID) {
             <div className={editMode ? "edit-grid absolute inset-0 z-0" : "no-edit-grid  absolute inset-0 z-0"} />
             <button onClick={switchMode} 
                     className = {editMode ? "rounded-full bg-white size-12 absolute top-6 right-4 z-10 flex opacity-90 hover:opacity-100 duration-500" : "rounded-full bg-white size-12 absolute top-6 right-4 z-10 flex opacity-50 hover:opacity-100 duration-500"}>
-                <RiPencilFill className={editMode ? "text-slate-900 font-semibold text-3xl absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" : "text-gray-700 font-semibold text-3xl absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"}/>
+                <RiPencilFill className={editMode ? "text-slate-900 font-semibold text-2xl absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" : "x  text-gray-700 font-semibold text-2xl absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"}/>
             </button>
             <Space config={retrieveConfig(user, spaceID)} isEditable={editMode}></Space>
         </div>

diff --git a/src/pages/profile/[slug].tsx b/src/pages/profile/[slug].tsx
@@ -18,6 +18,10 @@ import FollowButton from "@/common/ui/components/FollowButton";
 import { useAccountStore } from "@/common/data/stores/useAccountStore";
 import { useDataStore } from "@/common/data/stores/useDataStore";
 import { APP_FID } from "@/constants/app";
+import Space from "@/common/ui/templates/space";
+import Gallery from "@/fidgets/ui/gallery";
+import FrameFidget from "@/fidgets/ui/frameFidget";
+import { RiPencilFill } from "react-icons/ri";
 
 export async function getStaticProps({ params: { slug } }) {
   const client = new NeynarAPIClient(process.env.NEXT_PUBLIC_NEYNAR_API_KEY!);
@@ -193,8 +197,8 @@ export default function Profile({ profile }) {
   );
 
   const renderFeed = () => (
-    <>
-      <Tabs value={feedType} className="p-5 w-full max-w-full">
+    <div className="border-2 max-h-full overflow-scroll rounded-md bg-white pr-4 pl-4">
+      <Tabs value={feedType} className="pt-2 pb-2 w-full max-w-full">
         <TabsList className="grid w-full grid-cols-2">
           {Object.keys(FeedTypeEnum).map((key) => {
             return (
@@ -227,44 +231,157 @@ export default function Profile({ profile }) {
         onSelect={() => null}
         isActive
       />
-    </>
+    </div>
   );
 
-  const renderProfile = () => (
-    <div>
+  function ProfileHeader(){
+    return(
       <Card className="max-w-2xl mx-auto bg-transparent border-none shadow-none">
-        <CardHeader className="flex space-y-0">
-          <div className="flex space-x-4 grid grid-cols-2 lg:grid-cols-3">
-            <div className="col-span-1 lg:col-span-2">
-              <Avatar className="h-14 w-14">
-                <AvatarImage alt="User avatar" src={profile.pfp.url} />
-                <AvatarFallback>{profile.username}</AvatarFallback>
-              </Avatar>
-              <div className="text-left">
-                <h2 className="text-xl font-bold text-foreground">
-                  {profile.displayName}
-                </h2>
-                <span className="text-sm text-foreground/80">
-                  @{profile.username}
-                </span>
+          <CardHeader className="flex space-y-0">
+            <div className="flex space-x-4 grid grid-cols-2 lg:grid-cols-3">
+              <div className="col-span-1 lg:col-span-2">
+                <Avatar className="h-14 w-14">
+                  <AvatarImage alt="User avatar" src={profile.pfp.url} />
+                  <AvatarFallback>{profile.username}</AvatarFallback>
+                </Avatar>
+                <div className="text-left">
+                  <h2 className="text-xl font-bold text-foreground">
+                    {profile.displayName}
+                  </h2>
+                  <span className="text-sm text-foreground/80">
+                    @{profile.username}
+                  </span>
+                </div>
               </div>
+              {userFid !== profile.fid && (
+                <FollowButton username={profile.username} />
+              )}
+            </div>
+            <div className="flex pt-4 text-sm text-foreground/80">
+              <span className="mr-4">
+                <strong>{profile.followingCount}</strong> Following
+              </span>
+              <span>
+                <strong>{profile.followerCount}</strong> Followers
+              </span>
             </div>
-            {userFid !== profile.fid && (
-              <FollowButton username={profile.username} />
-            )}
-          </div>
-          <div className="flex pt-4 text-sm text-foreground/80">
-            <span className="mr-4">
-              <strong>{profile.followingCount}</strong> Following
-            </span>
-            <span>
-              <strong>{profile.followerCount}</strong> Followers
-            </span>
-          </div>
-          <span className="text-foreground">{profile.profile.bio.text}</span>
-        </CardHeader>
-      </Card>
-      {renderFeed()}
+            <span className="text-foreground">{profile.profile.bio.text}</span>
+          </CardHeader>
+        </Card>
+      )
+  }
+
+  ////
+
+    const [editMode, setMode] = useState(false);
+
+    //const { getCurrentUser } = useAccountStore();
+    const user = useAccountStore.getState().accounts[0];
+
+    const availableHandles = ["s", "w", "e", "n", "sw", "nw", "se", "ne"];
+
+    const [fidgetConfigs, setFidgetConfigs] = useState([
+        {   f: <></>,
+            resizeHandles: availableHandles,
+            x: 0,
+            y: 3,
+            w: 6,
+            minW: 4,
+            maxW: 8,
+            h: 7,
+            minH: 6,
+            maxH: 12
+        },
+        {
+          f: <ProfileHeader />,
+          resizeHandles: availableHandles,
+            x: 0,
+            y: 0,
+            w: 6,
+            minW: 4,
+            maxW: 8,
+            h: 3,
+            minH: 2,
+            maxH: 6
+        }, 
+        {   f: <FrameFidget url = {"https://paragraph.xyz/@nounspace/the-third-space?referrer=0x51603C7059f369aB04B16AddFB7BB6c4e34b8523"}/>,
+            resizeHandles: availableHandles,
+            x: 10,
+            y: 0,
+            w: 3,
+            minW: 1,
+            h: 6,
+            minH: 1
+        },
+        {   f: <FrameFidget url = {"https://far.cards/api/trade/user/4888"}/>,
+            resizeHandles: availableHandles,
+            x: 6,
+            y: 0,
+            w: 3,
+            minW: 2,
+            maxW: 4,
+            h: 6,
+            minH: 3,
+            maxH: 12
+        },
+        {   f: <FrameFidget url = {"https://altumbase.com/degen/4888/dIVWKaIQZR"}/>,
+            resizeHandles: availableHandles,
+            x: 6,
+            y: 6,
+            w: 3,
+            minW: 2,
+            maxW: 4,
+            h: 4,
+            minH: 3,
+            maxH: 12
+        },
+        {   f: <FrameFidget url = {"https://yoink.alfafrens.com/inviteCode/rollingInvites"}/>,
+            resizeHandles: availableHandles,
+            x: 10,
+            y: 6,
+            w: 3,
+            minW: 2,
+            maxW: 4,
+            h: 3,
+            minH: 3,
+            maxH: 12
+        }
+    ]);
+
+    function switchMode() {
+        setMode(!editMode);
+    }  
+
+    function retrieveConfig(user, space){
+        const layoutConfig = {
+            isDraggable: editMode,
+            isResizable: editMode,
+            items: 6  ,
+            cols: 12,
+            rowHeight: 70,
+            onLayoutChange: function(){},
+            // This turns off compaction so you can place items wherever.
+            compactType: null,
+            // This turns off rearrangement so items will not be pushed arround.
+            preventCollision: true
+        };
+        const layoutID = "";
+
+        return ({fidgetConfigs, layoutConfig, layoutID})
+    }
+
+  ////
+
+  const renderProfile = () => (
+    <div>
+      <div className={editMode ? "edit-grid absolute inset-0 z-0" : "no-edit-grid  absolute inset-0 z-0"} />
+      <button onClick={switchMode} 
+              className = {editMode ? "rounded-full bg-white size-12 absolute top-6 right-4 z-10 flex opacity-90 hover:opacity-100 duration-500" : "rounded-full bg-white size-12 absolute top-6 right-4 z-10 flex opacity-50 hover:opacity-100 duration-500"}>
+          <RiPencilFill className={editMode ? "text-slate-900 font-semibold text-2xl absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" : "x  text-gray-700 font-semibold text-2xl absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"}/>
+      </button>
+      <Space config={retrieveConfig(user, 0)} isEditable={editMode}>
+        {renderFeed()}
+      </Space>
     </div>
   );