feat: ui adjustments

app/analyzer/algorithms/array/binary-search/metadata.json

@@ -1,5 +1,6 @@
 {
   "name": "Array binary search",
   "category": "array",
-  "indexes": ["low", "high", "mid"]
+  "indexes": ["low", "high", "mid"],
+  "description": "Description of algorithm"
 }

app/analyzer/algorithms/array/delete-item/metadata.json

@@ -1,5 +1,6 @@
 {
   "name": "Deletion in array",
   "category": "array",
-  "indexes": ["i", "k"]
+  "indexes": ["i", "k"],
+  "description": "Description of algorithm"
 }

app/analyzer/algorithms/array/insert-item/metadata.json

@@ -1,5 +1,6 @@
 {
   "name": "Insertion in array",
   "category": "array",
-  "indexes": ["i", "k"]
+  "indexes": ["i", "k"],
+  "description": "Description of algorithm"
 }

app/analyzer/algorithms/array/largest-item-in-array/algorithm.js

@@ -0,0 +1,12 @@
+export function largestItem(arr) {
+  debugger;
+  let max = arr[0];
+
+  for (let i = 1; i < arr.length; i++) {
+    if (arr[i] > max) {
+      max = arr[i];
+    }
+  }
+
+  return max;
+}

app/analyzer/algorithms/array/largest-item-in-array/metadata.json

@@ -0,0 +1,6 @@
+{
+  "name": "Largest element in array",
+  "category": "array",
+  "indexes": ["i"],
+  "description": "Description of algorithm"
+}

app/analyzer/algorithms/array/largest-item-in-array/run.js

@@ -0,0 +1,3 @@
+import { largestItem } from "./algorithm.js";
+
+largestItem([20, 10, 20, 100, 4, 60]);

app/analyzer/algorithms/array/max-sum/metadata.json

@@ -1,5 +1,6 @@
 {
   "name": "Array max sum",
   "category": "array",
-  "indexes": ["i", "leftEdge"]
+  "indexes": ["i", "leftEdge"],
+  "description": "Description of algorithm"
 }

app/analyzer/algorithms/linked-list/find-middle/metadata.json

@@ -1,4 +1,5 @@
 {
   "name": "Middle of linked list",
-  "category": "linked-list"
+  "category": "linked-list",
+  "description": "Description of algorithm"
 }

app/analyzer/generate-database.ts

@@ -32,6 +32,7 @@ export async function generateDatabase() {
         id: metadata.name.split(" ").join("-").toLowerCase(),
         name: metadata.name,
         category: metadata.category,
+        description: metadata.description,
         ...debugResult,
       });
     }

app/components/code-viewer/code-viewer.tsx

@@ -9,9 +9,12 @@ interface Props {
 
 export const CodeViewer = ({ sourceCode, currentLine }: Props) => {
   return (
-    <div className="relative h-full border border-r-0 border-neutral-100">
+    <div className="relative h-full border-neutral-100">
       <pre className="absolute top-0 w-full overflow-auto p-2 pl-8 text-xs">
-        <code dangerouslySetInnerHTML={{ __html: sourceCode }} />
+        <code
+          dangerouslySetInnerHTML={{ __html: sourceCode }}
+          className="font-mono"
+        />
       </pre>
 
       <LineHighlight sourceCode={sourceCode} currentLine={currentLine} />
@@ -27,7 +30,7 @@ const LineHighlight = ({ sourceCode, currentLine }: Props) => {
       {lineNumbers.map((line) => (
         <Fragment key={line}>
           <span
-            className={`inline-block w-full pl-2 text-neutral-500 ${currentLine === line ? "bg-neutral-100" : ""}`}
+            className={`inline-block w-full pl-2 text-neutral-500 ${currentLine === line ? "bg-blue-50" : ""}`}
           >
             <span className="inline-block w-3 text-right">{line}</span>
           </span>

app/components/header/header.tsx

@@ -2,10 +2,9 @@
 
 export const Header = () => {
   return (
-    <header className="flex h-12 items-center justify-center gap-4 border-b border-neutral-100 px-4 py-2">
-      {/* <img className="h-full" src={logo} alt="Logo" /> */}
-      <h1 className="font-mono text-sm text-neutral-500">
-        Data Structures Analyzer
+    <header className="flex h-12 items-center justify-center gap-4 bg-blue-400 px-4 py-2">
+      <h1 className="text-sm font-medium text-blue-50">
+        DATA STRUCTURES ANALYZER
       </h1>
     </header>
   );

app/components/visualization-canvas/visualization-canvas.tsx

@@ -42,7 +42,7 @@ export const VisualizationCanvas = ({
   const { nodes, edges } = dataStructures[0];
 
   return (
-    <div className="h-full border border-neutral-100">
+    <div className="h-full">
       <ReactFlow
         key={id}
         nodes={nodes}

app/root.tsx

@@ -9,7 +9,22 @@ import type { LinksFunction } from "@remix-run/node";
 
 import "./tailwind.css";
 
-export const links: LinksFunction = () => [];
+export const links: LinksFunction = () => [
+  { rel: "preconnect", href: "https://fonts.googleapis.com" },
+  {
+    rel: "preconnect",
+    href: "https://fonts.gstatic.com",
+    crossOrigin: "anonymous",
+  },
+  {
+    rel: "stylesheet",
+    href: "https://fonts.googleapis.com/css2?family=Recursive:wght@300..500&display=swap",
+  },
+  {
+    rel: "stylesheet",
+    href: "https://fonts.googleapis.com/css2?family=Recursive:wght,MONO@300..500,1&display=swap",
+  },
+];
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
@@ -20,7 +35,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <Meta />
         <Links />
       </head>
-      <body>
+      <body className="font-sans">
         {children}
         <ScrollRestoration />
         <Scripts />

app/routes/algorithms.$algorithm.tsx

@@ -12,6 +12,12 @@ import {
 import { AlgorithmData } from "~/types";
 import { db } from "~/utils/db.server";
 
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+  return data
+    ? [{ title: `Data Structures Analyzer - ${data?.algorithm?.name ?? ""}` }]
+    : [{ title: "Data Structures Analyzer - Algorithm Not Found" }];
+};
+
 export const loader = async ({ params }: LoaderFunctionArgs) => {
   const algorithm = await db
     .collection<AlgorithmData>("algorithms")
@@ -20,12 +26,6 @@ export const loader = async ({ params }: LoaderFunctionArgs) => {
   return json({ algorithm });
 };
 
-export const meta: MetaFunction<typeof loader> = ({ data }) => {
-  return data
-    ? [{ title: `Data Structures Analyzer - ${data?.algorithm?.name ?? ""}` }]
-    : [{ title: "Data Structures Analyzer - Algorithm Not Found" }];
-};
-
 export default function AlgorithmRoute() {
   const { algorithm } = useLoaderData<typeof loader>();
   const [currentStep, setCurrentStep] = React.useState(0);
@@ -38,10 +38,17 @@ export default function AlgorithmRoute() {
     <div className="relative flex w-full">
       <SplitView
         leftComponent={
-          <CodeViewer
-            sourceCode={algorithm.sourceCode}
-            currentLine={algorithm.steps[currentStep].line}
-          />
+          <div className="flex h-full flex-col">
+            <div className="flex flex-col gap-2 border-b border-neutral-100 p-2 text-neutral-500">
+              <h1 className="font-medium">{algorithm.name}</h1>
+              <p className="text-xs font-light">{algorithm.description}</p>
+            </div>
+
+            <CodeViewer
+              sourceCode={algorithm.sourceCode}
+              currentLine={algorithm.steps[currentStep].line}
+            />
+          </div>
         }
         rightComponent={
           <VisualizationCanvas

app/routes/algorithms.tsx

@@ -18,7 +18,7 @@ export default function AlgorithmsLayout() {
   const { algorithms } = useLoaderData<typeof loader>();
 
   return (
-    <main className="flex h-screen flex-col font-mono">
+    <main className="flex h-screen flex-col">
       <Header />
 
       <div className="flex h-full border-neutral-200">
@@ -27,7 +27,7 @@ export default function AlgorithmsLayout() {
             {algorithms.map((algorithm) => (
               <li
                 key={algorithm.id}
-                className={`mt-2 rounded-sm px-3 py-1 text-xs text-neutral-500 ${algorithm.id === params.algorithm ? "bg-neutral-100 shadow-sm" : ""}`}
+                className={`mt-2 rounded-sm px-3 py-1 text-xs text-neutral-500 ${algorithm.id === params.algorithm ? "bg-blue-50 shadow-sm" : ""}`}
               >
                 <Link to={`/algorithms/${algorithm.id}`}>{algorithm.name}</Link>
               </li>

app/types/debug.ts

@@ -57,10 +57,12 @@ export interface AlgorithmData extends DebugResult {
   id: string;
   name: string;
   category: string;
+  description?: string;
 }
 
 export interface AlgorithmMetadata {
   name: string;
   category: string;
+  description?: string;
   indexes?: string[];
 }

tailwind.config.ts

@@ -1,7 +1,14 @@
-import type { Config } from "tailwindcss"
+import type { Config } from "tailwindcss";
 
 export default {
   content: ["./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}"],
-  theme: {},
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['"Recursive"'],
+        mono: ['"Recursive"'],
+      },
+    },
+  },
   plugins: [],
-} satisfies Config
+} satisfies Config;