VSinerva/freesewing
1
0
Fork 0
Code Activity

feat(shared): Popout now takes compact, noP props

Browse source
This commit is contained in:
Joost De Cock 2022-02-19 17:00:46 +01:00
parent 60321d2342
commit daa0c7b488
1 changed files with 54 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,3 +1,6 @@
import { useState } from 'react'
import CloseIcon from 'shared/components/icons/close.js'
const colors = {
comment: 'secondary',
note: 'primary',
@ -25,6 +28,10 @@ forceTailwind += <p className="border-primary bg-primary" />
forceTailwind += <p className="text-primary" />
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
@ -32,22 +39,55 @@ const Popout = (props) => {
const color = colors[type]
const { className=''} = props
return (
<div className={`relative my-8 bg-${color} bg-opacity-5 ${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` }>
<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>
return props.compact
? (
<div className={`relative my-4 bg-${color} bg-opacity-5 ${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 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>
)
)
: (
<div className={`relative my-8 bg-${color} bg-opacity-5 ${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?.noHide && (
<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