Files
commafeed/commafeed-client/src/components/content/header/OpenExternalLink.tsx
2024-06-13 23:28:45 +02:00

31 lines
1014 B
TypeScript

import { Trans } from "@lingui/macro"
import { ActionIcon, Anchor, Tooltip } from "@mantine/core"
import { Constants } from "app/constants"
import { markEntry } from "app/entries/thunks"
import { useAppDispatch } from "app/store"
import type { Entry } from "app/types"
import { TbExternalLink } from "react-icons/tb"
export function OpenExternalLink(props: { entry: Entry }) {
const dispatch = useAppDispatch()
const onClick = (e: React.MouseEvent) => {
e.stopPropagation()
dispatch(
markEntry({
entry: props.entry,
read: true,
})
)
}
return (
<Anchor href={props.entry.url} target="_blank" rel="noreferrer" onClick={onClick}>
<Tooltip label={<Trans>Open link</Trans>} openDelay={Constants.tooltip.delay}>
<ActionIcon variant="transparent" c="dimmed">
<TbExternalLink size={18} />
</ActionIcon>
</Tooltip>
</Anchor>
)
}