add publishType compoenents

src/components/pages/Publish/PublishType.module.css

@@ -0,0 +1,29 @@
+.tabElement,
+button.tabElement,
+.tabElement:hover,
+.tabElement:active,
+.tabElement:focus {
+  border: 1px solid var(--border-color);
+  text-transform: uppercase;
+  border-radius: var(--border-radius);
+  margin-right: calc(var(--spacer) / 6);
+  margin-bottom: calc(var(--spacer) / 6);
+  color: var(--color-secondary);
+  background: var(--background-body);
+
+  /* the only thing not possible to overwrite button style="text" with more specifity of selectors, so sledgehammer */
+  padding: calc(var(--spacer) / 5) !important;
+}
+
+.tabElement:hover,
+.tabElement:focus {
+  color: var(--font-color-text);
+  background: inherit;
+  transform: none;
+}
+
+.tabElement.selected {
+  color: var(--background-body);
+  background: var(--font-color-text);
+  border-color: var(--background-body);
+}

src/components/pages/Publish/PublishType.tsx

@@ -0,0 +1,47 @@
+import React, { ReactElement, useEffect } from 'react'
+import styles from './PublishType.module.css'
+import classNames from 'classnames/bind'
+import Button from '../../atoms/Button'
+
+const cx = classNames.bind(styles)
+
+const publishTypes = [
+  { display: 'data', value: 'data' },
+  { display: 'algorithms', value: 'algorithms' }
+]
+
+export default function PublishType({
+  type,
+  setType
+}: {
+  type: string
+  setType: React.Dispatch<React.SetStateAction<string>>
+}): ReactElement {
+  useEffect(() => {
+    setType(publishTypes[0].value)
+  }, [])
+
+  return (
+    <div>
+      {publishTypes.map((e, index) => {
+        const tabElement = cx({
+          [styles.selected]: e.value === type,
+          [styles.tabElement]: true
+        })
+        return (
+          <Button
+            size="small"
+            style="text"
+            key={index}
+            className={tabElement}
+            onClick={async () => {
+              setType(e.value)
+            }}
+          >
+            {e.display}
+          </Button>
+        )
+      })}
+    </div>
+  )
+}