44e04a4cef
Also fixes #251 Reviewed-on: https://codeberg.org/freesewing/freesewing/pulls/263 Co-authored-by: joostdecock <joost@joost.at> Co-committed-by: joostdecock <joost@joost.at>
108 lines
3.5 KiB
JavaScript
108 lines
3.5 KiB
JavaScript
import React, { useState } from 'react'
|
|
import { CloseIcon } from '@freesewing/react/components/Icon'
|
|
|
|
const colors = {
|
|
comment: 'secondary',
|
|
error: 'error',
|
|
fixme: 'warning',
|
|
link: 'secondary',
|
|
none: '',
|
|
note: 'primary',
|
|
related: 'info',
|
|
tip: 'accent',
|
|
tldr: 'info',
|
|
warning: 'error',
|
|
}
|
|
|
|
/**
|
|
* This popout component is a way to make some content stand out
|
|
*
|
|
* @param {object} props - All React props
|
|
* @param {object} props.comment - Set this to make it a comment popout
|
|
* @param {object} props.error - Set this to make it a error popout
|
|
* @param {object} props.fixme - Set this to make it a fixme popout
|
|
* @param {object} props.link - Set this to make it a link popout
|
|
* @param {object} props.note - Set this to make it a note popout
|
|
* @param {object} props.related - Set this to make it a related popout
|
|
* @param {object} props.tip - Set this to make it a tip popout
|
|
* @param {object} props.tldr - Set this to make it a tldr popout
|
|
* @param {object} props.warning - Set this to make it a warning popout
|
|
* @param {string} props.title - The popout title
|
|
* @param {string} noP - Do not wrap the content in a p tag
|
|
*/
|
|
export const Popout = (props) => {
|
|
// Make this hideable/dismissable
|
|
const [hide, setHide] = useState(false)
|
|
if (hide) return null
|
|
|
|
let type = 'none'
|
|
for (const c in colors) {
|
|
if (props[c]) type = c
|
|
}
|
|
const color = colors[type]
|
|
const { className = '' } = props
|
|
|
|
return props.compact ? (
|
|
<div
|
|
className={`tw:relative ${
|
|
props.dense ? 'tw:my-1' : 'tw:my-8'
|
|
} tw:bg-${color}/5 tw:-ml-4 tw:-mr-4 tw:sm:ml-0 tw:sm:mr-0 ${className}`}
|
|
>
|
|
<div
|
|
className={`
|
|
tw:border-y-4 tw:sm:border-0 tw:sm:border-l-4 tw:px-4
|
|
tw:shadow tw:text-base border-${color}
|
|
tw:flex tw:flex-row tw:items-center
|
|
`}
|
|
>
|
|
<div className={`tw:font-bold tw:uppercase tw:text-${color}`}>
|
|
{props.title || (
|
|
<>
|
|
<span>{type.toUpperCase()}</span>
|
|
<span className="tw:px-3">|</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
<div className="popout-content">{props.noP ? props.children : <p>{props.children}</p>}</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div
|
|
className={`tw:relative tw:my-8 tw:bg-${color}/5 tw:-ml-4 tw:-mr-4 tw:sm:ml-0 tw:sm:mr-0 ${className}`}
|
|
>
|
|
<div
|
|
className={`
|
|
tw:border-y-4 tw:border-x-0 tw:sm:border-0 tw:sm:border-l-4 tw:px-6 tw:sm:px-8 tw:py-4 tw:sm:py-2
|
|
tw:shadow tw:text-base tw:border-${color} tw:border-solid
|
|
`}
|
|
>
|
|
<div
|
|
className={`tw:font-bold tw:flex tw:flex-row tw:gap-1 tw:items-end tw:justify-between`}
|
|
>
|
|
<div>
|
|
<span className={`tw:font-bold tw:uppercase tw:text-${color}`}>
|
|
{props.title ? props.title : type === 'tldr' ? 'TL;DR' : type.toUpperCase()}
|
|
</span>
|
|
<span className={`tw:font-normal tw:text-base text-${color}`}>
|
|
{type === 'tw:comment' && (
|
|
<>
|
|
{' '}
|
|
by <b>{props.by}</b>
|
|
</>
|
|
)}
|
|
</span>
|
|
</div>
|
|
{props.hideable && (
|
|
<button onClick={() => setHide(true)} className="tw:hover:text-secondary" title="Close">
|
|
<CloseIcon />
|
|
</button>
|
|
)}
|
|
</div>
|
|
<div className="tw:py-1 tw:first:mt-0 tw:popout-content">{props.children}</div>
|
|
{type === 'comment' && (
|
|
<div className={`tw:font-bold tw:italic text-${color}`}>{props.by}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|