feat(preview): hover links + ui upgrade

1 files changed, 55 insertions, 0 deletions

diff --git a/components/Sidebar/Backlinks.tsx b/components/Sidebar/Backlinks.tsx
new file mode 100644
index 0000000..f899d3e
--- /dev/null
+++ b/components/Sidebar/Backlinks.tsx
@@ -0,0 +1,55 @@
+import { LinksByNodeId, NodeById } from '../../pages/index'
+
+import { GraphData, NodeObject, LinkObject } from 'force-graph'
+
+import { normalizeLinkEnds } from '../../pages/index'
+import { VStack, Box, Button, Heading, StackDivider } from '@chakra-ui/react'
+import React from 'react'
+import { ProcessedOrg } from '../../util/processOrg'
+
+export interface BacklinksProps {
+  previewNode: any
+  setPreviewNode: any
+  nodeById: NodeById
+  linksByNodeId: LinksByNodeId
+  getText: any
+}
+
+import { PreviewLink } from './Link'
+
+export const Backlinks = (props: BacklinksProps) => {
+  const { previewNode, setPreviewNode, nodeById, linksByNodeId, getText } = props
+  const links = linksByNodeId[previewNode?.id] ?? []
+  return (
+    <Box>
+      <Heading pt={4}>{'Backlinks (' + links.length + ')'}</Heading>
+      <VStack
+        pt={2}
+        spacing={3}
+        alignItems="start"
+        divider={<StackDivider borderColor="gray.500" />}
+        align="stretch"
+        color="gray.800"
+      >
+        {previewNode?.id &&
+          links.map((link: LinkObject, i: number) => {
+            const [source, target] = normalizeLinkEnds(link)
+            if (source === previewNode?.id) {
+              return
+            }
+            return (
+              <Box overflow="hidden" p={3} bg="gray.300" width="100%" key={source}>
+                <PreviewLink
+                  href={'id:' + source}
+                  children={nodeById[source]?.title}
+                  nodeById={nodeById}
+                  setPreviewNode={setPreviewNode}
+                  getText={getText}
+                />
+              </Box>
+            )
+          })}
+      </VStack>
+    </Box>
+  )
+}