danabra.mov
forked from
slices.network/slices
Highly ambitious ATProtocol AppView service and sdks
chadtmiller.com
consistent styling across the board, more shared components, oauth form bug fixes, dark mode support, and stuff
1import type { JSX, ComponentChildren } from "preact";
2import { cn } from "../../utils/cn.ts";
3
4type LinkVariant =
5 | "default" // Standard link styling
6 | "muted" // Subtle link styling
7 | "inherit" // Inherit text color from parent
8 | "button"; // Button-like link styling
9
10interface LinkProps {
11 variant?: LinkVariant;
12 className?: string;
13 children: ComponentChildren;
14 href: string;
15}
16
17// Centralized link styles
18const linkVariants = {
19 default: "text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 hover:underline underline-offset-2 decoration-current",
20 muted: "text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white hover:underline underline-offset-2 decoration-current",
21 inherit: "hover:underline underline-offset-2 decoration-current",
22 button: "inline-flex items-center px-3 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-md transition-colors",
23};
24
25export function Link({
26 variant = "default",
27 className,
28 children,
29 href,
30 ...props
31}: LinkProps & Omit<JSX.AnchorHTMLAttributes<HTMLAnchorElement>, 'children' | 'href'>): JSX.Element {
32 const classes = cn(
33 linkVariants[variant],
34 className
35 );
36
37 return (
38 <a href={href} className={classes} {...props}>
39 {children}
40 </a>
41 );
42}