feat: added isExternal props to Anchor component

This commit is contained in:
Refansa 2024-08-03 11:53:41 +07:00
parent 5c9bc7d6d7
commit 9071c6994d
2 changed files with 18 additions and 3 deletions

View File

@ -6,12 +6,22 @@ import { HTMLAttributes } from 'react'
export interface Props extends HTMLAttributes<HTMLAnchorElement> { export interface Props extends HTMLAttributes<HTMLAnchorElement> {
href: string | UrlObject href: string | UrlObject
/**
* Whether the type of the anchor is for external or internal links.
*
* @default false
*/
isExternal?: boolean
} }
export default function Anchor({ href, children, ...rest }: Props) { export default function Anchor({ href, isExternal = false, children, ...rest }: Props) {
return ( return !isExternal ? (
<Link className="underline hover:text-foreground/80" href={href} {...rest}> <Link className="underline hover:text-foreground/80" href={href} {...rest}>
{children} {children}
</Link> </Link>
) : (
<a className="underline hover:text-foreground/80" href={href.toString()} {...rest}>
{children}
</a>
) )
} }

View File

@ -1,3 +1,5 @@
'use client'
import Anchor from '@/components/anchor' import Anchor from '@/components/anchor'
import Package from '../../../../package.json' import Package from '../../../../package.json'
@ -6,7 +8,10 @@ export default function Footer() {
<footer className="flex flex-col gap-1 items-center mb-8 text-xs md:text-base"> <footer className="flex flex-col gap-1 items-center mb-8 text-xs md:text-base">
<p className="font-semibold text-center">Site Version: {Package.version}</p> <p className="font-semibold text-center">Site Version: {Package.version}</p>
<p className="font-semibold text-center"> <p className="font-semibold text-center">
Created with by <Anchor href={Package.author.url}>{Package.author.nickname}</Anchor> Created with by{' '}
<Anchor href={Package.author.url} isExternal>
{Package.author.nickname}
</Anchor>
</p> </p>
</footer> </footer>
) )