72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
import { useCallback } from 'react'
|
|
import { Highlight } from '../../../lib/networking/fragments/highlightFragment'
|
|
import { ReadableItem } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
|
|
import {
|
|
UserBasicData,
|
|
useGetViewerQuery,
|
|
} from '../../../lib/networking/queries/useGetViewerQuery'
|
|
import { CloseButton } from '../../elements/CloseButton'
|
|
import { Dropdown, DropdownOption } from '../../elements/DropdownElements'
|
|
import { HStack } from '../../elements/LayoutPrimitives'
|
|
import { MenuTrigger } from '../../elements/MenuTrigger'
|
|
import { StyledText } from '../../elements/StyledText'
|
|
import { NotebookModal } from './NotebookModal'
|
|
|
|
type NotebookHeaderProps = {
|
|
setShowNotebook: (set: boolean) => void
|
|
}
|
|
|
|
export const NotebookHeader = (props: NotebookHeaderProps) => {
|
|
const handleClose = useCallback(() => {
|
|
props.setShowNotebook(false)
|
|
}, [props])
|
|
|
|
return (
|
|
<HStack
|
|
distribution="center"
|
|
alignment="center"
|
|
css={{
|
|
width: '100%',
|
|
position: 'sticky',
|
|
top: '0px',
|
|
height: '50px',
|
|
p: '20px',
|
|
borderTopLeftRadius: '10px',
|
|
overflow: 'clip',
|
|
background: '$thLibrarySearchbox',
|
|
zIndex: 10,
|
|
}}
|
|
>
|
|
<StyledText style="modalHeadline" css={{ color: '$thTextSubtle2' }}>
|
|
Notebook
|
|
</StyledText>
|
|
<HStack
|
|
css={{
|
|
ml: 'auto',
|
|
cursor: 'pointer',
|
|
gap: '15px',
|
|
mr: '-5px',
|
|
}}
|
|
distribution="center"
|
|
alignment="center"
|
|
>
|
|
<Dropdown triggerElement={<MenuTrigger />}>
|
|
<DropdownOption
|
|
onSelect={() => {
|
|
// exportHighlights()
|
|
}}
|
|
title="Export Notebook"
|
|
/>
|
|
<DropdownOption
|
|
onSelect={() => {
|
|
// setShowConfirmDeleteNote(true)
|
|
}}
|
|
title="Delete Article Note"
|
|
/>
|
|
</Dropdown>
|
|
<CloseButton close={handleClose} />
|
|
</HStack>
|
|
</HStack>
|
|
)
|
|
}
|