\n \n
\n \n \n {title && (\n
\n \n {title} \n\n \n \n
\n )}\n {renderHeader && {renderHeader()}
}\n {children}\n closeOnMouseLeave && setIsOpen(false)}>\n {renderTarget()}\n \n \n {content()}\n \n \n
\n );\n};\n","import React, { Children } from 'react';\nimport { usePopper } from 'react-popper';\nimport styled from 'styled-components';\nimport PopperJS from '@popperjs/core';\n\nconst Inner = styled.div<{ isOpen: boolean; placement: PopperJS.Placement }>`\n display: flex;\n flex-direction: column;\n background-color: ${(props) => props.theme.colors.label};\n color: ${(props) => props.theme.colors.onLabel};\n padding: 0.5rem;\n border-radius: 0.5rem;\n box-shadow: 0 0.3px 0.3px -4px rgba(0, 0, 0, 0.081), 0 1.1px 2px -4px rgba(0, 0, 0, 0.119),\n 0 5px 10px -4px rgba(0, 0, 0, 0.2);\n\n transform: scale(0.8);\n transform-origin: center;\n opacity: 0;\n transition: 0.2s cubic-bezier(0.45, 0, 0.21, 1);\n\n ${(props) =>\n props.isOpen &&\n `\n transform: scale(1);\n opacity: 1;\n `}\n`;\n\ntype Props = {\n content: React.ReactNode;\n children: React.ReactElement setIsOpen(false)}>\n {renderTarget()}\n\n
\n );\n};\n","import React from 'react';\nimport styled, { StyledComponent } from 'styled-components';\n\ninterface IListComposition {\n Item: StyledComponent<'li', any, {}, never>;\n}\n\nconst OrderdList = styled.ol``;\n\nconst UnorderdList = styled.ul``;\n\ntype UnorderdListProps = { type: 'unorderd' };\ntype OrderdListProps = { type: 'orderd' };\n\ntype Props = UnorderdListProps | OrderdListProps;\n\nconst List: React.FC\n \n {content}\n \n
\n \n {name}\n
\n ) : (\n \n {image ? 
: initials(name.replace(' (Gast)', ''))}\n
\n )}\n {`${formatNumber('nl-NL', slotsFilled / 2)} / ${formatNumber('nl-NL', slots / 2)}`}
\n )}\n \n ) : (\n <>\n \n {additional <= 0 &&\n avatars.map((avatar, index) => {\n return (\n {avatar.name}} key={index}>\n \n \n \n );\n })}\n\n {additional > 0 && (\n <>\n {avatars.slice(0, avatars.length - additional).map((avatar, index) => (\n {avatar.name}} key={index}>\n \n \n \n ))}\n \n \n \n \n )}\n
\n );\n};\n\nexport default AvatarGroup;\n","import React, { Key } from 'react';\nimport styled, { css } from 'styled-components';\nimport { ElevatedCard, Heading, Label } from '../../ui';\nimport { ProgressRing } from '../../ui';\nimport { PlanningUser } from '../../global';\nimport DefaultAvatarGroup from '../AvatarGroup';\nimport { Today } from '@styled-icons/material-outlined';\n\nconst Card = styled(ElevatedCard)<{ highlighted: boolean; isFull?: boolean }>`\n display: flex;\n flex-direction: column;\n align-items: stretch;\n padding: 2rem;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n text-align: left;\n\n .holidayName {\n background: ${(props) => props.theme.colors.primary + '33'};\n color: ${(props) => props.theme.colors.primary};\n font-size: 0.7em;\n font-weight: lighter;\n padding: 0.2em 0.5em;\n border-radius: 0.5em;\n }\n\n ${(props) =>\n props.isFull &&\n !props.highlighted &&\n css`\n z-index: 0;\n &:after {\n content: '';\n position: absolute;\n inset: 0;\n background: ${(props) => props.theme.colors.faded + '20'};\n border: 1px solid ${(props) => props.theme.colors.muted};\n border-radius: 1.5rem;\n z-index: -1;\n }\n `};\n\n ${(props) =>\n props.highlighted &&\n css`\n z-index: 0;\n &:after {\n content: '';\n position: absolute;\n inset: 0;\n background: ${(props) => props.theme.colors.primary + '20'};\n z-index: -1;\n border: 1px solid ${(props) => props.theme.colors.primary};\n border-radius: 1.5rem;\n }\n `};\n\n h4 {\n margin-bottom: 0.5rem;\n max-width: calc(100% - 5rem);\n display: flex;\n flex-wrap: wrap;\n gap: 0 0.5rem;\n align-items: center;\n }\n`;\n\nconst AvatarGroup = styled(DefaultAvatarGroup)`\n margin-top: 1rem;\n max-width: 100%;\n`;\n\nconst CardPlanning = styled(Label).attrs((props) => ({ type: 'muted' }))`\n display: flex;\n align-items: center;\n margin-bottom: 0.25rem;\n font-weight: 300;\n font-size: 0.875rem;\n color: ${(props) => props.theme.colors.label};\n\n svg {\n width: 1em;\n margin-right: 0.5rem;\n }\n`;\n\nconst CardRing = styled.div`\n display: flex;\n align-items: center;\n position: absolute;\n right: 2rem;\n top: 2rem;\n margin-top: -0.25rem;\n margin-right: -0.375rem;\n`;\n\nconst ReservationListItem = styled.li`\n list-style: none;\n > button {\n width: 100%;\n height: 100%;\n }\n`;\n\nexport type ReservationCardProps = {\n title: string;\n subtitle?: string;\n planningTitle?: string;\n users: PlanningUser[];\n slots: number;\n slotsFilled: number;\n onClick: () => void;\n className?: string;\n highlighted?: boolean;\n holidays?: moment.Holiday[];\n asListItem?: boolean;\n};\n\nconst ReservationCard: React.FC\n \n \n
\n \n onUpdate(Appearance.Light)}\n />\n \n
\n\n \n onUpdate(Appearance.Dark)}\n />\n \n
\n \n onUpdate(Appearance.System)}\n />\n \n
\n \n
\n \n {location.name} \n editLocation(location)} remove={() => removeLocation(location)} />}\n >\n \n \n \n
\n\n {location.offices.length > 0 ? (\n location.offices.map((office, index) => (\n \n
\n\n setReferenceElement(ref)}>\n setIsActive(!isActive)} className={selectedOption ? 'hasValue' : ''}>\n {selectedOption && items !== undefined\n ? items.find((search) => search.id === selectedOption)?.value\n : filterName}{' '}\n {selectedOption == null ? (\n {\n e.stopPropagation();\n setSelectedOption(null);\n handleAppliedFilter(null);\n }}\n />\n )}\n \n
\n\n \n \n
\n - \n
\n
\n \n \n
\n );\n };\n\n return (\n - \n {users.map((user, index) => (\n
- \n
\n \n \n ))}\n
\n
\n \n Snel gasten toevoegen... {links}\n
\n \n {planningPopup.guests.map((item, index) => {\n return (\n = maxGuests)}\n allowDelete={!(index === 0 && planningPopup.guests.length <= 1)}\n handleUpdateGuest={(updatedGuest: Guest) => updateGuest(index, updatedGuest)}\n handleDeleteGuest={() => deleteGuest(index)}\n emailIsDuplicate={\n planningPopup.guests.reduce(\n (count, guest) => (guest.email === item.email && item.email !== '' ? count + 1 : count),\n 0,\n ) > 1\n }\n />\n );\n })}\n
\n \n
\n )}\n >\n Deskie
\n{actionButton && actionButton}
\n \n
\n {description && description.length > 0 && \n {title} \n
\n \n {description}
}\n {notes && notes.length > 0 && (\n \n Updates \n
\n )}\n {bugfixes && bugfixes.length > 0 && (\n - \n {notes.map((note, index) => (\n
- {note} \n ))}\n
\n Bugfixes \n
\n )}\n - \n {bugfixes.map((bugfix, index) => (\n
- {bugfix} \n ))}\n
\n
\n )}\n >\n Wij zijn bereikbaar op de volgende kanalen voor hulp en/of feedback:
\n- \n
- \n \n
\n info@deskie.nl\n \n \n - \n \n
\n 038 760 1066\n (09:00 - 17:00)\n \n \n
404
\n {message}
: { message }}\n {actionLabel && action &&Eerste maand gratis
}\n \n \n {isSelectable ? (\n
\n {bullets && (\n
\n \n {isSelectable ? (\n onClick()} />\n ) : (\n title\n )}\n
\n {bullets && (\n - \n {bullets.map((item, index) => (\n
- \n
\n {item}\n \n ))}\n
\n {cost && {cost}}\n {showNote && Per gebruiker (excl. BTW)}\n {!isSelectable && (\n <>\n {isTryable ? (\n \n Aan de slag\n \n ) : (\n \n Contact\n \n )}\n \n )}\n
\n Met de app kun je eenvoudig vanaf jouw beginscherm reserveringen maken en inzien.
\n{children}
\n