From 93b65a7b42eeb28c95f6af38c320a9220a7dcf52 Mon Sep 17 00:00:00 2001
From: Iveta <quietbits@gmail.com>
Date: Wed, 14 Feb 2024 10:25:05 -0500
Subject: [PATCH] Cleanup

---
 src/app/(sidebar)/account/template.tsx          | 11 +----------
 src/app/(sidebar)/layout.tsx                    | 10 +++-------
 src/app/layout.tsx                              |  3 ++-
 src/app/not-found.tsx                           |  6 ++++--
 src/app/page.tsx                                | 10 +++++-----
 src/components/MainNav.tsx                      | 13 ++-----------
 src/components/NextLink.tsx                     | 17 +++++++++++++++++
 src/components/{NavLink.tsx => SdsLink.tsx}     |  4 ++--
 .../layout/LayoutContentContainer.tsx           |  9 +++++++++
 src/components/{ => layout}/LayoutMain.tsx      |  0
 .../{ => layout}/LayoutSidebarContent.tsx       | 12 ++++++++----
 .../LayoutWithSidebar.tsx}                      |  2 +-
 src/styles/globals.scss                         |  7 +++++++
 13 files changed, 61 insertions(+), 43 deletions(-)
 create mode 100644 src/components/NextLink.tsx
 rename src/components/{NavLink.tsx => SdsLink.tsx} (53%)
 create mode 100644 src/components/layout/LayoutContentContainer.tsx
 rename src/components/{ => layout}/LayoutMain.tsx (100%)
 rename src/components/{ => layout}/LayoutSidebarContent.tsx (89%)
 rename src/components/{LayoutSidebar.tsx => layout/LayoutWithSidebar.tsx} (60%)

diff --git a/src/app/(sidebar)/account/template.tsx b/src/app/(sidebar)/account/template.tsx
index 4c636a47..ccbca088 100644
--- a/src/app/(sidebar)/account/template.tsx
+++ b/src/app/(sidebar)/account/template.tsx
@@ -1,7 +1,6 @@
 "use client";
 
-import { Icon } from "@stellar/design-system";
-import { LayoutSidebarContent } from "@/components/LayoutSidebarContent";
+import { LayoutSidebarContent } from "@/components/layout/LayoutSidebarContent";
 import { Routes } from "@/constants/routes";
 
 export default function AccountTemplate({
@@ -21,14 +20,6 @@ export default function AccountTemplate({
             route: Routes.FUND_ACCOUNT,
             label: "Fund Account",
           },
-          {
-            route: Routes.CREATE_MUXED_ACCOUNT,
-            label: "Create Muxed Account",
-          },
-          {
-            route: Routes.PARSE_MUXED_ACCOUNT,
-            label: "Parse Muxed Account",
-          },
         ],
       }}
     >
diff --git a/src/app/(sidebar)/layout.tsx b/src/app/(sidebar)/layout.tsx
index 2e47d2c1..43a4eec9 100644
--- a/src/app/(sidebar)/layout.tsx
+++ b/src/app/(sidebar)/layout.tsx
@@ -1,9 +1,5 @@
-import { LayoutSidebar } from "@/components/LayoutSidebar";
+import { LayoutWithSidebar } from "@/components/layout/LayoutWithSidebar";
 
-export default function LayoutWithSidebar({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return <LayoutSidebar>{children}</LayoutSidebar>;
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <LayoutWithSidebar>{children}</LayoutWithSidebar>;
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index d15be565..d4fca4bc 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,10 +1,11 @@
 import type { Metadata } from "next";
 
-import { LayoutMain } from "@/components/LayoutMain";
+import { LayoutMain } from "@/components/layout/LayoutMain";
 
 import "@stellar/design-system/build/styles.min.css";
 import "@/styles/globals.scss";
 
+// TODO: update metadata
 export const metadata: Metadata = {
   title: "Laboratory - Stellar",
   description: "",
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 0195d480..0625ac2c 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -3,13 +3,15 @@
 import Link from "next/link";
 
 import { Routes } from "@/constants/routes";
+import { LayoutContentContainer } from "@/components/layout/LayoutContentContainer";
 
+// TODO: update 404
 export default function NotFound() {
   return (
-    <div>
+    <LayoutContentContainer>
       <h2>Not Found</h2>
       <p>Could not find requested resource</p>
       <Link href={Routes.ROOT}>Return Home</Link>
-    </div>
+    </LayoutContentContainer>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index c9fb33c7..7769fddf 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,11 +1,11 @@
 "use client";
 
+import { LayoutContentContainer } from "@/components/layout/LayoutContentContainer";
+
 export default function Introduction() {
   return (
-    <div className="LabLayout__container">
-      <div className="LabLayout__content">
-        <div>Introduction</div>
-      </div>
-    </div>
+    <LayoutContentContainer>
+      <div>Introduction</div>
+    </LayoutContentContainer>
   );
 }
diff --git a/src/components/MainNav.tsx b/src/components/MainNav.tsx
index b2ecc2e4..73729ef6 100644
--- a/src/components/MainNav.tsx
+++ b/src/components/MainNav.tsx
@@ -1,7 +1,7 @@
-import NextLink from "next/link";
 import { usePathname } from "next/navigation";
 
 import { Routes } from "@/constants/routes";
+import { NextLink } from "@/components/NextLink";
 
 type NavLink = {
   href: Routes | string;
@@ -23,7 +23,7 @@ const primaryNavLinks: NavLink[] = [
   },
 ];
 
-const secondaryNavLinks = [
+const secondaryNavLinks: NavLink[] = [
   {
     href: "https://developers.stellar.org/docs",
     label: "View Documentation",
@@ -33,14 +33,6 @@ const secondaryNavLinks = [
 export const MainNav = () => {
   const pathname = usePathname();
 
-  const externalLinkProps = (href: string) => {
-    const isExternalLink = href?.startsWith("http") || href?.startsWith("//");
-
-    return isExternalLink
-      ? { rel: "noreferrer noopener", target: "_blank" }
-      : {};
-  };
-
   const isActiveRoute = (link: string) => {
     if (link.startsWith("http")) {
       return false;
@@ -53,7 +45,6 @@ export const MainNav = () => {
     <NextLink
       href={link.href}
       className={`NavLink ${isActiveRoute(link.href) ? "NavLink--active" : ""}`}
-      {...externalLinkProps(link.href)}
     >
       {link.label}
     </NextLink>
diff --git a/src/components/NextLink.tsx b/src/components/NextLink.tsx
new file mode 100644
index 00000000..25fdfe8d
--- /dev/null
+++ b/src/components/NextLink.tsx
@@ -0,0 +1,17 @@
+import { ComponentProps } from "react";
+import Link from "next/link";
+
+type LinkProps = ComponentProps<typeof Link>;
+
+/** `NextLink` is extended `next/link`. */
+export const NextLink = (props: LinkProps) => {
+  const externalLinkProps = (href: string) => {
+    const isExternalLink = href?.startsWith("http") || href?.startsWith("//");
+
+    return isExternalLink
+      ? { rel: "noreferrer noopener", target: "_blank" }
+      : {};
+  };
+
+  return <Link {...props} {...externalLinkProps(props.href.toString())} />;
+};
diff --git a/src/components/NavLink.tsx b/src/components/SdsLink.tsx
similarity index 53%
rename from src/components/NavLink.tsx
rename to src/components/SdsLink.tsx
index a64c647d..295d2aef 100644
--- a/src/components/NavLink.tsx
+++ b/src/components/SdsLink.tsx
@@ -1,8 +1,8 @@
 import NextLink from "next/link";
 import { Props as LinkProps, Link } from "@stellar/design-system";
 
-/** Use `NavLink` instead of `Link` from Stellar Design System to support client-side routing. `NavLink` uses `Link` from `next/link` internally. */
-export const NavLink = (props: LinkProps) => {
+/** Use `SdsLink` instead of `Link` from Stellar Design System to support client-side routing. `SdsLink` uses `next/link` internally. */
+export const SdsLink = (props: LinkProps) => {
   return (
     <Link {...props} customAnchor={<NextLink href={props.href || ""} />}>
       {props.children}
diff --git a/src/components/layout/LayoutContentContainer.tsx b/src/components/layout/LayoutContentContainer.tsx
new file mode 100644
index 00000000..fd95e152
--- /dev/null
+++ b/src/components/layout/LayoutContentContainer.tsx
@@ -0,0 +1,9 @@
+export const LayoutContentContainer = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => (
+  <div className="LabLayout__container">
+    <div className="LabLayout__content">{children}</div>
+  </div>
+);
diff --git a/src/components/LayoutMain.tsx b/src/components/layout/LayoutMain.tsx
similarity index 100%
rename from src/components/LayoutMain.tsx
rename to src/components/layout/LayoutMain.tsx
diff --git a/src/components/LayoutSidebarContent.tsx b/src/components/layout/LayoutSidebarContent.tsx
similarity index 89%
rename from src/components/LayoutSidebarContent.tsx
rename to src/components/layout/LayoutSidebarContent.tsx
index 7bcc8cfb..de94f8ac 100644
--- a/src/components/LayoutSidebarContent.tsx
+++ b/src/components/layout/LayoutSidebarContent.tsx
@@ -2,9 +2,9 @@
 
 import { ReactNode } from "react";
 import { usePathname } from "next/navigation";
-import NextLink from "next/link";
-import { Routes } from "@/constants/routes";
 import { Icon } from "@stellar/design-system";
+import { Routes } from "@/constants/routes";
+import { NextLink } from "@/components/NextLink";
 
 export type SidebarLink = {
   route: Routes | string;
@@ -43,9 +43,13 @@ export const LayoutSidebarContent = ({
     <>
       <div className="LabLayout__sidebar">
         <div className="LabLayout__sidebar--top">
-          {/* TODO: add instruction */}
-          {/* TODO: render nested items */}
+          {sidebar.instruction ? (
+            <div className="LabLayout__sidebar__instruction">
+              {sidebar.instruction}
+            </div>
+          ) : null}
 
+          {/* TODO: render nested items */}
           {sidebar.navItems.map((item) => (
             <Link key={item.route} item={item} />
           ))}
diff --git a/src/components/LayoutSidebar.tsx b/src/components/layout/LayoutWithSidebar.tsx
similarity index 60%
rename from src/components/LayoutSidebar.tsx
rename to src/components/layout/LayoutWithSidebar.tsx
index f244d74b..e9373a5e 100644
--- a/src/components/LayoutSidebar.tsx
+++ b/src/components/layout/LayoutWithSidebar.tsx
@@ -2,6 +2,6 @@
 
 import { ReactNode } from "react";
 
-export const LayoutSidebar = ({ children }: { children: ReactNode }) => {
+export const LayoutWithSidebar = ({ children }: { children: ReactNode }) => {
   return <div className="LabLayout__withSidebar">{children}</div>;
 };
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index a82f3daa..0899cc1c 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -136,6 +136,13 @@
       flex-direction: column;
       gap: pxToRem(8px);
     }
+
+    &__instruction {
+      font-size: pxToRem(12px);
+      line-height: pxToRem(18px);
+      font-weight: var(--sds-fw-medium);
+      margin-bottom: pxToRem(4px);
+    }
   }
 }