CHORE: updated Radiant Logo

src/components/Navbar/index.tsx

@@ -5,8 +5,8 @@ import SearchBar from "@/components/Searchbar";
 import Link from "next/link";
 import Image from "next/image";
 import { ThemeToggleButton } from "../ThemeToggleButton";
-import radiantLogoRainbow from "./radiant-logo-rainbow.png";
-import radiantLogoBw from "./radiant-logo-bw.png";
+import radiantLogoLight from "./radiant-logo-light.png";
+import radiantLogoDark from "./radiant-logo-dark.png";
 import { workSans } from "@/app/fonts";
 import {
  Breadcrumb,
@@ -17,6 +17,7 @@ import {
  // BreadcrumbPage,
  BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
+// TODO: Add collapsing menu for mobile
 // import {
 // DropdownMenu,
 // DropdownMenuContent,
@@ -25,30 +26,28 @@ import {
 // } from "@/components/ui/dropdown-menu";
 import { usePathname } from "next/navigation";
 
-const RadiantLogoRainbow = ({ width, height, className } : { width: number, height: number, className?: string }) => {
+const RadiantLogoDark = ({ width, height, className } : { width: number, height: number, className?: string }) => {
  return (
  <div className={className}>
- <Image src={radiantLogoRainbow} alt="RadiantCommons.com Logo" width={width} height={height} priority/>
+ <Image src={radiantLogoDark} alt="RadiantCommons.com Logo" width={width} height={height} priority/>
  </div>
  );
 };
 
-const RadiantLogoBw = ({ width, height, className } : { width: number, height: number, className?: string }) => {
+const RadiantLogoLight = ({ width, height, className } : { width: number, height: number, className?: string }) => {
  return (
  <div className={className}>
- <Image src={radiantLogoBw} alt="RadiantCommons.com Logo" width={width} height={height} priority/>
+ <Image src={radiantLogoLight} alt="RadiantCommons.com Logo" width={width} height={height} priority/>
  </div>
  );
 };
 
 // const LEGAL_BREADCRUMB_SEGMENTS = ["transactions", "transaction", "blocks", "block", "ibc", "client", "clients", "channels", "channel", "connections", "connection", "gov", "dex", "staking"] as const;
 // type BreadcrumbSegment = typeof LEGAL_BREADCRUMB_SEGMENTS[number];
-
 // const isBreadcrumbPath = (path: string) : path is BreadcrumbSegment => {
 // const _legal: readonly string[] = LEGAL_BREADCRUMB_SEGMENTS;
 // return _legal.includes(path);
 // };
-
 // TBQF I don't think this sort of error checking is necessary. If anything, it'll cause errors whenever new paths are updated.
 // if (!segments.every(isBreadcrumbPath)) return null;
 
@@ -76,11 +75,11 @@ const Breadcrumbs = () => {
  const isTable = isTablePath(segments);
 
  // Handle case of /{transactions|blocks} and /ibc/{clients|channels|connections}
- // if length === 2 && isIbc => ibc table
  if (isTable) {
- const pathKind = isIbc ? segments[1] : segments[0];
- const _href = isIbc ? `/ibc/${pathKind}` : `/${pathKind}`;
- const linkText = isIbc ? `IBC ${capitalize(pathKind)}` : `Recent ${capitalize(pathKind)}`;
+ // /{transactions|blocks|clients|channels|connections}
+ const parent = isIbc ? segments[1] : segments[0];
+ const _href = isIbc ? `/ibc/${parent}` : `/${parent}`;
+ const linkText = isIbc ? `IBC ${capitalize(parent)}` : `Recent ${capitalize(parent)}`;
 
  return (
  <Breadcrumb>
@@ -98,11 +97,16 @@ const Breadcrumbs = () => {
  }
 
  if (isBlockOrTx || isIbc) {
+ // /{transaction|block|client|channel|connection}
  const parent = isIbc ? segments[1] : segments[0];
+ // /{parent}/{hash|height|ibc-identifier}
  const slug = isIbc ? segments[2] : segments[1];
+ // table routes are always just the pluralized form of the singular so transaction => transactions, client => clients, etc
  const parentTable = parent + "s";
+ // only difference is to prefix URI with /ibc if it's ibc related
  const tableRef = isIbc ? `/ibc/${parentTable}` : `/${parentTable}`;
  const _href = isIbc ? `/ibc/${parent}/${slug}` : `/${parent}/${slug}`;
+ // Same prefixing but for the "current" breadcrumb
  const linkText = isIbc ? `IBC ${capitalize(parent)} Summary` : `${capitalize(parent)} Summary`;
 
  return (
@@ -130,8 +134,8 @@ export const Navbar : FC = () => {
  <div className="flex flex-wrap justify-between items-center p-8 gap-2 max-w-[1400px] mx-auto">
  <div className="flex-grow flex flex-wrap">
  <Link href="https://radiantcommons.com" className="" >
- <RadiantLogoRainbow height={48} width={48} className="dark:block hidden"/>
- <RadiantLogoBw height={48} width={48} className="dark:hidden "/>
+ <RadiantLogoDark height={48} width={48} className="dark:block hidden"/>
+ <RadiantLogoLight height={48} width={48} className="dark:hidden"/>
  </Link>
  <div className="flex items-center">
  <h1 className={`font-semibold text-2xl ml-1 mr-3 ${workSans.className}`}><Link href="/">Cuiloa</Link></h1>