From 40fa913272c910b8843b83d88e4eaef262a0f23d Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Wed, 5 Jul 2023 17:10:34 +0100
Subject: [PATCH] TextLink can have a to or an href

---
 .../app/components/primitives/Paragraph.tsx   | 35 ++++++++++++++++---
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/apps/webapp/app/components/primitives/Paragraph.tsx b/apps/webapp/app/components/primitives/Paragraph.tsx
index 437e379cb..6f6605144 100644
--- a/apps/webapp/app/components/primitives/Paragraph.tsx
+++ b/apps/webapp/app/components/primitives/Paragraph.tsx
@@ -1,3 +1,4 @@
+import { Link } from "@remix-run/react";
 import { cn } from "~/utils/cn";
 
 const paragraphVariants = {
@@ -90,18 +91,44 @@ export function Paragraph({
 }
 
 type TextLinkProps = {
-  href: string;
+  href?: string;
+  to?: string;
+  className?: string;
   children: React.ReactNode;
 } & React.AnchorHTMLAttributes<HTMLAnchorElement>;
 
-export function TextLink({ href, children, ...props }: TextLinkProps) {
-  return (
+const classes = "text-indigo-500 transition hover:text-indigo-400";
+
+export function TextLink({
+  href,
+  to,
+  children,
+  className,
+  ...props
+}: TextLinkProps) {
+  return to ? (
+    <Link
+      to={to}
+      className={cn(
+        "text-indigo-500 transition hover:text-indigo-400",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </Link>
+  ) : href ? (
     <a
       href={href}
-      className="text-indigo-500 transition hover:text-indigo-400"
+      className={cn(
+        "text-indigo-500 transition hover:text-indigo-400",
+        className
+      )}
       {...props}
     >
       {children}
     </a>
+  ) : (
+    <span>Need to define a path or href</span>
   );
 }