External Link
外部リンク
External link inline text with Tailwind CSS.
Installation
Before start please make sure you follow instructions1
Copy and paste the following code into a new component file:2
import { HTMLProps, ReactNode } from "react"
import Link from "next/link"
import Link from "next/link"
type ExternalLinkBtnProps = {
children: ReactNode,
href: string;
}
export function ExternalLink({href, children, className, ... props}: HTMLProps<HTMLAnchorElement> & ExternalLinkBtnProps) {
return (
How to use it3
"use client"
import { ExternalLink } from "@/components/externallink"
export default function Page() {
return(
<ExternalLink href="https://twitter.com/guillaume_rygn" target="_b
)
}
Props
ExternalLink
| Name | Default | Description |
|---|---|---|
| children | — | string Content of <a> tag. |
| href | — | string Href of <a> tag. |
| className | underline underline-offset-4 group inline-flex items-center justify-start leading-none group | string The CSS class to be applied to the <a> tag. |
| props | — | HTMLProps<HTMLAnchorElement> Props to be applied to the <a> tag. |