muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +07:00
Code Packages Activity Actions

added sample settings page

Browse source
This commit is contained in:
Fedor Katurov 2022-03-25 20:52:39 +07:00
parent 7a6a44cccf
commit 100c4c138a
29 changed files with 527 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/containers/profile/ProfileSidebarMenu/index.tsx
View file

@ -8,8 +8,10 @@ import { Filler } from '~/components/containers/Filler';
import { Grid } from '~/components/containers/Grid';
import { Group } from '~/components/containers/Group';
import { Button } from '~/components/input/Button';
import { VerticalMenu } from '~/components/menu/VerticalMenu';
import { useStackContext } from '~/components/sidebar/SidebarStack';
import { ProfileSidebarHead } from '~/containers/profile/ProfileSidebarHead';
import { ProfileStats } from '~/containers/profile/ProfileStats';
import markdown from '~/styles/common/markdown.module.scss';
import styles from './styles.module.scss';
@ -29,39 +31,13 @@ const ProfileSidebarMenu: VFC<ProfileSidebarMenuProps> = ({ onClose }) => {
<Filler className={classNames(markdown.wrapper, styles.text)}>
<Group>
<ul className={styles.menu}>
<li onClick={() => setActiveTab(0)}>Настройки</li>
<li onClick={() => setActiveTab(1)}>Заметки</li>
<li onClick={() => setActiveTab(2)}>Удалённые посты</li>
</ul>
<VerticalMenu className={styles.menu}>
<VerticalMenu.Item onClick={() => setActiveTab(0)}>Настройки</VerticalMenu.Item>
<VerticalMenu.Item onClick={() => setActiveTab(1)}>Заметки</VerticalMenu.Item>
<VerticalMenu.Item onClick={() => setActiveTab(2)}>Удалённые посты</VerticalMenu.Item>
</VerticalMenu>
<Grid columns="2fr 1fr">
<Card>
<h4>1 год 2 месяца</h4>
<small>в убежище</small>
</Card>
<Card>
<Square>
<h4>24 поста</h4>
<small>Создано</small>
</Square>
</Card>
</Grid>
<Grid columns="1fr 2fr">
<Card>
<Square>
<h4>16545 лайка</h4>
<small>получено</small>
</Square>
</Card>
<Card>
<h4>123123 комментария</h4>
<small>под постами</small>
</Card>
</Grid>
<ProfileStats />
</Group>
</Filler>

32
src/containers/profile/ProfileSidebarMenu/styles.module.scss
View file

@ -11,35 +11,3 @@
.text {
margin-top: $gap * 2;
}
.menu {
@include outer_shadow;
list-style: none;
border-radius: $radius;
padding: 0 !important;
& > li {
@include row_shadow;
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;
}
}
}

42
src/containers/profile/ProfileStats/index.tsx Normal file
View file

@ -0,0 +1,42 @@
import React, { VFC } from 'react';
import { Square } from '~/components/common/Square';
import { Card } from '~/components/containers/Card';
import { Grid } from '~/components/containers/Grid';
import { Group } from '~/components/containers/Group';
interface ProfileStatsProps {}
const ProfileStats: VFC<ProfileStatsProps> = () => (
<Group>
<Grid columns="2fr 1fr">
<Card>
<h4>1 год 2 месяца</h4>
<small>в убежище</small>
</Card>
<Card>
<Square>
<h4>24 поста</h4>
<small>Создано</small>
</Square>
</Card>
</Grid>
<Grid columns="1fr 2fr">
<Card>
<Square>
<h4>16545 лайка</h4>
<small>получено</small>
</Square>
</Card>
<Card>
<h4>123123 комментария</h4>
<small>под постами</small>
</Card>
</Grid>
</Group>
);
export { ProfileStats };