Skip to content

Commit

Permalink
update homepage
Browse files Browse the repository at this point in the history
  • Loading branch information
@od41
od41 committed Nov 14, 2023
1 parent 9ffc9a6 commit 907e2a0
Show file tree
Hide file tree
Showing 4 changed files with 128 additions and 39 deletions.
76 changes: 76 additions & 0 deletions frontend/nextjs/src/app/dapp/components/right-sidebar.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
)
}
68 changes: 37 additions & 31 deletions frontend/nextjs/src/app/dapp/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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>
</>
)
Expand Down
21 changes: 14 additions & 7 deletions frontend/nextjs/src/app/dapp/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion frontend/nextjs/src/components/ui/post-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`}
/>
Expand Down

0 comments on commit 907e2a0

Please sign in to comment.