Styling of home

components/home/SectionShare/SectionShare.module.css

@@ -0,0 +1,30 @@
+.shareGrid {
+    display: grid;
+    gap: 3em;
+    grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
+}
+
+.downloadBtn {
+    width: 100%;
+}
+
+.uploadInput {
+    display: inline-block;
+    width: 100%;
+    padding: 2em 0.5em;
+    border: 1px dashed var(--md-sys-color-on-secondary-container);
+    margin: 1em 0;
+    background-color: var(--md-sys-color-secondary-container);
+    border-radius: 4px;
+    color: var(--md-sys-color-on-secondary-container);
+    text-align: center;
+}
+
+.shareInput {
+    width: 100%;
+}
+
+.uploadInput > input {
+    width: 0;
+    visibility: hidden;
+}

components/home/SectionShare/SectionShare.tsx

@@ -0,0 +1,80 @@
+import { FC, useEffect, useState } from 'react'
+import styles from './SectionShare.module.css'
+import { Heading } from '../../shared/Heading'
+import { Paragraph } from '../../shared/Paragraph/Paragraph'
+import { Button } from '../../shared/Button/Button'
+import cx from 'classnames'
+import typography from '../../../styles/typography.module.css'
+import { download, streamToArrayBuffer } from '../../../src/download'
+import { I18n } from '../../shared/I18n/I18n'
+import { Input } from '../../shared/Input/Input'
+import { Section } from '../../shared/Section/Section'
+import { useGroups } from '../../contexts/GroupProvider'
+
+export const SectionShare: FC = () => {
+  const { store, load } = useGroups()
+
+  const [location, setLocation] = useState('')
+  useEffect(() => {
+    setLocation(window.location.href)
+  }, [])
+
+  return (
+    <Section color={'primary'}>
+      <div className={styles.shareGrid}>
+        <div>
+          <Heading type={'section'}>
+            <I18n id={'page.home.share.download.title'} />
+          </Heading>
+          <Paragraph size={'medium'}>
+            <I18n id={'page.home.share.download.description'} />
+          </Paragraph>
+          <Button
+            className={cx(styles.downloadBtn, typography.bodyLarge)}
+            onClick={() => {
+              download('factorio-microservices.bin', store())
+            }}
+          >
+            <I18n id={'page.home.pref.download'} />
+          </Button>
+          <label className={styles.uploadInput}>
+            <I18n id={'page.home.share.download.upload_text'} />
+            <input
+              type={'file'}
+              multiple={false}
+              onChange={async evt => {
+                const stream = evt.currentTarget.files?.[0].stream() as
+                  | globalThis.ReadableStream<Uint8Array>
+                  | undefined
+                if (stream) {
+                  const array = await streamToArrayBuffer(stream)
+                  load(array)
+                  evt.currentTarget.value = null as unknown as string
+                }
+              }}
+            />
+          </label>
+        </div>
+        <div>
+          <Heading type={'section'}>
+            <I18n id={'page.home.share.link.title'} />
+          </Heading>
+          <Paragraph size={'medium'}>
+            <I18n id={'page.home.share.link.description'} />
+          </Paragraph>
+          <Paragraph size={'medium'}>
+            <strong>
+              <I18n id={'page.home.share.link.warning'} />
+            </strong>
+          </Paragraph>
+          <Input
+            className={styles.shareInput}
+            readOnly={true}
+            value={location}
+            onClick={e => e.currentTarget.select()}
+          />
+        </div>
+      </div>
+    </Section>
+  )
+}