Link

import { Link } from "@/components/jk/link"


export const LinkDemo = () => {
    return (
        <div className="flex flex-col gap-3">
            <div>
                <Link underlined href="#" className="text-fg hover:text-fg-title">
                    Profile Page
                </Link>
            </div>
            <div>
                <Link underlined underline-offset="2" href="#" className="text-fg hover:text-fg-title">
                    Undeline Offset
                </Link>
            </div>
            <div>
                <Link underlined underline-offset="2" href="#" className="text-success hover:text-fg-title decoration-success hover:decoration-fg-title">
                    Undeline colored
                </Link>
            </div>
        </div>
    )
}

import { Link } from "@/components/jk/link"


export const LinkWithIcon = () => {
    return (
        <div className="flex flex-col gap-3">
            <div>
                <Link underlined href="#" className="text-fg hover:text-fg-title flex items-center gap-x-2.5">
                    <span aria-hidden="true" className="flex iconify ph--caret-left text-sm"></span>
                    Go Back
                </Link>
            </div>
            <div>
                <Link underlined underline-offset="2" href="#" className="text-fg hover:text-fg-title flex items-center gap-x-2.5">
                    <span aria-hidden="true" className="flex iconify ph--caret-left text-sm"></span>
                    Back To Profile
                </Link>
            </div>
            <div>
                <Link href="#" className="text-success hover:text-fg-title  flex items-center gap-x-2.5">
                    <span aria-hidden="true" className="flex iconify ph--house-line text-sm"></span>
                    Home Page
                </Link>
            </div>
        </div>
    )
}

import { Link } from "@/components/jk/link"


export const LinkButton = () => {
    return (
        <div className="flex flex-wrap gap-3">
            <Link href="#" asButton className="transition-colors ease-linear">
                Click me
            </Link>
            <Link href="#" asButton intent="solid-neutral" className="gap-x-2.5">
                Click me
                <span aria-hidden="true" className="flex iconify ph--caret-right text-sm"></span>
            </Link>
        </div>
    )
}