From c499609992206e04eb748dd1b3082ca0a81a1cb3 Mon Sep 17 00:00:00 2001 From: Odafe Aror Date: Wed, 15 Nov 2023 01:03:41 +0000 Subject: [PATCH] fixed up right sidebar --- .../src/app/dapp/components/right-sidebar.tsx | 38 +--- frontend/nextjs/src/app/dapp/layout.tsx | 15 +- frontend/nextjs/src/app/dapp/page.tsx | 189 +++++++++++++++--- frontend/nextjs/src/components/ui/badge.tsx | 36 ++++ .../nextjs/src/components/ui/post-card.tsx | 5 +- 5 files changed, 204 insertions(+), 79 deletions(-) create mode 100644 frontend/nextjs/src/components/ui/badge.tsx diff --git a/frontend/nextjs/src/app/dapp/components/right-sidebar.tsx b/frontend/nextjs/src/app/dapp/components/right-sidebar.tsx index 08f8a11..15b757d 100644 --- a/frontend/nextjs/src/app/dapp/components/right-sidebar.tsx +++ b/frontend/nextjs/src/app/dapp/components/right-sidebar.tsx @@ -29,46 +29,12 @@ const primaryNavigationLinks = [ } ] -export function RightSidebar({ className }: SidebarProps) { +export function RightSidebar({ className, children }: SidebarProps) { return (
-
- {primaryNavigationLinks.map((link, key)=> ( - - ))} -
- -
-
-
-

- Resources -

-
- - - - -
-
- + {children}
diff --git a/frontend/nextjs/src/app/dapp/layout.tsx b/frontend/nextjs/src/app/dapp/layout.tsx index 127d929..5bc1042 100644 --- a/frontend/nextjs/src/app/dapp/layout.tsx +++ b/frontend/nextjs/src/app/dapp/layout.tsx @@ -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" @@ -18,8 +19,10 @@ export const metadata: Metadata = { export default function DappLayout({ children, + rightSidebarContent }: { children: React.ReactNode + rightSidebarContent: React.ReactNode }) { return ( <> @@ -52,16 +55,10 @@ export default function DappLayout({
-
- -
- - {children} - - -
+
+ {children}
- +
diff --git a/frontend/nextjs/src/app/dapp/page.tsx b/frontend/nextjs/src/app/dapp/page.tsx index 5f9403e..5baada8 100644 --- a/frontend/nextjs/src/app/dapp/page.tsx +++ b/frontend/nextjs/src/app/dapp/page.tsx @@ -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 = [ { @@ -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); @@ -110,33 +149,123 @@ export default function RootLayout() { // ); return ( -
- - - Following - Design - - -
- {dummyPosts.map((post, key) => { - return <> - - - - })} +
+
+ +
+ + + Following + Design + + +
+ {dummyPosts.map((post, key) => { + return <> + + + + })} +
+ + +
+ {dummyPosts.map((post, key) => { + return <> + + + + })} +
+ +
- - -
- {dummyPosts.map((post, key) => { - return <> - - - - })} + +
+ + <> + +
+

+ Top Creators +

+
+ {topCreatorList.map((profile, key) => { + return +
+
+ {`${profile.name}-avatar`} +
+
+
+

{profile.name}

+ {profile.mentor === "true" && } +
+ {profile.skill} +
+
+
+ +
+ 245 MENT +
+
+ + })} + + +
- - + +
+

+ Who to Follow +

+
+ {topCreatorList.map((profile, key) => { + return +
+
+ {`${profile.name}-avatar`} +
+
+
+

{profile.name}

+ {profile.mentor === "true" && } +
+ {profile.skill} +
+
+
+ +
+ 245 MENT +
+
+ + })} + + +
+
+ +
+ + ); } diff --git a/frontend/nextjs/src/components/ui/badge.tsx b/frontend/nextjs/src/components/ui/badge.tsx new file mode 100644 index 0000000..46f9936 --- /dev/null +++ b/frontend/nextjs/src/components/ui/badge.tsx @@ -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, + VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( +
+ ) +} + +export { Badge, badgeVariants } diff --git a/frontend/nextjs/src/components/ui/post-card.tsx b/frontend/nextjs/src/components/ui/post-card.tsx index 8f2efba..c8da2ad 100644 --- a/frontend/nextjs/src/components/ui/post-card.tsx +++ b/frontend/nextjs/src/components/ui/post-card.tsx @@ -22,11 +22,8 @@ const PostCard = ({data}: any) => {
-