mirror of
https://github.com/Sonny93/my-links.git
synced 2025-12-11 08:43:04 +00:00
feat: update default layout
This commit is contained in:
28
inertia/components/common/links/external_link_styled.tsx
Normal file
28
inertia/components/common/links/external_link_styled.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import { Anchor } from '@mantine/core';
|
||||
import { AnchorHTMLAttributes, CSSProperties, ReactNode } from 'react';
|
||||
|
||||
interface ExternalLinkStyledProps
|
||||
extends AnchorHTMLAttributes<HTMLAnchorElement> {
|
||||
children: ReactNode;
|
||||
style?: CSSProperties;
|
||||
title?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const ExternalLinkStyled = ({
|
||||
children,
|
||||
title,
|
||||
href,
|
||||
...props
|
||||
}: ExternalLinkStyledProps) => (
|
||||
<Anchor<'a'>
|
||||
component="a"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
title={title}
|
||||
href={href}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</Anchor>
|
||||
);
|
||||
26
inertia/components/common/links/external_link_unstyled.tsx
Normal file
26
inertia/components/common/links/external_link_unstyled.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import { Anchor, CSSProperties } from '@mantine/core';
|
||||
import { AnchorHTMLAttributes, ReactNode } from 'react';
|
||||
|
||||
interface ExternalLinkUnstyledProps
|
||||
extends AnchorHTMLAttributes<HTMLAnchorElement> {
|
||||
children: ReactNode;
|
||||
style?: CSSProperties;
|
||||
title?: string;
|
||||
className?: string;
|
||||
newTab?: boolean;
|
||||
}
|
||||
export const ExternalLinkUnstyled = ({
|
||||
children,
|
||||
newTab = true,
|
||||
...props
|
||||
}: ExternalLinkUnstyledProps) => (
|
||||
<Anchor
|
||||
component="a"
|
||||
target={newTab ? '_blank' : undefined}
|
||||
rel="noreferrer"
|
||||
{...props}
|
||||
style={{ ...props.style, textDecoration: 'none' }}
|
||||
>
|
||||
{children}
|
||||
</Anchor>
|
||||
);
|
||||
50
inertia/components/common/links/internal_link.tsx
Normal file
50
inertia/components/common/links/internal_link.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import { ApiRouteName } from '#shared/types/index';
|
||||
import { Link } from '@inertiajs/react';
|
||||
import { Anchor } from '@mantine/core';
|
||||
import { useTuyau } from '@tuyau/inertia/react';
|
||||
import { CSSProperties } from 'react';
|
||||
|
||||
interface InternalLinkProps {
|
||||
children: React.ReactNode;
|
||||
onClick?: (event: React.MouseEvent<any>) => void;
|
||||
route?: ApiRouteName;
|
||||
href?: string;
|
||||
forceRefresh?: boolean;
|
||||
style?: CSSProperties;
|
||||
className?: string;
|
||||
params?: Record<string, string>;
|
||||
}
|
||||
|
||||
export const InternalLink = ({
|
||||
children,
|
||||
onClick,
|
||||
route,
|
||||
href,
|
||||
forceRefresh,
|
||||
style,
|
||||
className,
|
||||
params,
|
||||
}: InternalLinkProps) => {
|
||||
const tuyau = useTuyau();
|
||||
|
||||
if ((!route && !href) || !tuyau) {
|
||||
throw new Error('InternalLink: route, href or tuyau is missing');
|
||||
}
|
||||
|
||||
const url = route ? tuyau.$route(route, params).path : href;
|
||||
if (!url) {
|
||||
throw new Error('InternalLink: url not found');
|
||||
}
|
||||
|
||||
return (
|
||||
<Anchor<'a' | typeof Link>
|
||||
component={forceRefresh ? 'a' : Link}
|
||||
href={url}
|
||||
style={style}
|
||||
onClick={onClick}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</Anchor>
|
||||
);
|
||||
};
|
||||
61
inertia/components/common/links/internal_link_unstyled.tsx
Normal file
61
inertia/components/common/links/internal_link_unstyled.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
import { ApiRouteName } from '#shared/types/index';
|
||||
import { Link } from '@inertiajs/react';
|
||||
import { useTuyau } from '@tuyau/inertia/react';
|
||||
import { CSSProperties } from 'react';
|
||||
|
||||
interface InternalLinkProps {
|
||||
children: React.ReactNode;
|
||||
onClick?: (event: React.MouseEvent<any>) => void;
|
||||
route?: ApiRouteName;
|
||||
href?: string;
|
||||
forceRefresh?: boolean;
|
||||
style?: CSSProperties;
|
||||
className?: string;
|
||||
params?: Record<string, string>;
|
||||
}
|
||||
|
||||
export const InternalLinkUnstyled = ({
|
||||
children,
|
||||
onClick,
|
||||
route,
|
||||
href,
|
||||
forceRefresh,
|
||||
style,
|
||||
className,
|
||||
params,
|
||||
}: InternalLinkProps) => {
|
||||
const tuyau = useTuyau();
|
||||
|
||||
if ((!route && !href) || !tuyau) {
|
||||
throw new Error('InternalLink: route, href or tuyau is missing');
|
||||
}
|
||||
|
||||
const url = route ? tuyau.$route(route, params).path : href;
|
||||
if (!url) {
|
||||
throw new Error('InternalLink: url not found');
|
||||
}
|
||||
|
||||
if (forceRefresh) {
|
||||
return (
|
||||
<a
|
||||
href={url}
|
||||
style={{ ...style, textDecoration: 'none' }}
|
||||
onClick={onClick}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Link
|
||||
href={url}
|
||||
style={{ ...style, textDecoration: 'none' }}
|
||||
onClick={onClick}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user