Skip to content

Commit

Permalink
fixed up right sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
@od41
od41 committed Nov 15, 2023
1 parent 907e2a0 commit c499609
Show file tree
Hide file tree
Showing 5 changed files with 204 additions and 79 deletions.
38 changes: 2 additions & 36 deletions frontend/nextjs/src/app/dapp/components/right-sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,46 +29,12 @@ const primaryNavigationLinks = [
}
]

export function RightSidebar({ className }: SidebarProps) {
export function RightSidebar({ className, children }: 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>

{children}
</div>
</div>
</div>
Expand Down
15 changes: 6 additions & 9 deletions frontend/nextjs/src/app/dapp/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
ConnectButton
} from '@rainbow-me/rainbowkit';
import { Sidebar } from './components/sidebar';
import { RightSidebar } from './components/right-sidebar';
import { Search } from '@/components/ui/forms/search';
import { Button } from '@/components/ui/button';
import { HiOutlinePencilAlt } from "react-icons/hi"
Expand All @@ -18,8 +19,10 @@ export const metadata: Metadata = {

export default function DappLayout({
children,
rightSidebarContent
}: {
children: React.ReactNode
rightSidebarContent: React.ReactNode
}) {
return (
<>
Expand Down Expand Up @@ -52,16 +55,10 @@ export default function DappLayout({
<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>
<div className="col-span-3 lg:col-span-4 lg:border-x">
{children}
</div>
<Sidebar className="hidden lg:block min-h-[94vh]" />

</div>
</div>
</div>
Expand Down
189 changes: 159 additions & 30 deletions frontend/nextjs/src/app/dapp/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
"use client";
import React from "react";
import { Button } from "@/components/ui/button";
import { useContracts } from "@/lib/hooks/contracts";
import React from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import PostCard from "@/components/ui/post-card";
import { Separator } from "@/components/ui/separator";
import { ScrollArea } from "@/components/ui/scroll-area";
import { RightSidebar } from "./components/right-sidebar";
import Image from "next/image";
import {HiCheckBadge, HiOutlineFire} from "react-icons/hi2"
import { Badge } from "@/components/ui/badge";
import Link from "next/link";

const dummyPosts = [
{
Expand Down Expand Up @@ -81,16 +87,49 @@ const dummyPosts = [
},
]

const topCreatorList = [
{
name: "Naval",
avatar: "https://images.unsplash.com/photo-1607746882042-944635dfe10e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGF2YXRhcnxlbnwwfHwwfHx8MA%3D%3D",
mentor: "false",
skill: "UI Design",
href: "/profile/naval",
ment: 134
},
{
name: "Naval",
avatar: "https://images.unsplash.com/photo-1607746882042-944635dfe10e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGF2YXRhcnxlbnwwfHwwfHx8MA%3D%3D",
mentor: "true",
skill: "Java",
href: "/profile/naval",
ment: 693
},
{
name: "Naval",
avatar: "https://images.unsplash.com/photo-1607746882042-944635dfe10e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGF2YXRhcnxlbnwwfHwwfHx8MA%3D%3D",
mentor: "true",
skill: "Ruby",
href: "/profile/naval",
ment: 953
},
{
name: "Naval",
avatar: "https://images.unsplash.com/photo-1607746882042-944635dfe10e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGF2YXRhcnxlbnwwfHwwfHx8MA%3D%3D",
mentor: "true",
skill: "AI",
href: "/profile/naval",
ment: 422
},
]


export default function RootLayout() {
const { EMTMarketPlace, ExpertToken, MentorToken } = useContracts();
async function handleEMTMarketPlace() {
const val = await EMTMarketPlace.downVoteWeight();
alert(val);
const val = await EMTMarketPlace.downVoteWeight();
alert(val);
}

console.log('dummy', dummyPosts)

async function handleExpertToken() {
const val = await ExpertToken.MINTER_ROLE();
alert(val);
Expand All @@ -110,33 +149,123 @@ export default function RootLayout() {
// );

return (
<div className="flex flex-col">
<Tabs defaultValue="following" className="w-full">
<TabsList>
<TabsTrigger value="following">Following</TabsTrigger>
<TabsTrigger value="design">Design</TabsTrigger>
</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%]" />
</>
})}
<div className="grid grid-cols-6 col-span-4">
<div className="h-full px-4 py-6 lg:px-6 col-span-3 lg:col-span-4 lg:border-x">
<ScrollArea className="h-[90vh] w-full">
<div className="flex flex-col">
<Tabs defaultValue="following" className="w-full">
<TabsList>
<TabsTrigger value="following">Following</TabsTrigger>
<TabsTrigger value="design">Design</TabsTrigger>
</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%]" />
</>
})}
</div>
</TabsContent>
<TabsContent value="design">
<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>
</TabsContent>
<TabsContent value="design">
<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%]" />
</>
})}
</ScrollArea>
</div>
<RightSidebar className="hidden lg:block min-h-[94vh] col-span-1 lg:col-span-2" >
<>

<div className="mb-8">
<h2 className="mb-1 text-md pl-3 font-semibold tracking-tight">
Top Creators
</h2>
<div className="flex flex-col gap-y-0">
{topCreatorList.map((profile, key) => {
return <Link href={profile.href} key={`top-creator-${key}`} className="px-3 py-2 rounded-md flex w-full items-center justify-between hover:bg-accent-shade">
<div className='flex items-center'>
<div className="w-10 h-10 relative">
<Image
fill
className='rounded-full object-cover'
loading="eager"
src={profile.avatar}
alt={`${profile.name}-avatar`}
quality={80}
/>
</div>
<div className='ml-3'>
<div className="flex items-center">
<p className='text-md text-foreground'>{profile.name}</p>
{profile.mentor === "true" && <HiCheckBadge className="w-4 h-4 ml-1 text-accent-3" />}
</div>
<Badge>{profile.skill}</Badge>
</div>
</div>
<div className="flex items-center text-xs text-muted">
<HiOutlineFire className="w-4 h-4 ml-1 text-muted" />
<div className="ml-1">
245 MENT
</div>
</div>
</Link>
})}


</div>
</div>
</TabsContent>
</Tabs>

<div className="">
<h2 className="mb-1 text-md pl-3 font-semibold tracking-tight">
Who to Follow
</h2>
<div className="flex flex-col gap-y-0">
{topCreatorList.map((profile, key) => {
return <Link href={profile.href} key={`top-creator-${key}`} className="px-3 py-2 rounded-md flex w-full items-center justify-between hover:bg-accent-shade">
<div className='flex items-center'>
<div className="w-10 h-10 relative">
<Image
fill
className='rounded-full object-cover'
loading="eager"
src={profile.avatar}
alt={`${profile.name}-avatar`}
quality={80}
/>
</div>
<div className='ml-3'>
<div className="flex items-center">
<p className='text-md text-foreground'>{profile.name}</p>
{profile.mentor === "true" && <HiCheckBadge className="w-4 h-4 ml-1 text-accent-3" />}
</div>
<Badge>{profile.skill}</Badge>
</div>
</div>
<div className="flex items-center text-xs text-muted">
<HiOutlineFire className="w-4 h-4 ml-1 text-muted" />
<div className="ml-1">
245 MENT
</div>
</div>
</Link>
})}


</div>
</div>
</>
</RightSidebar>
</div>


);
}
36 changes: 36 additions & 0 deletions frontend/nextjs/src/components/ui/badge.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const badgeVariants = cva(
"inline-flex items-center rounded-full border px-1.5 py-0.1 text-[11px] font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
{
variants: {
variant: {
default:
"border-transparent bg-accent-2 text-foreground hover:bg-primary/80",
secondary:
"border-transparent bg-accent-shade text-secondary-foreground hover:bg-secondary/80",
destructive:
"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
outline: "text-foreground",
},
},
defaultVariants: {
variant: "default",
},
}
)

export interface BadgeProps
extends React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
return (
<div className={cn(badgeVariants({ variant }), className)} {...props} />
)
}

export { Badge, badgeVariants }
5 changes: 1 addition & 4 deletions frontend/nextjs/src/components/ui/post-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,8 @@ const PostCard = ({data}: any) => {
<CardHeader className='px-0 pt-0'>
<div className='flex items-center'>
<div className="w-10 h-10 relative">
<Image
// width={24}
// height={24}
<Image
fill
// placeholder="blur"
className='rounded-full object-cover'
loading="eager"
src={author.avatar}
Expand Down

0 comments on commit c499609

Please sign in to comment.