VSinerva/freesewing
1
0
Fork 0
Code Activity

feat(fs.shared): Added comment popout

Browse source
This commit is contained in:
Joost De Cock 2021-12-28 12:24:24 +01:00
parent cbc9571b8d
commit c0af5c37d3
2 changed files with 10 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

1
packages/freesewing.shared/components/mdx/index.js
View file

@ -17,6 +17,7 @@ const mdxCustomComponents = (app) => ({
{...props}
patterns={{examples, rendertest, tutorial}}
>{props.children}</Example>,
Comment: props => <Popout {...props} comment />,
Fixme: props => <Popout {...props} fixme />,
Link: props => <Popout {...props} link />,
Note: props => <Popout {...props} note />,

12
packages/freesewing.shared/components/popout.js
View file

@ -1,4 +1,5 @@
const colors = {
comment: 'secondary',
note: 'primary',
tip: 'accent',
warning: 'error',
@ -33,11 +34,16 @@ const Popout = (props) => {
return (
<div className={`relative my-8 bg-${color} bg-opacity-5`}>
<div className={`
border-y-4 sm:border-0 sm:border-l-4 px-6 sm:px-8 py-4 sm:py-2 shadow border-${color}`}>
<div className={`font-bold uppercase text-${color}`}>
{type}
border-y-4 sm:border-0 sm:border-l-4 px-6 sm:px-8 py-4 sm:py-2 shadow text-base border-${color}`}>
<div className={`font-bold flex flex-row gap-1 items-end` }>
<span className={`font-bold uppercase text-${color}`}>{type}</span>
<span className={`font-normal text-base text-${color}`}>
{type === 'comment' && <> by <b>{props.by}</b></>}</span>
</div>
<div className="py-1 first:mt-0 popout-content">{props.children}</div>
{type === 'comment' && (
<div className={`font-bold italic text-${color}`}>{props.by}</div>
)}
</div>
</div>
)