VSinerva/freesewing
1
0
Fork 0
Code Activity

feat(org): Ported components to mjs and named exports

Browse source
This commit is contained in:
joostdecock 2023-01-29 16:44:02 +01:00
parent 37f7833983
commit 595417a23b
118 changed files with 836 additions and 852 deletions
Download patch file Download diff file Expand all files Collapse all files

79
sites/shared/components/popout.js
View file

@ -1,79 +0,0 @@
import { useState } from 'react'
import { CloseIcon } from 'shared/components/icons.mjs'
const colors = {
comment: 'secondary',
note: 'primary',
tip: 'accent',
warning: 'error',
fixme: 'warning',
link: 'secondary',
related: 'info',
none: '',
}
const Popout = (props) => {
const [hide, setHide] = useState(false)
if (hide) return null
let type = 'none'
for (const t in colors) {
if (props[t]) type = t
}
const color = colors[type]
const { className = '' } = props
return props.compact ? (
<div
className={`relative my-8 bg-${color} bg-opacity-5 -ml-4 -mr-4 sm:ml-0 sm:mr-0 ${className}`}
>
<div
className={`
border-y-4 sm:border-0 sm:border-l-4 px-4
shadow text-base border-${color}
flex flex-row items-center
`}
>
<div className={`font-bold uppercase text-${color}`}>
<span>{type}</span>
<span className="px-3">|</span>
</div>
<div className="popout-content">{props.noP ? props.children : <p>{props.children}</p>}</div>
</div>
</div>
) : (
<div
className={`relative my-8 bg-${color} bg-opacity-5 -ml-4 -mr-4 sm:ml-0 sm:mr-0 ${className}`}
>
<div
className={`
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 justify-between`}>
<div>
<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>
{props.hideable && (
<button onClick={() => setHide(true)} className="hover:text-secondary" title="Close">
<CloseIcon />
</button>
)}
</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>
)
}
export default Popout