diff --git a/apps/academy/.env.example b/apps/academy/.env.example index a050feda..113f1fbf 100644 --- a/apps/academy/.env.example +++ b/apps/academy/.env.example @@ -17,10 +17,10 @@ # You can generate a new secret on the command line with: # openssl rand -base64 32 # https://next-auth.js.org/configuration/options#secret -NEXTAUTH_SECRET="" +NEXTAUTH_SECRET="=" NEXTAUTH_URL="http://localhost:3000" POSTGRES_PRISMA_URL="" POSTGRES_URL_NON_POOLING="" -NEXT_PUBLIC_WALLET_CONNECT_ID= \ No newline at end of file +NEXT_PUBLIC_WALLET_CONNECT_ID="" \ No newline at end of file diff --git a/apps/academy/public/arrow-up-bold.png b/apps/academy/public/arrow-up-bold.png new file mode 100644 index 00000000..f3a2af7a Binary files /dev/null and b/apps/academy/public/arrow-up-bold.png differ diff --git a/apps/academy/public/azuki.png b/apps/academy/public/azuki.png new file mode 100644 index 00000000..7cee9f85 Binary files /dev/null and b/apps/academy/public/azuki.png differ diff --git a/apps/academy/public/back.png b/apps/academy/public/back.png new file mode 100644 index 00000000..a6126475 Binary files /dev/null and b/apps/academy/public/back.png differ diff --git a/apps/academy/public/ph_moon-light.png b/apps/academy/public/ph_moon-light.png new file mode 100644 index 00000000..ef185bd4 Binary files /dev/null and b/apps/academy/public/ph_moon-light.png differ diff --git a/apps/academy/src/components/AboutCourse.tsx b/apps/academy/src/components/AboutCourse.tsx new file mode 100644 index 00000000..169ef694 --- /dev/null +++ b/apps/academy/src/components/AboutCourse.tsx @@ -0,0 +1,13 @@ +export default function AboutCourse() { + return ( +
+

About This Course

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vehicula laoreet leo, + vehicula rhoncus lectus consectetur vel. Morbi sit amet fringilla erat, nec ultrices nulla. + Pellentesque habim volutpat, malesuada euismod turpis facilisis. Nunc non imperdiet eros. + Pellentesque lobortis justo a ligula efficitur congue. +

+
+ ); +} diff --git a/apps/academy/src/components/CreatedBy.tsx b/apps/academy/src/components/CreatedBy.tsx new file mode 100644 index 00000000..a2bc263a --- /dev/null +++ b/apps/academy/src/components/CreatedBy.tsx @@ -0,0 +1,39 @@ +import { Avatar, AvatarFallback, AvatarImage } from "ui/components/ui/avatar"; + +export default function CreatedBy() { + return ( +
+

Created by:

+
+ + + Avatar + +
+

Dave C

+

+ Dave C is a Full Stack Python
Developer at the Ethereum
Foundation +

+

Twitter @DaveC.eth

+
+
+
+
+
+ Web3 +
+
+
+
+ Eth +
+
+
+
+ Beginner +
+
+
+
+ ); +} diff --git a/apps/academy/src/components/Header.tsx b/apps/academy/src/components/Header.tsx index 36a23538..fd9a9c61 100644 --- a/apps/academy/src/components/Header.tsx +++ b/apps/academy/src/components/Header.tsx @@ -1,3 +1,6 @@ +import Image from "next/image"; +import Link from "next/link"; +import { useRouter } from "next/router"; import type { FunctionComponent } from "react"; import { type NavItem, SideBar, TopBar } from "ui"; @@ -11,7 +14,7 @@ const sampleMenus: NavItem[] = [ }, { name: "Tracks", - href: "/", + href: "/track/1", // hardcoded trackID for now. For the sake of using the dynamic route - 23 nov 2023 icon: "vector", }, { @@ -22,9 +25,41 @@ const sampleMenus: NavItem[] = [ ]; const PageHeader: FunctionComponent = () => { + const router = useRouter(); + const { pathname } = router; + return ( -
- +
+
+ {pathname === "/" ? ( +
+ +
+ ) : ( +
+
+

Back

+ + turn back + turn back + +
+
+ )} +
+
{ ]} />
-
- -
+
); }; diff --git a/apps/academy/src/components/Navbar.tsx b/apps/academy/src/components/Navbar.tsx new file mode 100644 index 00000000..3036ee2a --- /dev/null +++ b/apps/academy/src/components/Navbar.tsx @@ -0,0 +1,44 @@ +// Component not used anymore - code implemented on Header Component 23 nov 2023 + +import Image from "next/image"; +import Link from "next/link"; +import { Avatar, AvatarFallback, AvatarImage } from "ui/components/ui/avatar"; + +export default function Navbar() { + return ( + + ); +} diff --git a/apps/academy/src/components/Topic.tsx b/apps/academy/src/components/Topic.tsx new file mode 100644 index 00000000..662ac5ce --- /dev/null +++ b/apps/academy/src/components/Topic.tsx @@ -0,0 +1,91 @@ +import Image from "next/image"; +import { useState } from "react"; +import { Icons } from "ui"; +import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "ui/components/ui/collapsible"; + +export default function Topic() { + const [isOpen, setIsOpen] = useState(false); + + return ( +
+
+
+ Arrow +
+
+

Topic Heading

+

+ Understand the types of numbers you can work with, how to store x, and how to convert Y + to Z. +

+
+
+ + + {isOpen ? ( + Arrow + ) : ( + Arrow + )} +

6 steps

+ + + {/* This is where collapsible content starts */} + +
+
+ +

Sub-topic heading

+
+ + +
+
+ +

Sub-topic heading

+
+ + +
+
+ {/* Arrow */} +

Sub-topic heading

+
+ + +
+
+ {/* Arrow */} +

Sub-topic heading

+
+ + +
+
+ {/* Arrow */} +

Sub-topic heading

+
+ + +
+
+ {/* Arrow */} +

Sub-topic heading

+
+ + +
+ ); +} diff --git a/apps/academy/src/pages/track/[trackID].tsx b/apps/academy/src/pages/track/[trackID].tsx new file mode 100644 index 00000000..3909d30f --- /dev/null +++ b/apps/academy/src/pages/track/[trackID].tsx @@ -0,0 +1,26 @@ +import AboutCourse from "@/components/AboutCourse"; +import CreatedBy from "@/components/CreatedBy"; +import Topic from "@/components/Topic"; + +export default function TrackDetails() { + return ( +
+
+

+ WTRO TO
ETHEREUM +

+
+
+
+
+ +
+
+ +
+
+ + +
+ ); +} diff --git a/packages/ui/package.json b/packages/ui/package.json index 9087972a..04efe2f0 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -50,5 +50,9 @@ "tailwind-merge": "^1.14.0", "tailwindcss-config": "workspace:*", "typescript-config": "workspace:*" + }, + "dependencies": { + "@radix-ui/react-avatar": "^1.0.4", + "@radix-ui/react-collapsible": "^1.0.3" } } diff --git a/packages/ui/src/components/Footer/Footer.tsx b/packages/ui/src/components/Footer/Footer.tsx index 174f952b..2290d417 100644 --- a/packages/ui/src/components/Footer/Footer.tsx +++ b/packages/ui/src/components/Footer/Footer.tsx @@ -33,7 +33,12 @@ export const Footer = () => { {socials.map((social) => { const Icon = Icons[social.icon]; return ( - + {Icon ? : null} ); diff --git a/packages/ui/src/components/Icons.tsx b/packages/ui/src/components/Icons.tsx index ee348b7b..2e31491b 100644 --- a/packages/ui/src/components/Icons.tsx +++ b/packages/ui/src/components/Icons.tsx @@ -22,6 +22,7 @@ interface DDIcons { github_circle: (props: LucideProps) => JSX.Element; twitter_circle: (props: LucideProps) => JSX.Element; mirror_circle: (props: LucideProps) => JSX.Element; + track_tick: (props: LucideProps) => JSX.Element; } export const Icons: DDIcons = { @@ -308,4 +309,19 @@ export const Icons: DDIcons = { ), + track_tick: (props: LucideProps) => ( + + + + ), }; diff --git a/packages/ui/src/components/SideBar/SideBar.tsx b/packages/ui/src/components/SideBar/SideBar.tsx index e913843d..ac697097 100644 --- a/packages/ui/src/components/SideBar/SideBar.tsx +++ b/packages/ui/src/components/SideBar/SideBar.tsx @@ -2,7 +2,7 @@ import NextLink from "next/link"; import type { FC } from "react"; import { Icons } from "../Icons"; -import { Sheet, SheetContent, SheetTrigger } from "../ui/sheet"; +import { Sheet, SheetClose, SheetContent, SheetTrigger } from "../ui/sheet"; interface SubNavItem { name: string; @@ -30,9 +30,9 @@ const SideBar: FC = ({ menus }) => {
{menus.map((menu, key) => (
- - {menu.name} - + + {menu.name} +
))}
diff --git a/packages/ui/src/components/ui/avatar.tsx b/packages/ui/src/components/ui/avatar.tsx new file mode 100644 index 00000000..e7237881 --- /dev/null +++ b/packages/ui/src/components/ui/avatar.tsx @@ -0,0 +1,47 @@ +"use client"; + +import * as AvatarPrimitive from "@radix-ui/react-avatar"; +import * as React from "react"; + +import { cn } from "../../lib/utils"; + +const Avatar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +Avatar.displayName = AvatarPrimitive.Root.displayName; + +const AvatarImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AvatarImage.displayName = AvatarPrimitive.Image.displayName; + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName; + +export { Avatar, AvatarFallback,AvatarImage }; diff --git a/packages/ui/src/components/ui/collapsible.tsx b/packages/ui/src/components/ui/collapsible.tsx new file mode 100644 index 00000000..3e421ffa --- /dev/null +++ b/packages/ui/src/components/ui/collapsible.tsx @@ -0,0 +1,11 @@ +"use client"; + +import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"; + +const Collapsible = CollapsiblePrimitive.Root; + +const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger; + +const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent; + +export { Collapsible, CollapsibleContent,CollapsibleTrigger }; diff --git a/packages/ui/src/components/ui/sheet.tsx b/packages/ui/src/components/ui/sheet.tsx index 1c22d2b1..b34d1cbb 100644 --- a/packages/ui/src/components/ui/sheet.tsx +++ b/packages/ui/src/components/ui/sheet.tsx @@ -14,6 +14,8 @@ const Sheet = SheetPrimitive.Root; const SheetTrigger = SheetPrimitive.Trigger; +const SheetClose = SheetPrimitive.Close; + const portalVariants = cva("fixed inset-0 z-50 flex", { variants: { position: { @@ -202,6 +204,7 @@ SheetDescription.displayName = SheetPrimitive.Description.displayName; export { Sheet, + SheetClose, SheetContent, SheetDescription, SheetFooter, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a28b01d7..81735772 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -329,6 +329,12 @@ importers: '@headlessui/react': specifier: 1.7.15 version: 1.7.15(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-avatar': + specifier: ^1.0.4 + version: 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.16)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-collapsible': + specifier: ^1.0.3 + version: 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.16)(react-dom@18.2.0)(react@18.2.0) clsx: specifier: 2.0.0 version: 2.0.0 @@ -2986,7 +2992,6 @@ packages: resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==} dependencies: '@babel/runtime': 7.22.15 - dev: true /@radix-ui/react-arrow@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.16)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==} @@ -3009,6 +3014,58 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: true + /@radix-ui/react-avatar@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.16)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-kVK2K7ZD3wwj3qhle0ElXhOjbezIgyl2hVvgwfIdexL3rN6zJmy5AqqIf+D31lxVppdzV8CjAfZ6PklkmInZLw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.22.15 + '@radix-ui/react-context': 1.0.1(@types/react@18.2.16)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.16)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.16)(react@18.2.0) + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.16)(react@18.2.0) + '@types/react': 18.2.16 + '@types/react-dom': 18.2.7 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + + /@radix-ui/react-collapsible@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.16)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.22.15 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.16)(react@18.2.0) + '@radix-ui/react-context': 1.0.1(@types/react@18.2.16)(react@18.2.0) + '@radix-ui/react-id': 1.0.1(@types/react@18.2.16)(react@18.2.0) + '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.16)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.16)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.16)(react@18.2.0) + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.16)(react@18.2.0) + '@types/react': 18.2.16 + '@types/react-dom': 18.2.7 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /@radix-ui/react-collection@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.16)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==} peerDependencies: @@ -3045,7 +3102,6 @@ packages: '@babel/runtime': 7.22.15 '@types/react': 18.2.16 react: 18.2.0 - dev: true /@radix-ui/react-context@1.0.1(@types/react@18.2.16)(react@18.2.0): resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==} @@ -3059,7 +3115,6 @@ packages: '@babel/runtime': 7.22.15 '@types/react': 18.2.16 react: 18.2.0 - dev: true /@radix-ui/react-dialog@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.16)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-hJtRy/jPULGQZceSAP2Re6/4NpKo8im6V8P2hUqZsdFiSL8l35kYsw3qbRI6Ay5mQd2+wlLqje770eq+RJ3yZg==} @@ -3184,7 +3239,6 @@ packages: '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.16)(react@18.2.0) '@types/react': 18.2.16 react: 18.2.0 - dev: true /@radix-ui/react-navigation-menu@1.1.3(@types/react-dom@18.2.7)(@types/react@18.2.16)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-x4Uv0N47ABx3/frJazYXxvMpZeKJe0qmRIgQ2o3lhTqnTVg+CaZfVVO4nQLn3QJcDkTz8icElKffhFng47XIBA==} @@ -3291,7 +3345,6 @@ packages: '@types/react-dom': 18.2.7 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - dev: true /@radix-ui/react-primitive@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.16)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==} @@ -3312,7 +3365,6 @@ packages: '@types/react-dom': 18.2.7 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - dev: true /@radix-ui/react-roving-focus@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.16)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==} @@ -3418,7 +3470,6 @@ packages: '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.16)(react@18.2.0) '@types/react': 18.2.16 react: 18.2.0 - dev: true /@radix-ui/react-toggle-group@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.16)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==} @@ -3509,7 +3560,6 @@ packages: '@babel/runtime': 7.22.15 '@types/react': 18.2.16 react: 18.2.0 - dev: true /@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.2.16)(react@18.2.0): resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==} @@ -3524,7 +3574,6 @@ packages: '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.16)(react@18.2.0) '@types/react': 18.2.16 react: 18.2.0 - dev: true /@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.2.16)(react@18.2.0): resolution: {integrity: sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==} @@ -3553,7 +3602,6 @@ packages: '@babel/runtime': 7.22.15 '@types/react': 18.2.16 react: 18.2.0 - dev: true /@radix-ui/react-use-previous@1.0.1(@types/react@18.2.16)(react@18.2.0): resolution: {integrity: sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==} @@ -5943,7 +5991,6 @@ packages: resolution: {integrity: sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==} dependencies: '@types/react': 18.2.16 - dev: true /@types/react@16.14.46: resolution: {integrity: sha512-Am4pyXMrr6cWWw/TN3oqHtEZl0j+G6Up/O8m65+xF/3ZaUgkv1GAtTPWw4yNRmH0HJXmur6xKCKoMo3rBGynuw==}