Added icons to ref index

thefrontside · Jan 20, 2025 · 6a191b6 · 6a191b6
1 parent 1daa3e2
commit 6a191b6
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 18 deletions.
diff --git a/components/type/icon.tsx b/components/type/icon.tsx
@@ -1,26 +1,26 @@
-export function Icon({ kind }: { kind: string }) {
-  switch (kind) {
+export function Icon(props: { kind: string, class?: string }) {
+  switch (props.kind) {
     case "function":
       return (
-        <span class="rounded-full bg-sky-100 inline-block w-6 h-full mr-1 text-center">
+        <span class={`${props.class ? props.class : ""} rounded-full bg-sky-100 inline-block w-6 h-full mr-1 text-center`}>
           f
         </span>
       );
     case "interface":
       return (
-        <span class="rounded-full bg-orange-50 text-orange-600 inline-block w-6 h-full mr-1 text-center">
+        <span class={`${props.class ? props.class : ""} rounded-full bg-orange-50 text-orange-600 inline-block w-6 h-full mr-1 text-center`}>
           I
         </span>
       );
     case "typeAlias":
       return (
-        <span class="rounded-full bg-red-50 text-red-600 inline-block w-6 h-full mr-1 text-center">
+        <span class={`${props.class ? props.class : ""} rounded-full bg-red-50 text-red-600 inline-block w-6 h-full mr-1 text-center`}>
           T
         </span>
       );
     case "variable": {
       return (
-        <span class="rounded-full bg-purple-200 text-violet-600 inline-block w-6 h-full mr-1 text-center">
+        <span class={`${props.class ? props.class : ""} rounded-full bg-purple-200 text-violet-600 inline-block w-6 h-full mr-1 text-center`}>
           v
         </span>
       );

diff --git a/routes/api-index-route.tsx b/routes/api-index-route.tsx
@@ -9,6 +9,7 @@ import { DocPage } from "../hooks/use-deno-doc.tsx";
 import { createChildURL } from "./links-resolvers.ts";
 import { extractVersion, major, minor, rsort } from "../lib/semver.ts";
 import { ResolveLinkFunction } from "../hooks/use-markdown.tsx";
+import { Icon } from "../components/type/icon.tsx";
 
 export function apiIndexRoute({
   library,
@@ -83,11 +84,13 @@ export function apiIndexRoute({
               </p>
               <h3>Latest release: {v3version}</h3>
               <p>This release includes the following exports:</p>
-              <ul class="columns-3">
-                {yield* listPages({
-                  pages: v3docs["."],
-                  linkResolver: createChildURL("v3"),
-                })}
+              <ul class="columns-3 pl-0">
+                {
+                  yield* listPages({
+                    pages: v3docs["."],
+                    linkResolver: createChildURL("v3"),
+                  })
+                }
               </ul>
               <h3>Previous releases</h3>
               <ul>
@@ -113,11 +116,13 @@ export function apiIndexRoute({
               </p>
               <h3>Latest release: {v4version}</h3>
               <p>This release includes the following exports:</p>
-              <ul class="columns-3">
-                {yield* listPages({
-                  pages: v3docs["."],
-                  linkResolver: createChildURL("v4"),
-                })}
+              <ul class="columns-3 pl-0">
+                {
+                  yield* listPages({
+                    pages: v3docs["."],
+                    linkResolver: createChildURL("v4"),
+                  })
+                }
               </ul>
             </section>
           </article>
@@ -139,8 +144,11 @@ function* listPages({
   for (const page of pages.sort((a, b) => a.name.localeCompare(b.name))) {
     const link = yield* linkResolver(page.name);
     elements.push(
-      <li>
-        <a href={link}>{page.name}</a>
+      <li class="list-none pb-1">
+        <a href={link}>
+          <Icon kind={page.kind} class="mr-2" />
+          {page.name}
+        </a>
       </li>,
     );
   }