UI improvmements

luloxi · Oct 13, 2024 · 09c1cfc · 09c1cfc
1 parent 868543e
commit 09c1cfc
Show file tree

Hide file tree

Showing 12 changed files with 3,508 additions and 17,341 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/nextjs/app/explore/Explore.tsx b/packages/nextjs/app/explore/Explore.tsx
@@ -20,8 +20,13 @@ export const Explore = () => {
   const [posts, setPosts] = useState<Post[]>([]);
   const [loading, setLoading] = useState(true);
   const [loadingMore, setLoadingMore] = useState(false);
-
   const [page, setPage] = useState(0);
+  const [activeTab, setActiveTab] = useState("Global");
+
+  const handleTabClick = (tab: any) => {
+    setActiveTab(tab);
+  };
+
   const observer = useRef<IntersectionObserver | null>(null);
 
   const {
@@ -108,7 +113,24 @@ export const Explore = () => {
   }
 
   return (
-    <div>
+    <div className="flex flex-col items-center justify-center">
+      <div className="tabs-bar ">
+        <button className={`tab ${activeTab === "Global" ? "active" : ""}`} onClick={() => handleTabClick("Global")}>
+          Global
+        </button>
+        <button
+          className={`tab text-red-600 ${activeTab === "Following" ? "active" : ""}`}
+          onClick={() => handleTabClick("Following")}
+        >
+          Following
+        </button>
+        <button
+          className={`tab text-red-600 ${activeTab === "Groups" ? "active" : ""}`}
+          onClick={() => handleTabClick("Groups")}
+        >
+          Groups
+        </button>
+      </div>
       <NewsFeed posts={posts} isGrid={false} />
       <div ref={lastPostElementRef}></div>
       {loadingMore && <LoadingBars />}

diff --git a/packages/nextjs/app/profile/[address]/page.tsx b/packages/nextjs/app/profile/[address]/page.tsx
@@ -35,6 +35,12 @@ const ProfilePage: NextPage = () => {
   const [loadingMore, setLoadingMore] = useState(true);
   const [page, setPage] = useState(1); // Start from page 1 to get the last post first
   const [loadingProfile, setLoadingProfile] = useState(true);
+  const [activeTab, setActiveTab] = useState("Minted");
+
+  const handleTabClick = (tab: any) => {
+    setActiveTab(tab);
+  };
+
   const observer = useRef<IntersectionObserver | null>(null);
 
   const { address: connectedAddress } = useAccount();
@@ -212,9 +218,12 @@ const ProfilePage: NextPage = () => {
 
                   <div className="mt-2">
                     {address == connectedAddress ? (
-                      <>
-                        <RainbowKitCustomConnectButton />
-                      </>
+                      <div className="flex flex-col md:flex-row items-center justify-center gap-3">
+                        <div>
+                          <RainbowKitCustomConnectButton />
+                        </div>
+                        <button className="btn btn-primary bg-red-600 hover:bg-red-700 border-0">+ Add funds</button>
+                      </div>
                     ) : (
                       <div className="text-base-content">
                         <Address address={address} />
@@ -266,7 +275,30 @@ const ProfilePage: NextPage = () => {
       </div>
       {/* {loading && <LoadingBars />} */}
 
-      <div>
+      <div className="flex flex-col items-center justify-center">
+        <div className="tabs-bar ">
+          <button
+            className={`tab text-red-600 ${activeTab === "Featured" ? "active" : ""}`}
+            onClick={() => handleTabClick("Featured")}
+          >
+            Featured
+          </button>
+          <button className={`tab ${activeTab === "Minted" ? "active" : ""}`} onClick={() => handleTabClick("Minted")}>
+            Minted
+          </button>
+          <button
+            className={`tab text-red-600 ${activeTab === "Shared" ? "active" : ""}`}
+            onClick={() => handleTabClick("Shared")}
+          >
+            Shared
+          </button>
+          <button
+            className={`tab text-red-600 ${activeTab === "Revenue" ? "active" : ""}`}
+            onClick={() => handleTabClick("Revenue")}
+          >
+            Revenue
+          </button>
+        </div>
         <NewsFeed posts={posts} />
         <div ref={lastPostElementRef}></div>
         {loadingMore && <LoadingBars />}

diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx
@@ -5,7 +5,7 @@ import Create from "../app/create/Create";
 import Modal from "../app/create/Modal";
 import { useAccount } from "wagmi";
 import { HeartIcon } from "@heroicons/react/24/outline";
-import { BellIcon, HomeIcon, MagnifyingGlassIcon, PlusIcon } from "@heroicons/react/24/solid";
+import { BellIcon, EnvelopeIcon, HomeIcon, MagnifyingGlassIcon, PlusIcon } from "@heroicons/react/24/solid";
 import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
 
 export const Footer = () => {
@@ -105,13 +105,11 @@ export const Footer = () => {
         </div>
       </div>
       <footer className="sticky lg:hidden bottom-0 w-full bg-base-100 px-4 py-2 flex justify-around items-center">
-        <Link href="/" passHref>
-          <HomeIcon className={`h-6 w-6 ${pathname === "/" ? "text-blue-600" : "hover:text-blue-600"}`} />
-        </Link>
-
-        <Link href="/search" passHref>
-          <MagnifyingGlassIcon
-            className={`h-6 w-6 ${pathname === "/search" ? "text-blue-600" : "hover:text-blue-600"}`}
+        <Link href="/not-found" passHref>
+          <EnvelopeIcon
+            className={`h-6 w-6 text-red-600 ${
+              pathname === "/notifications" ? "text-blue-600" : "hover:text-blue-600"
+            }`}
           />
         </Link>
 
@@ -123,6 +121,14 @@ export const Footer = () => {
           />
         </Link>
 
+        <Link href="/" passHref>
+          <HomeIcon className={`h-6 w-6 ${pathname === "/" ? "text-blue-600" : "hover:text-blue-600"}`} />
+        </Link>
+        <Link href="/search" passHref>
+          <MagnifyingGlassIcon
+            className={`h-6 w-6 ${pathname === "/search" ? "text-blue-600" : "hover:text-blue-600"}`}
+          />
+        </Link>
         <div className="flex flex-row items-center justify-center gap-3">
           <Link href={`/profile/${connectedAddress}`} passHref>
             <div

diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -8,7 +8,7 @@ import { PunkBalance } from "./punk-society/PunkBalance";
 import { PunkConnectButton } from "./punk-society/PunkConnectButton";
 import { FaucetButton } from "./scaffold-eth";
 import { useAccount } from "wagmi";
-import { BellIcon, HomeIcon, MagnifyingGlassIcon } from "@heroicons/react/24/solid";
+import { BellIcon, EnvelopeIcon, HomeIcon, MagnifyingGlassIcon } from "@heroicons/react/24/solid";
 import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
 
 /**
@@ -31,8 +31,8 @@ export const Header = () => {
   const pathname = usePathname();
 
   return (
-    <div className="flex lg:sticky top-0 navbar bg-base-100 min-h-0 flex-shrink-0 justify-between z-20 px-0 sm:px-2">
-      <div className="navbar-start ml-4 lg:ml-0">
+    <div className="flex lg:sticky  top-0 navbar bg-base-100 min-h-0 flex-shrink-0 justify-between z-20 px-0 sm:px-2">
+      <div className="navbar-start ml-4 lg:ml-2">
         <div className="flex lg:hidden">
           <SwitchTheme />
           <div className="flex justify-center items-center ml-8 lg:ml-0">
@@ -82,6 +82,18 @@ export const Header = () => {
               </div>
             </button>
           </Link>
+
+          <Link href="/not-found" passHref>
+            <button
+              className={`bg-transparent text-red-600 hover:bg-base-200 border-none hidden lg:flex flex-row items-center justify-center text-xl ${
+                pathname === "/messages" ? "text-blue-600" : ""
+              }`}
+            >
+              <div className="flex flex-row items-center justify-center gap-2">
+                <EnvelopeIcon className="h-6 w-6" />
+              </div>
+            </button>
+          </Link>
         </div>
       </div>
 
@@ -103,9 +115,9 @@ export const Header = () => {
         </div> */}
       </div>
 
-      <div className="navbar-end relative">
+      <div className="navbar-end relative lg:mr-2">
         <div className="flex justify-center items-center  ">
-          <div className="hidden lg:flex lg:mr-2">
+          <div className="hidden md:flex lg:mr-2">
             <PunkBalance address={connectedAddress} />
           </div>
 
@@ -131,7 +143,7 @@ export const Header = () => {
                 }}
               ></div>
             </Link>
-            <div className="lg:ml-2">
+            <div className="lg:ml-4">
               <SwitchTheme />
             </div>
           </div>

diff --git a/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx b/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx
@@ -13,6 +13,8 @@ import { ProgressBar } from "~~/components/scaffold-eth/ProgressBar";
 import { useInitializeNativeCurrencyPrice } from "~~/hooks/scaffold-eth";
 import { wagmiConfig } from "~~/services/web3/wagmiConfig";
 
+// Adjust the import path as needed
+
 const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
   useInitializeNativeCurrencyPrice();
 

diff --git a/packages/nextjs/components/punk-society/NewsFeed.tsx b/packages/nextjs/components/punk-society/NewsFeed.tsx
@@ -9,12 +9,12 @@ type NewsFeedProps = {
 
 export const NewsFeed: React.FC<NewsFeedProps> = ({ posts, isGrid = false }) => {
   return (
-    <div className="mt-4 lg:flex lg:justify-center lg:items-center">
+    <div className="mt-4 md:flex md:justify-center md:items-center">
       <div
         className={`${
           isGrid
             ? "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5 gap-3 lg:my-2"
-            : "flex flex-col gap-3 w-[100%] lg:w-[500px]"
+            : "flex flex-col gap-3 w-[100%] md:w-[500px]"
         }`}
       >
         {posts.map(post => (

diff --git a/packages/nextjs/components/punk-society/PostCard.tsx b/packages/nextjs/components/punk-society/PostCard.tsx
@@ -5,7 +5,14 @@ import Image from "next/image";
 import CommentSection from "./CommentSection";
 import LikeButton from "./LikedButton";
 import { ProfileAddress } from "./ProfileAddress";
-import { ChatBubbleLeftIcon, MagnifyingGlassPlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import {
+  ArrowUturnUpIcon,
+  ChatBubbleLeftIcon,
+  MagnifyingGlassPlusIcon,
+  ShareIcon,
+  ShoppingCartIcon,
+  XMarkIcon,
+} from "@heroicons/react/24/outline";
 import { ChatBubbleLeftIcon as ChatBubbleLeftSolidIcon } from "@heroicons/react/24/solid";
 import { NFTMetaData } from "~~/utils/simpleNFT/nftsMetadata";
 
@@ -47,7 +54,9 @@ export const PostCard = ({ post, isGrid }: { post: Post; isGrid: boolean }) => {
                 src={post.image || "/path/to/default/image.png"}
                 alt="NFT Image"
                 className="w-full h-full rounded-lg object-cover"
-                fill // Ensures the image fills the container
+                // fill // Ensures the image fills the container
+                width={800} // Adjust this to the desired fullscreen width
+                height={800} // Adjust this to maintain the aspect ratio of the image
               />
               <button
                 className="absolute bottom-2 right-2 bg-base-200 p-2 rounded-full shadow-lg"
@@ -64,16 +73,30 @@ export const PostCard = ({ post, isGrid }: { post: Post; isGrid: boolean }) => {
             <p className="my-0 text-lg">{post.description ?? "No description available."}</p>
           </div>
 
-          <div className="flex items-center justify-start gap-3">
+          <div className="flex items-center justify-between gap-3">
             {/* Your component JSX here */}
-            <LikeButton postId={BigInt(post.postId || 0)} />
-            <button onClick={toggleCommentSection} className="comment-icon-button">
-              {showCommentSection ? (
-                <ChatBubbleLeftSolidIcon className="comment-icon text-blue-600" />
-              ) : (
-                <ChatBubbleLeftIcon className="comment-icon" />
-              )}
-            </button>
+            <div className="flex items-center gap-3">
+              <LikeButton postId={BigInt(post.postId || 0)} />
+              <button onClick={toggleCommentSection} className="icon-button">
+                {showCommentSection ? (
+                  <ChatBubbleLeftSolidIcon className="comment-icon text-blue-600" />
+                ) : (
+                  <ChatBubbleLeftIcon className="comment-icon" />
+                )}
+              </button>
+              <button className="icon-button">
+                <ArrowUturnUpIcon className="repost-icon text-red-600" />
+              </button>
+              <button className="icon-button">
+                <ShareIcon className="repost-icon text-red-600" />
+              </button>
+            </div>
+            <div className="flex items-center gap-3">
+              <button className="px-4 py-2 rounded-lg bg-red-600 text-white">Mint</button>
+              <button className="p-2 rounded-full bg-red-600 text-white">
+                <ShoppingCartIcon className="h-5 w-5" />
+              </button>
+            </div>
           </div>
           {showCommentSection && <CommentSection postId={BigInt(post.postId || 0)} />}
         </div>