From 907e2a0293f506f64a0eb458399f9af3d837539e Mon Sep 17 00:00:00 2001
From: Odafe Aror <odafe41@gmail.com>
Date: Tue, 14 Nov 2023 14:46:59 +0000
Subject: [PATCH] update homepage

---
 .../src/app/dapp/components/right-sidebar.tsx | 76 +++++++++++++++++++
 frontend/nextjs/src/app/dapp/layout.tsx       | 68 +++++++++--------
 frontend/nextjs/src/app/dapp/page.tsx         | 21 +++--
 .../nextjs/src/components/ui/post-card.tsx    |  2 +-
 4 files changed, 128 insertions(+), 39 deletions(-)
 create mode 100644 frontend/nextjs/src/app/dapp/components/right-sidebar.tsx

diff --git a/frontend/nextjs/src/app/dapp/components/right-sidebar.tsx b/frontend/nextjs/src/app/dapp/components/right-sidebar.tsx
new file mode 100644
index 0000000..08f8a11
--- /dev/null
+++ b/frontend/nextjs/src/app/dapp/components/right-sidebar.tsx
@@ -0,0 +1,76 @@
+import Link from "next/link"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import {HiOutlineHome, HiOutlineUser, HiOutlineEnvelope} from 'react-icons/hi2'
+
+interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+    
+}
+
+const primaryNavigationLinks = [
+    {
+        title: "Home",
+        icon: HiOutlineHome,
+        isActive: false,
+        href: "/dapp"
+    },
+    {
+        title: "My Profile",
+        icon: HiOutlineUser,
+        isActive: false,
+        href: "/my-profile"
+    },
+    {
+        title: "Notifications",
+        icon: HiOutlineEnvelope,
+        isActive: false,
+        href: "/notifications"
+    }
+]
+
+export function RightSidebar({ className }: SidebarProps) {
+    return (
+        <div className={cn("pb-12", className)}>
+            <div className="space-y-4 py-4">
+                <div className="px-3 py-2">
+                    <div className="space-y-1">
+                        {primaryNavigationLinks.map((link, key)=> (
+                            <Button variant="ghost" key={`primary-nav-${key}`} className="w-full justify-start" asChild>
+                                <Link href={link.href}>
+                                    <link.icon className="mr-2 h-4 w-4 text-accent-2" />
+                                    {link.title}
+                                </Link>
+                            </Button>
+                        ))}
+                    </div>
+                    <Button variant="gradient" className="w-full mt-4">
+                        Create a Post
+                    </Button>
+                </div>
+                <div className="px-3 py-2">
+                    <div className="bg-accent-shade rounded-md py-4 px-2">
+                    <h2 className="mb-3 px-4 text-md font-semibold tracking-tight">
+                        Resources
+                    </h2>
+                    <div className="space-y-0">
+                        <Button variant="link" className="w-full text-sm font-normal py-0 h-9 text-muted justify-start" asChild>
+                            <Link href="/notifications"> Welcome </Link>
+                        </Button>
+                        <Button variant="link" className="w-full text-sm font-normal py-0 h-9 text-muted justify-start" asChild>
+                            <Link href="/faq"> FAQ </Link>
+                        </Button>
+                        <Button variant="link" className="w-full text-sm font-normal py-0 h-9 text-muted justify-start" asChild>
+                            <Link href="/help"> Help </Link>
+                        </Button>
+                        <Button variant="link" className="w-full text-sm font-normal py-0 h-9 text-muted justify-start" asChild>
+                            <Link href="/privacy-policy"> Privacy Policy </Link>
+                        </Button>
+                    </div>
+                    </div>
+                    
+                </div>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/frontend/nextjs/src/app/dapp/layout.tsx b/frontend/nextjs/src/app/dapp/layout.tsx
index dedb598..127d929 100644
--- a/frontend/nextjs/src/app/dapp/layout.tsx
+++ b/frontend/nextjs/src/app/dapp/layout.tsx
@@ -10,6 +10,7 @@ import { Search } from '@/components/ui/forms/search';
 import { Button } from '@/components/ui/button';
 import { HiOutlinePencilAlt } from "react-icons/hi"
 import DappProviders from './components/providers';
+import { ScrollArea } from "@/components/ui/scroll-area"
 
 export const metadata: Metadata = {
   title: 'MEMM! Homepage',
@@ -23,43 +24,48 @@ export default function DappLayout({
   return (
     <>
       <DappProviders>
-            <header>
-              <div className=" flex-col md:flex">
-                <div className="container flex flex-col items-start justify-between space-y-2 py-4 sm:flex-row sm:items-center sm:space-y-0 md:h-16">
-                  <h2 className="text-lg font-semibold text-accent-3">MEMM!</h2>
-                  <div className="ml-auto flex w-full space-x-2 sm:justify-end">
-                    <Search />
-                    <Button variant="ghost" aria-label='create a post' size="icon">
-                      <HiOutlinePencilAlt className="h-4 w-4" />
-                    </Button>
-                    <ConnectButton 
-                      label="Sign in"
-                      accountStatus={{
-                        smallScreen: "avatar",
-                        largeScreen: "address"
-                      }}
-                      chainStatus="none"
-                      showBalance={false}
-                    />
-                  </div>
-                </div>
+        <header>
+          <div className=" flex-col md:flex">
+            <div className="container flex flex-col items-start justify-between space-y-2 py-4 sm:flex-row sm:items-center sm:space-y-0 md:h-16">
+              <h2 className="text-lg font-semibold text-accent-3">MEMM!</h2>
+              <div className="ml-auto flex w-full space-x-2 sm:justify-end">
+                <Search />
+                <Button variant="ghost" aria-label='create a post' size="icon">
+                  <HiOutlinePencilAlt className="h-4 w-4" />
+                </Button>
+                <ConnectButton
+                  label="Sign in"
+                  accountStatus={{
+                    smallScreen: "avatar",
+                    largeScreen: "address"
+                  }}
+                  chainStatus="none"
+                  showBalance={false}
+                />
               </div>
-            </header>
+            </div>
+          </div>
+        </header>
+
+        <div className="body">
+          <div className="border-t">
+            <div className="bg-background">
+              <div className="grid lg:grid-cols-5">
+                <Sidebar className="hidden lg:block min-h-[94vh]" />
+                <div className="col-span-3 lg:col-span-3 lg:border-x">
+
+                  <div className="h-full px-4 py-6 lg:px-6">
+                    <ScrollArea className="h-[90vh] w-full">
+                      {children}
+                    </ScrollArea>
 
-            <div className="body">
-              <div className="border-t">
-                <div className="bg-background">
-                  <div className="grid lg:grid-cols-5">
-                    <Sidebar className="hidden lg:block min-h-[100vh - 64px]" />
-                    <div className="col-span-3 lg:col-span-4 lg:border-l">
-                      <div className="h-full px-4 py-6 lg:px-8">
-                        {children}
-                      </div>
-                    </div>
                   </div>
                 </div>
+                <Sidebar className="hidden lg:block min-h-[94vh]" />
               </div>
             </div>
+          </div>
+        </div>
       </DappProviders>
     </>
   )
diff --git a/frontend/nextjs/src/app/dapp/page.tsx b/frontend/nextjs/src/app/dapp/page.tsx
index 6407b66..5f9403e 100644
--- a/frontend/nextjs/src/app/dapp/page.tsx
+++ b/frontend/nextjs/src/app/dapp/page.tsx
@@ -118,16 +118,23 @@ export default function RootLayout() {
         </TabsList>
         <TabsContent value="following">
           <div className="flex flex-col gap-y-4 items-center">
-          {dummyPosts.map((post, key) => {
-            return <>
-              <PostCard key={`post-${key}`} data={post} />
-              <Separator className="bg-border w-[94%]"/>
-            </>
-          })}
+            {dummyPosts.map((post, key) => {
+              return <>
+                <PostCard key={`post-${key}`} data={post} />
+                <Separator className="bg-border w-[94%]" />
+              </>
+            })}
           </div>
         </TabsContent>
         <TabsContent value="design">
-        {/* <PostCard /> */}
+        <div className="flex flex-col gap-y-4 items-center">
+            {dummyPosts.map((post, key) => {
+              return <>
+                <PostCard key={`post-${key}`} data={post} />
+                <Separator className="bg-border w-[94%]" />
+              </>
+            })}
+          </div>
         </TabsContent>
       </Tabs>
     </div>
diff --git a/frontend/nextjs/src/components/ui/post-card.tsx b/frontend/nextjs/src/components/ui/post-card.tsx
index 4535bca..8f2efba 100644
--- a/frontend/nextjs/src/components/ui/post-card.tsx
+++ b/frontend/nextjs/src/components/ui/post-card.tsx
@@ -51,7 +51,7 @@ const PostCard = ({data}: any) => {
                     <Image 
                         fill
                         src={post.image}
-                        className='rounded-md'
+                        className='rounded-md object-cover'
                         loading="lazy"
                         alt={`${post.title} cover photo`}
                     />