109 lines
3.6 KiB
JavaScript
109 lines
3.6 KiB
JavaScript
import React from 'react'
|
|
import { linkClasses } from '@freesewing/utils'
|
|
|
|
/**
|
|
* An anchor link component
|
|
*
|
|
* @component
|
|
* @param {object} props - All component props
|
|
* @param {JSX.Element} props.children - The component children, will be rendered inside the link
|
|
* @param {string} [props.id = ''] - The ID of the anchor to link to
|
|
* @param {string} [props.title = false] - An optional link title
|
|
* @returns {JSX.Element}
|
|
*/
|
|
export const AnchorLink = ({ children, id = '', title = false }) => (
|
|
<a href={`#${id}`} className={linkClasses} title={title ? title : ''}>
|
|
{children}
|
|
</a>
|
|
)
|
|
|
|
/**
|
|
* A regular link component
|
|
*
|
|
* @component
|
|
* @param {object} props - All component props
|
|
* @param {JSX.Element} props.children - The component children, will be rendered inside the link
|
|
* @param {string} [props.className = @freesewing/utils/linkClasses] - Any non-default CSS classes to apply
|
|
* @param {string} props.href - The URL to link to
|
|
* @param {object} [props.style = {}] - Any non-default styles to apply
|
|
* @param {string} [props.target = undefined] - An optional link title
|
|
* @param {string} [props.title = false] - An optional link title
|
|
* @returns {JSX.Element}
|
|
*/
|
|
export const Link = ({
|
|
children,
|
|
className = linkClasses,
|
|
href,
|
|
style = {},
|
|
target,
|
|
title = false,
|
|
}) => (
|
|
<a href={href} target={target} className={className} title={title ? title : ''} style={style}>
|
|
{children}
|
|
</a>
|
|
)
|
|
|
|
const BaseLink = Link
|
|
|
|
/**
|
|
* A regular link, but intended to be used on a success background
|
|
*
|
|
* @component
|
|
* @param {object} props - All component props
|
|
* @param {JSX.Element} props.children - The component children, will be rendered inside the link
|
|
* @param {string} props.href - The URL to link to
|
|
* @param {string} [props.target = undefined] - An optional link title
|
|
* @param {string} [props.title = false] - An optional link title
|
|
* @param {React.FC} [Link = undefined] - An optional framework-specific Link component
|
|
* @returns {JSX.Element}
|
|
*/
|
|
export const SuccessLink = ({
|
|
children,
|
|
href,
|
|
target,
|
|
title = false,
|
|
Link,
|
|
}) => (
|
|
<a href={href} className={linkClasses} title={title ? title : ''}>
|
|
<span className="tw:text-success-content tw:hover:text-success-content">{children}</span>
|
|
</a>
|
|
)
|
|
|
|
/**
|
|
* A link styled as a card
|
|
*
|
|
* @component
|
|
* @param {object} props - All component props
|
|
* @param {JSX.Element} props.children - The component children, will be rendered inside the link
|
|
* @param {string} [props.className = @freesewing/utils/linkClasses + "tw:text-success-content tw:hover:text-success-content"] - Any non-default CSS classes to apply
|
|
* @param {string} props.href - The URL to link to
|
|
* @param {string} [props.title = false] - An optional link title
|
|
* @param {JSX.Element} props.icon - An icon to render
|
|
* @param {React.FC} [Link = undefined] - An optional framework-specific Link component
|
|
* @returns {JSX.Element}
|
|
*/
|
|
export const CardLink = ({
|
|
children,
|
|
className = 'tw:bg-base-200 tw:text-base-content',
|
|
href,
|
|
title,
|
|
icon,
|
|
Link,
|
|
}) => {
|
|
if (!Link) Link = BaseLink
|
|
|
|
return (
|
|
<Link
|
|
href={href}
|
|
className={`tw:px-8 tw:py-10 tw:rounded-lg tw:block ${className}
|
|
tw:hover:bg-secondary/5 tw:shadow-lg tw:bg-base-200
|
|
tw:transition-color tw:duration-300 grow tw:hover:no-underline no-hover-decoration`}
|
|
>
|
|
<h2 className="tw:mb-4 tw:text-base-content tw:flex tw:flex-row tw:gap-4 tw:justify-between tw:items-center">
|
|
<span className="tw:text-base-content">{title}</span>
|
|
<span className="tw:shrink-0 tw:text-base-content">{icon}</span>
|
|
</h2>
|
|
<div className="tw:text-base-content">{children}</div>
|
|
</Link>
|
|
)
|
|
}
|