show storage

src/shared/Main.tsx

@@ -2,16 +2,9 @@ import { FC } from 'react'
 import SideBar from './SideBar'
 import AppRouter from '@/router/AppRouter'
 import Header from './Header'
-import Button from '@/components/Button'
-import { Add } from 'iconsax-react'
-import { useTranslation } from 'react-i18next'
-import { useSharedStore } from './store/sharedStore'
 
 const Main: FC = () => {
 
-    const { t } = useTranslation()
-    const { setOpenSidebar, setOpenNewMessage } = useSharedStore()
-
     return (
         <div className='p-2 md:p-4 overflow-hidden'>
             <SideBar />
@@ -24,7 +17,7 @@ const Main: FC = () => {
                 </div>
             </div>
 
-            <div className='flex fixed bottom-4 xl:hidden  right-0 justify-center mt-10 md:mt-14 px-4'>
+            {/* <div className='flex fixed bottom-4 xl:hidden  right-0 justify-center mt-10 md:mt-14 px-4'>
                 <Button
                     className='bg-secondary font-normal text-primary w-fit px-4 md:px-6 text-sm'
                     onClick={() => {
@@ -37,7 +30,7 @@ const Main: FC = () => {
                         <div>{t('sidebar.new_message')}</div>
                     </div>
                 </Button>
-            </div>
+            </div> */}
 
         </div>
     )

src/shared/SideBar.tsx

@@ -7,6 +7,7 @@ import { useSharedStore } from './store/sharedStore'
 import { clx } from '../helpers/utils'
 import { useTranslation } from 'react-i18next'
 import { Paths } from '@/utils/Paths'
+import Storage from './components/Storage'
 
 const SideBar: FC = () => {
 
@@ -76,6 +77,7 @@ const SideBar: FC = () => {
                     </div>
 
                     <div className='flex-1 flex flex-col justify-end mt-10 md:mt-14 pb-6 md:pb-8'>
+                        <Storage />
                         <div className='text-xs text-[#8C90A3]'>
                             <SideBarItem
                                 icon={<Logout variant={isActive('logout') ? 'Bold' : 'Outline'} color={isActive('logout') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}

src/shared/components/BuySpace.tsx

@@ -0,0 +1,26 @@
+import DefaulModal from '@/components/DefaulModal'
+import { useSharedStore } from '@/shared/store/sharedStore'
+import { useTranslation } from 'react-i18next'
+import { FC } from 'react'
+
+const BuySpace: FC = () => {
+
+    const { t } = useTranslation()
+    const { openBuySpace, setOpenBuySpace } = useSharedStore()
+    console.log(openBuySpace);
+
+    return (
+        <DefaulModal
+            open={openBuySpace}
+            close={() => setOpenBuySpace(false)}
+            isHeader={true}
+            title_header={t('space.title')}
+        >
+            <div className='mt-5'>
+
+            </div>
+        </DefaulModal >
+    )
+}
+
+export default BuySpace

src/shared/components/Storage.tsx

@@ -0,0 +1,52 @@
+import Button from '@/components/Button'
+import ProgressBar from '@/components/ProgressBar'
+import { useGetSpace } from '@/pages/setting/domain/hooks/useDomainData'
+import { useSharedStore } from '@/shared/store/sharedStore'
+import { Cloud } from 'iconsax-react'
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+
+const Storage: FC = () => {
+
+    const { t } = useTranslation()
+    const { setOpenBuySpace } = useSharedStore()
+    const { data } = useGetSpace()
+    return (
+        <div className='px-10 pb-5'>
+            <div className='flex gap-2 items-center'>
+                <Cloud size={20} color='#8C90A3' />
+                <div className='text-xs text-description'>
+                    {t('sidebar.storage')}
+                </div>
+            </div>
+
+            <div className='mt-5'>
+                <ProgressBar
+                    percentage={
+                        data?.data?.quota?.totalInGB
+                            ? Math.round(
+                                (data?.data?.quota?.usedInGB / data?.data?.quota?.totalInGB) * 100
+                            )
+                            : 0
+                    }
+                />
+            </div>
+
+            <div className='mt-5 text-xs'>
+                {data?.data?.quota?.usedInGB} گیگابایت از {data?.data?.quota?.totalInGB} گیگابایت استفاده شده است
+            </div>
+
+            <div className='mt-5'>
+                <Button
+                    variant='secondary'
+                    label={t('sidebar.add_space')}
+                    onClick={() => setOpenBuySpace(true)}
+                />
+            </div>
+
+
+        </div>
+    )
+}
+
+export default Storage

src/shared/store/sharedStore.ts

@@ -6,4 +6,6 @@ export const useSharedStore = create<SharedStoreType>((set) => ({
   setOpenSidebar: (value) => set({ openSidebar: value }),
   openNewMessage: false,
   setOpenNewMessage: (value) => set({ openNewMessage: value }),
+  openBuySpace: false,
+  setOpenBuySpace: (value) => set({ openBuySpace: value }),
 }));

src/shared/types/SharedTypes.ts

@@ -3,4 +3,6 @@ export type SharedStoreType = {
   setOpenSidebar: (value: boolean) => void;
   openNewMessage: boolean;
   setOpenNewMessage: (value: boolean) => void;
+  openBuySpace: boolean;
+  setOpenBuySpace: (value: boolean) => void;
 };