From 136762310d79917e24bc2847519332e7d95f2fc3 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 8 Apr 2022 09:56:29 -0700
Subject: [PATCH] Encapsulate the article actions menu, standardize header
 height at 48px

---
 .../templates/article/ArticleActionsMenu.tsx  | 69 +++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 packages/web/components/templates/article/ArticleActionsMenu.tsx

diff --git a/packages/web/components/templates/article/ArticleActionsMenu.tsx b/packages/web/components/templates/article/ArticleActionsMenu.tsx
new file mode 100644
index 000000000..0e30ec958
--- /dev/null
+++ b/packages/web/components/templates/article/ArticleActionsMenu.tsx
@@ -0,0 +1,69 @@
+import { Separator } from "@radix-ui/react-separator"
+import { ArchiveBox, DotsThree, HighlighterCircle, TagSimple, TextAa } from "phosphor-react"
+import { Button } from "../../elements/Button"
+import { Box } from "../../elements/LayoutPrimitives"
+import { styled, theme } from "../../tokens/stitches.config"
+
+export type ArticleActionsMenuLayout = 'horizontal' | 'vertical'
+
+type ArticleActionsMenuProps = {
+  // pageTestId: string
+  // hideHeader?: boolean
+  // pageMetaDataProps?: PageMetaDataProps
+  // scrollElementRef?: MutableRefObject<HTMLDivElement | null>
+  // displayFontStepper?: boolean
+  layout: ArticleActionsMenuLayout
+}
+
+
+
+export function MenuSeparator(props: ArticleActionsMenuProps) {
+  const LineSeparator = styled(Separator, {
+    width: '100%',
+    margin: 0,
+    backgroundColor: 'red',
+    borderBottom: `1px solid ${theme.colors.grayLine.toString()}`,
+    my: '8px',
+  })
+  return (props.layout == 'vertical' ? <LineSeparator /> : <></>)
+}
+
+export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element {
+  return (
+    <Box
+      css={{
+        display: 'flex',
+        flexDirection: props.layout == 'vertical' ? 'column' : 'row',
+        alignItems: props.layout == 'vertical' ? 'flex-start' : 'center',
+        justifyContent: props.layout == 'vertical' ? 'center' : 'flex-end',
+        paddingTop: '6px',
+        gap: '4px',
+        height: '100%',
+        width: '100%',
+        m: '0px',
+      }}
+    >
+      <Button style='articleActionIcon'>
+        <TextAa size={24} color='#5D5C5B' />
+      </Button>
+      <MenuSeparator layout={props.layout} />
+
+      <Button style='articleActionIcon'>
+        <TagSimple size={24} color='#5D5C5B' />
+      </Button>
+      <Button style='articleActionIcon'>
+        <HighlighterCircle size={24} color='#5D5C5B' />
+      </Button>
+      <MenuSeparator layout={props.layout} />
+
+      <Button style='articleActionIcon'>
+        <ArchiveBox size={24} color='#5D5C5B' />
+      </Button>
+      <MenuSeparator layout={props.layout} />
+
+      <Button style='articleActionIcon'>
+        <DotsThree size={24} color='#5D5C5B' />
+      </Button>
+    </Box>
+  )
+}
\ No newline at end of file