Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor: track details page #43

Merged
merged 3 commits into from
Nov 30, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 39 additions & 6 deletions apps/academy/src/components/Header.tsx
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -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",
},
{
Expand All @@ -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={[
Expand All @@ -37,9 +72,7 @@ const PageHeader: FunctionComponent = () => {
]}
/>
</div>
<div className="hidden lg:flex">
<TopBar menus={sampleMenus} />
</div>
<ConnectButton />
</header>
);
};
Expand Down
4 changes: 2 additions & 2 deletions apps/academy/src/components/Layout.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import type { FunctionComponent, PropsWithChildren } from "react";
import { Footer } from "ui";

import Navbar from "@/components/Navbar";
import { Header } from "@/components/Header";

export const Layout: FunctionComponent<PropsWithChildren> = ({ children }) => {
return (
<>
<Navbar />
<Header />
{children}
<Footer />
</>
Expand Down
2 changes: 2 additions & 0 deletions apps/academy/src/components/Navbar.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
// 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";
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Topic from "@/components/Topic";

export default function TrackDetails() {
return (
<main className="pt-14 text-white">
<main className="pt-32 text-white">
<section className="text-center">
<h1 className="font-future text-3xl lg:text-8xl">
WTRO TO <br /> ETHEREUM
Expand Down
8 changes: 4 additions & 4 deletions packages/ui/src/components/SideBar/SideBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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>
Expand Down
3 changes: 3 additions & 0 deletions packages/ui/src/components/ui/sheet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -202,6 +204,7 @@ SheetDescription.displayName = SheetPrimitive.Description.displayName;

export {
Sheet,
SheetClose,
SheetContent,
SheetDescription,
SheetFooter,
Expand Down