Styling of home

components/shared/ButtonVisualize/ButtonVisualize.module.css

@@ -0,0 +1,15 @@
+.root {
+    display: inline-block;
+    margin-block-start: -0.4em;
+    padding-inline: 0.5em;
+    vertical-align: middle;
+}
+
+.link {
+    display: inline;
+    padding: 0.2em;
+    border-radius: 4px;
+    box-shadow: 0 0 0 1px var(--md-sys-color-tertiary);
+    color: var(--md-sys-color-tertiary);
+    font-size: var(--md-sys-typescale-body-small-font-size);
+}

components/shared/ButtonVisualize/ButtonVisualize.tsx

@@ -0,0 +1,25 @@
+import { FC } from 'react'
+import { I18n } from '../I18n/I18n'
+import { GraphIcon } from '../../icons/GraphIcon'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import styles from './ButtonVisualize.module.css'
+
+interface Props {
+  groupId?: string
+  large?: true
+}
+
+export const ButtonVisualize: FC<Props> = ({ groupId, large }) => {
+  const { query } = useRouter()
+  return (
+    <span className={styles.root}>
+      <Link href={{ pathname: !groupId ? '/visualize' : `/visualize/${groupId}`, query }}>
+        <a className={styles.link}>
+          {large ? <I18n id={'page.home.pref.visualize'} /> : null}
+          <GraphIcon />
+        </a>
+      </Link>
+    </span>
+  )
+}