feat: finish mobile scren for track details page

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=
+NEXT_PUBLIC_WALLET_CONNECT_ID=""

apps/academy/src/components/AboutCourse.tsx

@@ -0,0 +1,13 @@
+export default function AboutCourse() {
+  return (
+    <article className="px-7 pt-14 lg:ml-16 lg:w-[42rem] lg:p-0 ">
+      <h2 className="text-2xl font-bold lg:text-3xl">About This Course</h2>
+      <p className="mt-4 leading-tight tracking-wide lg:text-xl">
+        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.
+      </p>
+    </article>
+  );
+}

apps/academy/src/components/CreatedBy.tsx

@@ -0,0 +1,39 @@
+import { Avatar, AvatarFallback, AvatarImage } from "ui/components/ui/avatar";
+
+export default function CreatedBy() {
+  return (
+    <section className="grid place-items-center pt-6 text-sm lg:mr-10 lg:text-xl">
+      <p className="text-center">Created by:</p>
+      <div className="flex flex-col items-center lg:flex-row lg:items-start lg:gap-4">
+        <Avatar className="mt-7 h-16 w-16">
+          <AvatarImage src="/azuki.png" />
+          <AvatarFallback>Avatar</AvatarFallback>
+        </Avatar>
+        <article className="mt-7 font-light">
+          <p>Dave C</p>
+          <p>
+            Dave C is a Full Stack Python <br /> Developer at the Ethereum <br /> Foundation
+          </p>
+          <p>Twitter @DaveC.eth</p>
+        </article>
+      </div>
+      <div className="mt-4">
+        <div className="mr-2 inline-flex h-8 w-14 items-center justify-center gap-2 rounded-3xl border border-neutral-600 border-opacity-30 bg-yellow-400 bg-opacity-40 p-2 backdrop-blur-md">
+          <div className="font-['Clash Display'] text-center text-sm font-semibold text-white">
+            Web3
+          </div>
+        </div>
+        <div className="mr-2 inline-flex h-8 w-14 items-center justify-center gap-2 rounded-3xl border border-neutral-600 border-opacity-30 bg-red-600 bg-opacity-30 p-2 backdrop-blur-md">
+          <div className="font-['Clash Display'] text-center text-sm font-semibold text-white">
+            Eth
+          </div>
+        </div>
+        <div className="inline-flex h-8 w-20 items-center justify-center gap-2 rounded-3xl border border-neutral-600 border-opacity-30 bg-cyan-400 bg-opacity-30 p-2 backdrop-blur-md">
+          <div className="font-['Clash Display'] text-center text-sm font-semibold text-white">
+            Beginner
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

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 (
-    <header className="main-container absolute left-0 right-0 top-0 z-50 flex items-center justify-between py-10 md:flex-row-reverse">
-      <ConnectButton />
+    <header className="main-container absolute left-0 right-0 top-0 z-50 flex items-center justify-between pt-6 md:flex-row md:pt-0">
+      <div className="hidden lg:flex ">
+        {pathname === "/" ? (
+          <div className="mt-14">
+            <TopBar menus={sampleMenus} />
+          </div>
+        ) : (
+          <div className="mt-7 flex items-center justify-around gap-36 text-white lg:mt-8 lg:flex lg:justify-between lg:gap-5 lg:self-stretch">
+            <div className="lg:ml-8 lg:flex lg:basis-[0%] lg:flex-col lg:items-stretch">
+              <h2 className="font-future lg:text-2xl">Back</h2>
+              <Link href="/">
+                <Image
+                  src={"/back.png"}
+                  alt="turn back"
+                  width={25}
+                  height={35}
+                  className="rotate-180 lg:hidden"
+                />
+                <Image
+                  src={"/back.png"}
+                  alt="turn back"
+                  width={50}
+                  height={35}
+                  className="hidden lg:block lg:rotate-180"
+                />
+              </Link>
+            </div>
+          </div>
+        )}
+      </div>
+
       <div className="flex lg:hidden">
         <SideBar
           menus={[
@@ -37,9 +72,7 @@ const PageHeader: FunctionComponent = () => {
           ]}
         />
       </div>
-      <div className="hidden lg:flex">
-        <TopBar menus={sampleMenus} />
-      </div>
+      <ConnectButton />
     </header>
   );
 };

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 (
+    <nav className="mt-7 flex items-center justify-around gap-36 text-white lg:mt-8 lg:flex lg:justify-between lg:gap-5 lg:self-stretch">
+      <div className="lg:ml-8 lg:flex lg:basis-[0%] lg:flex-col lg:items-stretch">
+        <h2 className="font-future lg:text-2xl">Back</h2>
+        <Link href="/">
+          <Image
+            src={"/back.png"}
+            alt="turn back"
+            width={25}
+            height={35}
+            className="rotate-180 lg:hidden"
+          />
+          <Image
+            src={"/back.png"}
+            alt="turn back"
+            width={50}
+            height={35}
+            className="hidden lg:block lg:rotate-180"
+          />
+        </Link>
+      </div>
+      <div className="lg:mr-20 lg:flex lg:w-[98px] lg:max-w-full lg:items-center lg:justify-center lg:gap-5">
+        <Image
+          src="/ph_moon-light.png"
+          alt="moon"
+          width={25}
+          height={25}
+          className="hidden lg:inline-block lg:rounded-full lg:border lg:border-white"
+        />
+        <Avatar className="h-8 w-8 lg:h-14 lg:w-14">
+          <AvatarImage src="/DD_NFT_avatar.png" />
+          <AvatarFallback>DD</AvatarFallback>
+        </Avatar>
+      </div>
+    </nav>
+  );
+}

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 (
+    <section className="w-scren relative pt-8 lg:pb-12 lg:pl-12 lg:pt-8">
+      <div className="flex gap-4 px-5">
+        <div className="relative mt-6 h-10 w-10 shrink-0 rounded-[50%] bg-white lg:h-14 lg:w-14">
+          <Image
+            src="/arrow-up-bold.png"
+            alt="Arrow"
+            width={25}
+            height={25}
+            className="absolute inset-1/2 block -translate-x-1/2 -translate-y-1/2 rotate-90 "
+          />
+        </div>
+        <div className="shrink grow basis-auto self-stretch leading-[100.5%]">
+          <h2 className="text-2xl font-bold lg:text-3xl">Topic Heading</h2>
+          <p className="mt-4 text-base lg:text-xl">
+            Understand the types of numbers you can work with, how to store x, and how to convert Y
+            to Z.
+          </p>
+        </div>
+      </div>
+      <Collapsible open={isOpen} onOpenChange={setIsOpen} className="mt-9 ">
+        <CollapsibleTrigger className="ml-8 flex items-center gap-1 lg:ml-12">
+          {isOpen ? (
+            <Image src="/arrow-up-bold.png" alt="Arrow" width={20} height={25} />
+          ) : (
+            <Image
+              src="/arrow-up-bold.png"
+              alt="Arrow"
+              width={20}
+              height={25}
+              className="rotate-180"
+            />
+          )}
+          <h3 className="text-xl font-semibold leading-tight">6 steps</h3>
+        </CollapsibleTrigger>
+
+        {/* This is where collapsible content starts */}
+        <CollapsibleContent className="mt-8 lg:text-xl">
+          <div className="ml-11 h-px w-80 border border-white lg:w-2/3"></div>
+          <div className="mt-8 flex items-center gap-x-1.5">
+            <Icons.track_tick className="ml-6 mr-2.5" />
+            <p className="text-xl font-bold">Sub-topic heading</p>
+          </div>
+        </CollapsibleContent>
+        <CollapsibleContent className="mt-8 lg:text-xl">
+          <div className="ml-11 h-px w-80 border border-white lg:w-2/3"></div>
+          <div className="mt-8 flex items-center gap-x-1.5">
+            <Icons.track_tick className="ml-6 mr-2.5" />
+            <p className="text-xl font-bold">Sub-topic heading</p>
+          </div>
+        </CollapsibleContent>
+        <CollapsibleContent className="mt-8 lg:text-xl">
+          <div className="ml-11 h-px w-80 border border-white lg:w-2/3"></div>
+          <div className="mt-8 flex items-center gap-x-1.5">
+            {/* <Image src="/tick.png" alt="Arrow" width={24} height={24} className="ml-6" /> */}
+            <p className="ml-14 text-xl font-bold">Sub-topic heading</p>
+          </div>
+        </CollapsibleContent>
+        <CollapsibleContent className="mt-8 lg:text-xl">
+          <div className="ml-11 h-px w-80 border border-white lg:w-2/3"></div>
+          <div className="mt-8 flex items-center gap-x-1.5">
+            {/* <Image src="/tick.png" alt="Arrow" width={24} height={24} className="ml-6" /> */}
+            <p className="ml-14 text-xl font-bold">Sub-topic heading</p>
+          </div>
+        </CollapsibleContent>
+        <CollapsibleContent className="mt-8 lg:text-xl">
+          <div className="ml-11 h-px w-80 border border-white lg:w-2/3"></div>
+          <div className="mt-8 flex items-center gap-x-1.5">
+            {/* <Image src="/tick.png" alt="Arrow" width={24} height={24} className="ml-6" /> */}
+            <p className="ml-14 text-xl font-bold">Sub-topic heading</p>
+          </div>
+        </CollapsibleContent>
+        <CollapsibleContent className="mt-8 lg:text-xl">
+          <div className="ml-11 h-px w-80 border border-white lg:w-2/3"></div>
+          <div className="mt-8 flex items-center gap-x-1.5">
+            {/* <Image src="/tick.png" alt="Arrow" width={24} height={24} className="ml-6" /> */}
+            <p className="ml-14 text-xl font-bold">Sub-topic heading</p>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </section>
+  );
+}

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 (
+    <main className="pt-32 text-white">
+      <section className="text-center">
+        <h1 className="font-future text-3xl lg:text-8xl">
+          WTRO TO <br /> ETHEREUM
+        </h1>
+        <div className="ml-16 mt-7 h-px w-72 border border-white lg:w-[90%]"></div>
+      </section>
+      <div className="flex flex-col lg:flex-row lg:justify-between lg:pt-24">
+        <div className="order-first lg:order-last">
+          <CreatedBy />
+        </div>
+        <div className="order-last lg:order-first">
+          <AboutCourse />
+        </div>
+      </div>
+      <Topic />
+      <Topic />
+    </main>
+  );
+}

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"
   }
 }

packages/ui/src/components/Footer/Footer.tsx

@@ -33,7 +33,12 @@ export const Footer = () => {
           {socials.map((social) => {
             const Icon = Icons[social.icon];
             return (
-              <Link aria-label={social.alt} href={social.href} className="group" key={social.href}>
+              <Link
+                aria-label={social.alt}
+                href={social.href}
+                className="group mt-16"
+                key={social.href}
+              >
                 {Icon ? <Icon /> : null}
               </Link>
             );

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 = {
       </g>
     </svg>
   ),
+  track_tick: (props: LucideProps) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      width="18"
+      height="14"
+      viewBox="0 0 18 14"
+      fill="none"
+    >
+      <path
+        d="M18 1.99984L6 13.9998L0.5 8.49984L1.91 7.08984L6 11.1698L16.59 0.589844L18 1.99984Z"
+        fill="#44AF96"
+      />
+    </svg>
+  ),
 };

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<SideBarProps> = ({ menus }) => {
         <div className="gap-4 pt-12">
           {menus.map((menu, key) => (
             <div key={key} className="mobile-nav-item">
-              <NextLink href={menu.href} legacyBehavior passHref>
-                {menu.name}
-              </NextLink>
+              <SheetClose asChild>
+                <NextLink href={menu.href}>{menu.name}</NextLink>
+              </SheetClose>
             </div>
           ))}
         </div>