omnivore/packages/web/components/templates/library/LibraryHeadline.tsx
2022-08-11 17:36:09 +08:00

23 lines
No EOL
1 KiB
TypeScript

import { HStack } from '../../elements/LayoutPrimitives'
import { useGetUserPreferences } from '../../../lib/networking/queries/useGetUserPreferences'
import { StyledText } from '../../elements/StyledText'
import { theme } from '../../tokens/stitches.config'
import { LibraryListLayoutIcon } from '../../elements/images/LibraryListLayoutIcon'
import { LibraryGridLayoutIcon } from '../../elements/images/LibraryGridLayoutIcon'
import { Button } from '../../elements/Button'
export function LibraryHeadline(): JSX.Element {
useGetUserPreferences()
return (
<HStack alignment="center" distribution="start" css={{ pt: '4px', pb: '8px', width: '100%', pr: '15px' }}>
<StyledText style="libraryHeader">Home</StyledText>
<HStack alignment="center" distribution="start" css={{ marginLeft: 'auto', gap: '16px' }}>
<Button style="ctaDarkYellow">Add Link</Button>
<LibraryListLayoutIcon color="#D6D6D6" />
<LibraryGridLayoutIcon color={theme.colors.omnivoreCtaYellow.toString()} />
</HStack>
</HStack>
)
}