mirror of
https://github.com/tale/headplane.git
synced 2026-07-26 15:58:14 +00:00
Aarnav Tale
25dc09e025
Previously we would use naive revalidators which would invalidate EVERY SINGLE action loader every 3 seconds, resulting in several fetches. It would also bubble fetches across the layout actions into the individual pages. This new approach selectively has live stores of resources which then poll for changes on the server side and then dispatches updates to the client via a new /events/live SSE endpoint.
50 lines
1.1 KiB
TypeScript
50 lines
1.1 KiB
TypeScript
import { ExternalLink } from "lucide-react";
|
|
import type { JSX, ReactNode } from "react";
|
|
import { Link as RouterLink } from "react-router";
|
|
|
|
import cn from "~/utils/cn";
|
|
|
|
export type LinkProps =
|
|
| {
|
|
external: true;
|
|
to: string;
|
|
children: ReactNode;
|
|
className?: string;
|
|
styled?: boolean;
|
|
}
|
|
| {
|
|
external?: false;
|
|
to: string;
|
|
children?: ReactNode;
|
|
className?: string;
|
|
};
|
|
|
|
export default function Link(props: LinkProps): JSX.Element {
|
|
if (props.external) {
|
|
return (
|
|
<a
|
|
href={props.to}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className={cn(
|
|
props.styled && [
|
|
"inline-flex items-center gap-x-0.5",
|
|
"text-blue-500 hover:text-blue-700",
|
|
"dark:text-blue-400 dark:hover:text-blue-300",
|
|
],
|
|
props.className,
|
|
)}
|
|
>
|
|
{props.children}
|
|
{props.styled && <ExternalLink className="w-3.5" />}
|
|
</a>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<RouterLink to={props.to} prefetch="intent" className={props.className}>
|
|
{props.children}
|
|
</RouterLink>
|
|
);
|
|
}
|