WIP

Diary-SPO · Dec 3, 2024 · 907baa1 · 907baa1
1 parent 81cd390
commit 907baa1
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 29 deletions.
diff --git a/apps/web/src/app/AppWrapper/App/ModalRoot/modals/UserEditModal/index.tsx b/apps/web/src/app/AppWrapper/App/ModalRoot/modals/UserEditModal/index.tsx
@@ -1,14 +1,16 @@
 import {
-  Avatar,
+  Avatar, Div,
   Flex,
   Group,
   Header,
   ModalPage,
-  ModalPageHeader
+  ModalPageHeader, Text
 } from '@vkontakte/vkui'
 import './index.css'
-import { Icon16DoneCircle, Icon56MarketOutline } from '@vkontakte/icons'
+import {Icon16DoneCircle, Icon28ShoppingCartOutline, Icon56MarketOutline} from '@vkontakte/icons'
 import { useState } from 'react'
+import {useRouteNavigator} from "@vkontakte/vk-mini-apps-router";
+import {PAGE_MARKET} from "../../../../../routes";
 
 const urls = [
   'https://mangabuff.ru/img/avatars/x150/806.gif',
@@ -31,10 +33,16 @@ const urls = [
 
 const UserEditModal = ({ id }: { id: string }) => {
   const [selectAva, setSelectAva] = useState(urls[0])
+  const navigation = useRouteNavigator()
 
   const selectCurrAva = (url: string) => {
     setSelectAva(url)
   }
+
+  const openMarket = () => {
+    navigation.push(PAGE_MARKET)
+  }
+
   return (
     <ModalPage id={id} size={500} dynamicContentHeight>
       <ModalPageHeader>Сменить аву</ModalPageHeader>
@@ -78,7 +86,7 @@ const UserEditModal = ({ id }: { id: string }) => {
         {/*	</RichCell>*/}
         {/*</Group>*/}
 
-        <Group header={<Header mode='secondary'>Мои аватарки</Header>}>
+        <Group header={<Header>Мои аватарки</Header>}>
           <Flex margin='auto' gap='2xl' justify='center'>
             {urls.map((url, index) => (
               <Avatar
@@ -96,8 +104,11 @@ const UserEditModal = ({ id }: { id: string }) => {
                 </Avatar.Badge>
               </Avatar>
             ))}
-            <Avatar size={110}>
-              <Icon56MarketOutline />
+            <Avatar size={110} onClick={openMarket}>
+              <Flex direction='column' align='center'>
+                <Icon28ShoppingCartOutline height={50} width={50}/>
+                <Text>Купить ещё</Text>
+              </Flex>
             </Avatar>
           </Flex>
         </Group>

diff --git a/apps/web/src/pages/Market/components/marketHeader.tsx b/apps/web/src/pages/Market/components/marketHeader.tsx
@@ -37,7 +37,7 @@ const MarketHeader = () => {
         before={<Avatar size={48} src={selectAva} />}
         extraSubtitle='Вы великолепны 😉'
         after={
-          <Tooltip subtitle='Кредиты — это то, сколько вы нам должны'>
+          <Tooltip description='Кредиты — это то, сколько вы нам должны'>
             <label>
               1 256{' '}
               <Icon28MoneyWadOutline
@@ -53,7 +53,7 @@ const MarketHeader = () => {
         afterCaption='Кредиты 👆'
         actions={
           <ButtonGroup mode='horizontal' gap='s' stretched>
-            <Tooltip subtitle='История списания и зачисления кредитов'>
+            <Tooltip placement='right' description='История списания и зачисления кредитов'>
               <Button mode='secondary' size='s'>
                 История
               </Button>

diff --git a/apps/web/src/pages/Market/index.tsx b/apps/web/src/pages/Market/index.tsx
@@ -7,24 +7,36 @@ import Filters from './components/filters.tsx'
 import FiltersModal from './components/filtersModal.tsx'
 import MarketHeader from './components/marketHeader.tsx'
 
-const urls = [
-  'https://mangabuff.ru/img/avatars/x150/806.gif',
-  'https://mangabuff.ru/img/avatars/x150/1209.gif',
-  'https://mangabuff.ru/img/avatars/x150/689.jpg',
-  'https://mangabuff.ru/img/avatars/x150/688.jpg',
-  'https://mangabuff.ru/img/avatars/x150/685.gif',
-  'https://mangabuff.ru/img/avatars/x150/682.jpg',
-  'https://mangabuff.ru/img/avatars/x150/476.jpg',
-  'https://mangabuff.ru/img/avatars/x150/477.jpg',
-  'https://mangabuff.ru/img/avatars/x150/478.jpg',
-  'https://mangabuff.ru/img/avatars/x150/479.jpg',
-  'https://mangabuff.ru/img/avatars/x150/480.jpg',
-  'https://mangabuff.ru/img/avatars/x150/482.jpg',
-  'https://mangabuff.ru/img/avatars/x150/483.jpg',
-  'https://mangabuff.ru/img/avatars/x150/484.jpg',
-  'https://mangabuff.ru/img/avatars/x150/485.jpg',
-  'https://mangabuff.ru/img/avatars/x150/652.jpg'
-]
+const url = 'https://mangabuff.ru/img/avatars/x150'
+
+const data = {
+  avatars: [
+    {
+      isAnimated: true,
+      filename: '806.gif',
+      tags: ['Девушка'],
+      price: 0
+    },
+    {
+      isAnimated: true,
+      filename: '1209.gif',
+      tags: ['Парень'],
+      price: 0
+    },
+    {
+      isAnimated: false,
+      filename: '689.jpg',
+      tags: ['Девушка'],
+      price: 0
+    },
+    {
+      isAnimated: false,
+      filename: '688.jpg',
+      tags: ['Девушка'],
+      price: 0
+    }
+  ]
+}
 
 const Market: FC<Props> = () => {
   const [activePanel, setActivePanel] = useState('market')
@@ -39,16 +51,20 @@ const Market: FC<Props> = () => {
     setFiltersModalOpened(false)
   }
 
+  const getUrlPath = (avatarData) => {
+    return `${url}/${avatarData.filename}`
+  }
+
   return (
     <View activePanel={activePanel}>
       <Panel id='market'>
         <PanelHeaderWithBack title='Магазин' />
         <MarketHeader />
         <Filters openModal={openMarketFiltersModal} />
-        <Group header={<Header mode='secondary'>Полка аватарок</Header>}>
+        <Group header={<Header>Полка аватарок</Header>}>
           <Flex margin='auto' gap='2xl' justify='center'>
-            {urls.map((url, index) => (
-              <Avatar key={index} size={110} src={url}>
+            {data.avatars.map((avatarData, index) => (
+              <Avatar key={index} size={110} src={getUrlPath(avatarData)}>
                 <Avatar.Badge className='select-avatar_badge'>
                   <Icon20AddCircleFillGreen height={25} width={25} />
                 </Avatar.Badge>