Cleanup

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

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

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: "",

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>
   );
 }

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>
   );
 }

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>

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())} />;
+};

src/components/NavLink.tsx → 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}

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>
+);

src/components/LayoutSidebarContent.tsx → 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} />
           ))}

src/components/LayoutSidebar.tsx → 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>;
 };

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);
+    }
   }
 }