83 lines
2.2 KiB
TypeScript
83 lines
2.2 KiB
TypeScript
import { ReactNode, useEffect, useMemo, useRef } from 'react'
|
|
import { styled } from '../tokens/stitches.config'
|
|
import { Box, HStack, VStack } from './LayoutPrimitives'
|
|
import { Button } from './Button'
|
|
import { Dropdown, DropdownOption } from './DropdownElements'
|
|
import { CaretDownIcon } from './icons/CaretDownIcon'
|
|
|
|
type ShowLinkMode = 'none' | 'link' | 'pdf'
|
|
|
|
type SplitButtonProps = {
|
|
title: string
|
|
setShowLinkMode: (mode: ShowLinkMode) => void
|
|
}
|
|
|
|
const CaretButton = (): JSX.Element => {
|
|
return (
|
|
<VStack
|
|
css={{
|
|
width: '20px',
|
|
height: '100%',
|
|
alignItems: 'center',
|
|
bg: '$ctaBlue',
|
|
border: '0px solid transparent',
|
|
borderTopRightRadius: '5px',
|
|
borderBottomRightRadius: '5px',
|
|
borderTopLeftRadius: '0px',
|
|
borderBottomLeftRadius: '0px',
|
|
'--caret-color': '#EDEDED',
|
|
'&:hover': {
|
|
opacity: 1.0,
|
|
color: 'white',
|
|
'--caret-color': 'white',
|
|
},
|
|
'&:focus': {
|
|
outline: 'none',
|
|
border: '0px solid transparent',
|
|
},
|
|
}}
|
|
>
|
|
<CaretDownIcon size={8} color="var(--caret-color)" />
|
|
</VStack>
|
|
)
|
|
}
|
|
|
|
export const SplitButton = (props: SplitButtonProps): JSX.Element => {
|
|
return (
|
|
<HStack css={{ height: '32px', gap: '1px' }}>
|
|
<Button
|
|
css={{
|
|
display: 'flex',
|
|
// minWidth: '70px',
|
|
bg: '$ctaBlue',
|
|
color: '#EDEDED',
|
|
fontSize: '14px',
|
|
fontFamily: '$inter',
|
|
border: '0px solid transparent',
|
|
borderTopLeftRadius: '5px',
|
|
borderBottomLeftRadius: '5px',
|
|
borderTopRightRadius: '5px',
|
|
borderBottomRightRadius: '5px',
|
|
'&:hover': {
|
|
opacity: 0.6,
|
|
border: '0px solid transparent',
|
|
},
|
|
'&:focus': {
|
|
outline: 'none',
|
|
border: '0px solid transparent',
|
|
},
|
|
}}
|
|
onClick={(event) => {
|
|
props.setShowLinkMode('link')
|
|
event.preventDefault()
|
|
}}
|
|
>
|
|
{props.title}
|
|
</Button>
|
|
{/* <Dropdown triggerElement={<CaretButton />}>
|
|
<DropdownOption onSelect={() => console.log()} title="Archive (e)" />
|
|
</Dropdown> */}
|
|
</HStack>
|
|
)
|
|
}
|