1 files changed, 102 insertions, 0 deletions
diff --git a/components/CitationsPanel.tsx b/components/CitationsPanel.tsx
new file mode 100644
index 0000000..c34b0df
--- /dev/null
+++ b/components/CitationsPanel.tsx
@@ -0,0 +1,102 @@
+import { Box, StackDivider, VStack } from '@chakra-ui/react'
+import React from 'react'
+import { ColorMenu } from './ColorMenu'
+import { colorList, initialVisuals } from './config'
+import { EnableSection } from './EnableSection'
+import { SliderWithInfo } from './SliderWithInfo'
+
+export interface CitationsPanelProps {
+  visuals: typeof initialVisuals
+  setVisuals: any
+}
+export const CitationsPanel = (props: CitationsPanelProps) => {
+  const { visuals, setVisuals } = props
+  return (
+    <VStack
+      spacing={2}
+      justifyContent="flex-start"
+      divider={<StackDivider borderColor="gray.500" />}
+      align="stretch"
+      color="gray.800"
+    >
+      <Box>
+        <EnableSection
+          label="Dash cite links"
+          infoText="Add dashes to citation links made with org-roam-bibtex"
+          value={visuals.citeDashes}
+          onChange={() => setVisuals({ ...visuals, citeDashes: !visuals.citeDashes })}
+        >
+          <SliderWithInfo
+            label="Dash length"
+            value={visuals.citeDashLength / 10}
+            onChange={(value) => setVisuals({ ...visuals, citeDashLength: value * 10 })}
+          />
+          <SliderWithInfo
+            label="Gap length"
+            value={visuals.citeGapLength / 5}
+            onChange={(value) => setVisuals({ ...visuals, citeGapLength: value * 5 })}
+          />
+        </EnableSection>
+        <ColorMenu
+          colorList={colorList}
+          label="Citation node color"
+          setVisuals={setVisuals}
+          value={'citeNodeColor'}
+          visValue={visuals.citeNodeColor}
+        />
+        <ColorMenu
+          colorList={colorList}
+          label="Citation link color"
+          setVisuals={setVisuals}
+          value={'citeLinkColor'}
+          visValue={visuals.citeLinkColor}
+        />
+        <ColorMenu
+          colorList={colorList}
+          label="Reference link highlight"
+          setVisuals={setVisuals}
+          value={'citeLinkHighlightColor'}
+          visValue={visuals.citeLinkHighlightColor}
+        />
+        <EnableSection
+          label="Dash ref links"
+          infoText="Add dashes to citation links, whose target has a note, made with org-roam-bibtex"
+          value={visuals.refDashes}
+          onChange={() => setVisuals({ ...visuals, refDashes: !visuals.refDashes })}
+        >
+          <SliderWithInfo
+            label="Dash length"
+            value={visuals.refDashLength / 10}
+            onChange={(value) => setVisuals({ ...visuals, refDashLength: value * 10 })}
+          />
+          <SliderWithInfo
+            label="Gap length"
+            value={visuals.refGapLength / 5}
+            onChange={(value) => setVisuals({ ...visuals, refGapLength: value * 5 })}
+          />
+        </EnableSection>
+        <ColorMenu
+          colorList={colorList}
+          label="Reference node color"
+          setVisuals={setVisuals}
+          value={'refNodeColor'}
+          visValue={visuals.refNodeColor}
+        />
+        <ColorMenu
+          colorList={colorList}
+          label="Reference link color"
+          setVisuals={setVisuals}
+          value={'refLinkColor'}
+          visValue={visuals.refLinkColor}
+        />
+        <ColorMenu
+          colorList={colorList}
+          label="Reference link highlight"
+          setVisuals={setVisuals}
+          value={'refLinkHighlightColor'}
+          visValue={visuals.refLinkHighlightColor}
+        />
+      </Box>
+    </VStack>
+  )
+}