fix bind classes

vorant94 · May 5, 2024 · 49b8a0f · 49b8a0f
1 parent 7484a9b
commit 49b8a0f
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/packages/blog/src/ui/components/Link.tsx b/packages/blog/src/ui/components/Link.tsx
@@ -11,12 +11,14 @@ export const Link: FC<PropsWithChildren<LinkProps>> = function ({
   className,
   children,
   href,
+  bindClass = '',
   ...rest
 }) {
   return (
     <a
-      x-data={`{ link: "${href && isInternalUrl(href) ? href : ''}" }`}
-      x-on:mouseenter="$store.prefetchedLinks.prefetchLink(link)"
+      x-data={`{href: '${href}'}`}
+      x-on:mouseenter={`$store.prefetchedLinks.prefetchLink("${href && isInternalUrl(href) ? href : ''}")`}
+      x-bind:class={bindClass}
       className={cn(
         'text-slate-500 decoration-cyan-500 decoration-dotted decoration-4 underline-offset-4 hover:text-cyan-500 hover:underline group-hover:text-cyan-500 group-hover:underline',
         linkSizeToStyles[size],
@@ -31,6 +33,7 @@ export const Link: FC<PropsWithChildren<LinkProps>> = function ({
 
 export interface LinkProps extends ComponentPropsWithoutRef<'a'> {
   size?: LinkSize;
+  bindClass?: string;
 }
 
 export const linkSizes = ['sm', 'md'] as const;

diff --git a/packages/blog/src/ui/layouts/DefaultLayout.tsx b/packages/blog/src/ui/layouts/DefaultLayout.tsx
@@ -200,13 +200,12 @@ const NavLink: FC<PropsWithChildren<NavLinkProps>> = function ({
   return (
     <li>
       <Link
-        x-data={`{href: '${href}'}`}
-        x-bind:class={`window.location.pathname.startsWith(href) && 'underline !text-cyan-500'`}
         href={href}
         className={cn(
           'font-semibold block text-center text-2xl p-3 md:p-4 rounded-full border-2 bg-slate-50 dark:bg-slate-900 border-slate-300 dark:border-slate-600 lg:text-sm lg:p-0 lg:bg-none dark:lg:bg-none lg:rounded-none lg:border-none',
           className,
         )}
+        bindClass={`window.location.pathname.startsWith(href) && 'underline !text-cyan-500'`}
         {...rest}>
         {children}
       </Link>