36da79afb6
Various fixes for the measurement view and editor: - Translate measurements in the measurement set view and align the measurements table properly - Display a question mark next to the measurements that links to the corresponding docs page This fixes a part of #226 Reviewed-on: https://codeberg.org/freesewing/freesewing/pulls/233 Reviewed-by: Joost De Cock <joostdecock@noreply.codeberg.org> Co-authored-by: Jonathan Haas <haasjona@gmail.com> Co-committed-by: Jonathan Haas <haasjona@gmail.com>
89 lines
2.5 KiB
JavaScript
89 lines
2.5 KiB
JavaScript
import React from 'react'
|
|
import { linkClasses } from '@freesewing/utils'
|
|
|
|
/**
|
|
* An anchor link component
|
|
*
|
|
* @param {object} props - All React props
|
|
* @param {array} props.children - The content to go in the layout
|
|
* @param {array} props.id - The ID of the anchor to link to
|
|
* @param {array} props.title - An optional link title
|
|
*/
|
|
export const AnchorLink = ({ children, id = '', title = false }) => (
|
|
<a href={`#${id}`} className={linkClasses} title={title ? title : ''}>
|
|
{children}
|
|
</a>
|
|
)
|
|
|
|
/**
|
|
* A regular link component
|
|
*
|
|
* @param {object} props - All React props
|
|
* @param {array} props.children - The content to go in the layout
|
|
* @param {array} props.href - The target to link to
|
|
* @param {array} props.title - An optional link title
|
|
* @param {string} props.className - Any non-default CSS classes to apply
|
|
* @param {string} props.style - Any non-default styles to apply
|
|
*/
|
|
export const Link = ({
|
|
href,
|
|
title = false,
|
|
children,
|
|
className = linkClasses,
|
|
target,
|
|
style = {},
|
|
}) => (
|
|
<a href={href} target={target} className={className} title={title ? title : ''} style={style}>
|
|
{children}
|
|
</a>
|
|
)
|
|
|
|
const BaseLink = Link
|
|
|
|
/**
|
|
* A regular link, but on a success background
|
|
*
|
|
* @param {object} props - All React props
|
|
* @param {array} props.children - The content to go in the layout
|
|
* @param {array} props.href - The target to link to
|
|
* @param {array} props.title - An optional link title
|
|
* @param {string} props.className - Any non-default CSS classes to apply
|
|
* @param {string} props.style - Any non-default styles to apply
|
|
*/
|
|
export const SuccessLink = ({
|
|
href,
|
|
title = false,
|
|
children,
|
|
className = `${linkClasses} tw-text-success-content hover:tw-text-success-content`,
|
|
style = {},
|
|
}) => (
|
|
<a href={href} className={className} title={title ? title : ''} style={style}>
|
|
{children}
|
|
</a>
|
|
)
|
|
|
|
export const CardLink = ({
|
|
href,
|
|
title,
|
|
icon,
|
|
children,
|
|
Link,
|
|
className = 'tw-bg-base-200 tw-text-base-content',
|
|
}) => {
|
|
if (!Link) Link = BaseLink
|
|
|
|
return (
|
|
<Link
|
|
href={href}
|
|
className={`tw-px-8 tw-py-10 tw-rounded-lg tw-block ${className}
|
|
hover:tw-bg-secondary hover:tw-bg-opacity-10 tw-shadow-lg
|
|
tw-transition-color tw-duration-300 grow hover:tw-no-underline hover:tw-text-base-content`}
|
|
>
|
|
<h2 className="tw-mb-4 tw-text-inherit tw-flex tw-flex-row tw-gap-4 tw-justify-between tw-items-center">
|
|
{title}
|
|
<span className="tw-shrink-0">{icon}</span>
|
|
</h2>
|
|
{children}
|
|
</Link>
|
|
)
|
|
}
|