110 lines
3.2 KiB
TypeScript
110 lines
3.2 KiB
TypeScript
import { HStack } from '../../elements/LayoutPrimitives'
|
|
import { StyledText } from '../../elements/StyledText'
|
|
import { Sidebar } from 'phosphor-react'
|
|
import { theme } from '../../tokens/stitches.config'
|
|
import { Button } from '../../elements/Button'
|
|
import { ExportIcon } from '../../elements/icons/ExportIcon'
|
|
import { useCallback } from 'react'
|
|
import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
|
|
import { ReadableItem } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
|
|
import { useGetArticleQuery } from '../../../lib/networking/queries/useGetArticleQuery'
|
|
import { highlightsAsMarkdown } from '../homeFeed/HighlightItem'
|
|
import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
|
|
|
|
type NotebookHeaderProps = {
|
|
viewer: UserBasicData
|
|
item: ReadableItem
|
|
|
|
setShowNotebook: (set: boolean) => void
|
|
}
|
|
|
|
export const NotebookHeader = (props: NotebookHeaderProps) => {
|
|
const { articleData } = useGetArticleQuery({
|
|
slug: props.item.slug,
|
|
username: props.viewer.profile.username,
|
|
includeFriendsHighlights: false,
|
|
})
|
|
|
|
const exportHighlights = useCallback(() => {
|
|
if (articleData?.article.article.highlights) {
|
|
const markdown = highlightsAsMarkdown(
|
|
articleData?.article.article.highlights
|
|
)
|
|
if (markdown.length > 1) {
|
|
;(async () => {
|
|
await navigator.clipboard.writeText(markdown)
|
|
showSuccessToast('Highlights and notes copied')
|
|
})()
|
|
} else {
|
|
showSuccessToast('Nothing to export')
|
|
}
|
|
} else {
|
|
showErrorToast('Could not copy highlights')
|
|
}
|
|
}, [articleData])
|
|
|
|
return (
|
|
<HStack
|
|
distribution="center"
|
|
alignment="center"
|
|
css={{
|
|
width: '100%',
|
|
position: 'sticky',
|
|
top: '0px',
|
|
height: '50px',
|
|
p: '20px',
|
|
borderTopLeftRadius: '10px',
|
|
overflow: 'clip',
|
|
background: '$thNotebookBackground',
|
|
zIndex: 10,
|
|
borderBottom: '1px solid $thNotebookBorder',
|
|
}}
|
|
>
|
|
<StyledText style="modalHeadline" css={{ color: '$thNotebookSubtle' }}>
|
|
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> */}
|
|
|
|
<Button
|
|
style="plainIcon"
|
|
onClick={(event) => {
|
|
exportHighlights()
|
|
event.preventDefault()
|
|
}}
|
|
>
|
|
<ExportIcon
|
|
size={25}
|
|
color={theme.colors.thNotebookSubtle.toString()}
|
|
/>
|
|
</Button>
|
|
<Button style="plainIcon" onClick={() => props.setShowNotebook(false)}>
|
|
<Sidebar size={25} color={theme.colors.thNotebookSubtle.toString()} />
|
|
</Button>
|
|
</HStack>
|
|
</HStack>
|
|
)
|
|
}
|