added sample settings page

src/components/menu/HorizontalMenu/index.tsx

@@ -0,0 +1,55 @@
+import React, { PropsWithChildren } from 'react';
+
+import classNames from 'classnames';
+
+import { Icon } from '~/components/input/Icon';
+import { Placeholder } from '~/components/placeholders/Placeholder';
+import { DivProps } from '~/utils/types';
+
+import styles from './styles.module.scss';
+
+interface HorizontalMenuProps extends DivProps {}
+interface HorizontalMenuItemProps {
+  isLoading?: boolean;
+  icon?: string;
+  color?: 'green' | 'orange' | 'yellow';
+  active?: boolean;
+  onClick?: () => void;
+}
+
+function HorizontalMenu({ children, ...props }: HorizontalMenuProps) {
+  return (
+    <div {...props} className={classNames(styles.menu, props.className)}>
+      {children}
+    </div>
+  );
+}
+
+HorizontalMenu.Item = ({
+  icon,
+  color = 'green',
+  children,
+  isLoading,
+  active,
+  onClick,
+}: PropsWithChildren<HorizontalMenuItemProps>) => {
+  if (isLoading) {
+    return (
+      <div className={styles.item} key="loading">
+        <Placeholder width="32px" height={32} />
+        <Placeholder width="96px" height={18} />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={classNames(styles.item, { [styles.active]: active }, styles[color])}
+      onClick={onClick}
+    >
+      {!!icon && <Icon icon={icon} size={24} />}
+      <span className={styles.text}>{children}</span>
+    </div>
+  );
+};
+export { HorizontalMenu };

src/components/menu/HorizontalMenu/styles.module.scss

@@ -0,0 +1,72 @@
+@import "src/styles/variables.scss";
+
+.menu {
+  @include inner_shadow;
+
+  display: flex;
+  background-color: $content_bg;
+  border-radius: $radius;
+
+  @include tablet {
+    flex-wrap: wrap;
+    align-items: stretch;
+    justify-content: center;
+    flex: 1;
+  }
+
+  & > * {
+    padding: $gap;
+  }
+}
+
+.item {
+  flex: 0 0 auto;
+  padding: $gap * 0.5 $gap  $gap * 0.5 $gap;
+  fill: currentColor;
+  color: darken(white, 50%);
+  transition: color 0.25s;
+  cursor: pointer;
+  border-radius: $radius;
+  min-height: 36px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  &:hover {
+    color: white;
+  }
+
+  @include tablet {
+    flex-direction: column;
+    flex: 1;
+  }
+
+  &.active {
+    @include outer_shadow;
+    color: white;
+
+    &.green {
+      background: $green_gradient;
+    }
+
+    &.orange {
+      background: $red_gradient;
+    }
+
+    &.yellow {
+      background: $yellow_gradient;
+    }
+  }
+}
+
+.text {
+  font: $font_14_semibold;
+  text-transform: uppercase;
+  padding-left: $gap * 0.75;
+  padding-right: $gap * 0.35;
+
+  @include tablet {
+    padding-top: $gap * 0.5;
+    font: $font_12_semibold;
+  }
+}

src/components/menu/VerticalMenu/index.tsx

@@ -0,0 +1,32 @@
+import React, { PropsWithChildren } from 'react';
+
+import classNames from 'classnames';
+
+import { Card } from '~/components/containers/Card';
+import { DivProps, LinkProps } from '~/utils/types';
+
+import styles from './styles.module.scss';
+
+interface VerticalMenuProps extends DivProps {
+  appearance?: 'inset' | 'flat' | 'default';
+}
+
+interface VerticalMenuItemProps extends Omit<LinkProps, 'href'> {}
+
+function VerticalMenu({
+  children,
+  appearance = 'default',
+  ...props
+}: PropsWithChildren<VerticalMenuProps>) {
+  return (
+    <Card {...props} className={classNames(styles.menu, styles[appearance], props.className)}>
+      {children}
+    </Card>
+  );
+}
+
+VerticalMenu.Item = ({ ...props }: VerticalMenuItemProps) => (
+  <a {...props} className={classNames(styles.item, props.className)} />
+);
+
+export { VerticalMenu };

src/components/menu/VerticalMenu/styles.module.scss

@@ -0,0 +1,47 @@
+@import "src/styles/variables";
+@import "src/styles/mixins";
+
+.menu {
+  border-radius: $radius;
+  padding: 0 !important;
+  display: flex;
+  flex-direction: column;
+
+  &.flat {
+    box-shadow: none;
+  }
+
+  &.default {
+    @include outer_shadow;
+  }
+
+  &.inset {
+    @include inner_shadow;
+  }
+}
+
+a.item {
+  @include row_shadow;
+
+  color: inherit;
+  text-decoration: none;
+  list-style: none;
+  margin: 0 !important;
+  padding: $gap;
+  font: $font_16_semibold;
+  cursor: pointer;
+  background-color: transparentize($secondary, 1);
+  transition: background-color 0.25s;
+
+  &:hover {
+    background-color: transparentize($secondary, 0.5);
+  }
+
+  &:first-child {
+    border-radius: $radius $radius 0 0;
+  }
+
+  &:last-child {
+    border-radius: 0 0 $radius $radius;
+  }
+}