adds anchor reusable component

wmalarski · Oct 29, 2023 · 8c05798 · 8c05798
1 parent 7a9f579
commit 8c05798
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 10 deletions.
diff --git a/src/components/anon-navbar/index.marko b/src/components/anon-navbar/index.marko
@@ -1,16 +1,16 @@
 import { buildPath } from "../../utils/paths";
 <app-navbar>
   <@start>
-    <a href=buildPath({ path: "/" })>
+    <app-anchor variant="ghost" size="lg" href=buildPath({ path: "/" })>
       Home
-    </a>
+    </app-anchor>
   </@start>
   <@end>
-    <a href=buildPath({ path: "/sign-in" })>
+    <app-anchor variant="ghost" href=buildPath({ path: "/sign-in" })>
       Sign In
-    </a>
-    <a href=buildPath({ path: "/sign-up" })>
+    </app-anchor>
+    <app-anchor variant="ghost" href=buildPath({ path: "/sign-up" })>
       Sign Up
-    </a>
+    </app-anchor>
   </@end>
 </app-navbar>
diff --git a/src/components/app-anchor/index.marko b/src/components/app-anchor/index.marko
@@ -0,0 +1,25 @@
+import { buttonClass, type ButtonClassProps } from "../app-button/recipes";
+export type Input = Marko.Input<"a"> & ButtonClassProps;
+
+<const/{
+  color,
+  isLoading,
+  shape,
+  size,
+  variant,
+  class: className,
+  ...rest
+}=input/>
+
+<const/recipeResult=buttonClass({
+  className,
+  color,
+  isLoading,
+  shape,
+  size,
+  variant,
+})/>
+
+<a ...rest class=recipeResult>
+  <${input.renderBody}/>
+</a>
diff --git a/src/routes/todos/(active,finished,)/+page.marko b/src/routes/todos/(active,finished,)/+page.marko
@@ -1,3 +1,4 @@
+<protected-navbar />
 <main class="flex flex-col gap-8 max-w-md justify-center w-full mx-auto">
   <pre>
 ${" "}${JSON.stringify(

diff --git a/src/routes/todos/(active,finished,)/components/protected-navbar.marko b/src/routes/todos/(active,finished,)/components/protected-navbar.marko
@@ -1,13 +1,26 @@
 import { buildPath } from "../../../../utils/paths";
 <app-navbar>
   <@start>
-    <a href=buildPath({ path: "/" })>
+    <app-anchor variant="ghost" size="lg" href=buildPath({ path: "/" })>
       Home
-    </a>
+    </app-anchor>
   </@start>
+
+  <@center>
+    <app-anchor variant="ghost" href=buildPath({ path: "/todos" })>
+      All
+    </app-anchor>
+    <app-anchor variant="ghost" href=buildPath({ path: "/todos/active" })>
+      Active
+    </app-anchor>
+    <app-anchor variant="ghost" href=buildPath({ path: "/todos/finished" })>
+      Finished
+    </app-anchor>
+  </@center>
+
   <@end>
-    <a href=buildPath({ path: "/api/auth/sign-out" })>
+    <app-anchor variant="ghost" href=buildPath({ path: "/api/auth/sign-out" })>
       Sign Out
-    </a>
+    </app-anchor>
   </@end>
 </app-navbar>