+
+
+
+ )
+}
+
+export default DynamicHeightItem
diff --git a/src/components/DynamicHeightItemMinimal.tsx b/src/components/DynamicHeightItemMinimal.tsx
new file mode 100644
index 0000000..b80d53f
--- /dev/null
+++ b/src/components/DynamicHeightItemMinimal.tsx
@@ -0,0 +1,39 @@
+import React, { useRef, useState, useEffect } from 'react'
+import ReactResizeDetector from 'react-resize-detector'
+import { Layouts, Layout } from 'react-grid-layout'
+
+interface DynamicHeightItemProps {
+ children: React.ReactNode
+ layouts: Layouts
+ setLayouts: (layouts: any) => void
+ i: string
+ breakpoint: keyof Layouts
+ rows?: number
+ count?: number
+ type?: string
+ padding?: number
+}
+
+export const DynamicHeightItemMinimal: React.FC
+ {children}
+
+
+
+ )
+}
diff --git a/src/components/FileElement.tsx b/src/components/FileElement.tsx
new file mode 100644
index 0000000..fee23cb
--- /dev/null
+++ b/src/components/FileElement.tsx
@@ -0,0 +1,445 @@
+import * as React from 'react'
+import { styled, useTheme } from '@mui/material/styles'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import AudiotrackIcon from '@mui/icons-material/Audiotrack'
+import { MyContext } from '../wrappers/DownloadWrapper'
+import { useDispatch, useSelector } from 'react-redux'
+import { RootState } from '../state/store'
+import { CircularProgress } from '@mui/material'
+import AttachFileIcon from '@mui/icons-material/AttachFile'
+import {
+ setCurrAudio,
+ setShowingAudioPlayer
+} from '../state/features/globalSlice'
+import {
+ base64ToUint8Array,
+ objectToUint8ArrayFromResponse
+} from '../utils/toBase64'
+import { setNotification } from '../state/features/notificationsSlice'
+
+const Widget = styled('div')(({ theme }) => ({
+ padding: 8,
+ borderRadius: 10,
+ maxWidth: 350,
+ position: 'relative',
+ zIndex: 1,
+ // backgroundColor:
+ // theme.palette.mode === 'dark' ? 'rgba(0,0,0,0.6)' : 'rgba(255,255,255,0.4)',
+ backdropFilter: 'blur(40px)',
+ background: 'skyblue',
+ transition: '0.2s all',
+ '&:hover': {
+ opacity: 0.75
+ }
+}))
+
+const CoverImage = styled('div')({
+ width: 40,
+ height: 40,
+ objectFit: 'cover',
+ overflow: 'hidden',
+ flexShrink: 0,
+ borderRadius: 8,
+ backgroundColor: 'rgba(0,0,0,0.08)',
+ '& > img': {
+ width: '100%'
+ }
+})
+
+const TinyText = styled(Typography)({
+ fontSize: '0.75rem',
+ opacity: 0.38,
+ fontWeight: 500,
+ letterSpacing: 0.2
+})
+
+interface IAudioElement {
+ title: string
+ description?: string
+ author?: string
+ fileInfo?: any
+ postId?: string
+ user?: string
+ children?: React.ReactNode
+ mimeType?: string
+ disable?: boolean
+ mode?: string
+ otherUser?: string
+}
+
+interface CustomWindow extends Window {
+ showSaveFilePicker: any // Replace 'any' with the appropriate type if you know it
+}
+
+const customWindow = window as unknown as CustomWindow
+
+export default function FileElement({
+ title,
+ description,
+ author,
+ fileInfo,
+ postId = '',
+ user,
+ children,
+ mimeType,
+ disable,
+ mode,
+ otherUser
+}: IAudioElement) {
+ const { downloadVideo } = React.useContext(MyContext)
+ const [isLoading, setIsLoading] = React.useState
+ {children}
+
+ -
+ {videos.map((video) => (
+
-
+ {blockedNames.map((name, index) => (
+
+ {children}
+
+
+ )
+}
diff --git a/src/components/common/CustomIcon.tsx b/src/components/common/CustomIcon.tsx
new file mode 100644
index 0000000..ae9ddd5
--- /dev/null
+++ b/src/components/common/CustomIcon.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
+import { styled } from '@mui/system'
+
+const CustomSvgIcon: React.FC-
+ {Object.keys(downloads)
+ .filter(
+ (item) =>
+ downloads[item].service !== MAIL_ATTACHMENT_SERVICE_TYPE
+ )
+ .map((download: any) => {
+ const downloadObj = downloads[download]
+ const progress = downloads[download]?.status?.percentLoaded || 0
+ const status = downloads[download]?.status?.status
+ const service = downloads[download]?.service
+ return (
+
-
+ {Object.keys(downloads).map((download: any) => {
+ const downloadObj = downloads[download]
+ const progress = downloads[download]?.status?.percentLoaded || 0
+ return (
+
+ {item.content}
+
+ ))}
+ -
+ {videos.map((video) => (
+
+
+ )
+}
+
+export default LazyLoad
diff --git a/src/components/common/Notification/Notification.tsx b/src/components/common/Notification/Notification.tsx
new file mode 100644
index 0000000..501f081
--- /dev/null
+++ b/src/components/common/Notification/Notification.tsx
@@ -0,0 +1,86 @@
+import { useDispatch, useSelector } from 'react-redux'
+import { toast, ToastContainer, Zoom, Slide } from 'react-toastify'
+import { removeNotification } from '../../../state/features/notificationsSlice'
+import 'react-toastify/dist/ReactToastify.css'
+import { RootState } from '../../../state/store'
+
+const Notification = () => {
+ const dispatch = useDispatch()
+
+ const { alertTypes } = useSelector((state: RootState) => state.notifications)
+
+ if (alertTypes.alertError) {
+ toast.error(`❌ ${alertTypes?.alertError}`, {
+ position: 'bottom-right',
+ autoClose: 4000,
+ hideProgressBar: false,
+ closeOnClick: true,
+ pauseOnHover: true,
+ draggable: true,
+ progress: undefined,
+ icon: false
+ })
+ dispatch(removeNotification())
+ }
+ if (alertTypes.alertSuccess) {
+ toast.success(`✔️ ${alertTypes?.alertSuccess}`, {
+ position: 'bottom-right',
+ autoClose: 4000,
+ hideProgressBar: false,
+ closeOnClick: true,
+ pauseOnHover: true,
+ draggable: true,
+ progress: undefined,
+ icon: false
+ })
+ dispatch(removeNotification())
+ }
+ if (alertTypes.alertInfo) {
+ toast.info(`${alertTypes?.alertInfo}`, {
+ position: 'top-right',
+ autoClose: 1300,
+ hideProgressBar: false,
+ closeOnClick: true,
+ pauseOnHover: true,
+ draggable: true,
+ progress: undefined,
+ theme: 'light'
+ })
+ dispatch(removeNotification())
+ }
+
+ if (alertTypes.alertInfo) {
+ return (
+
+
+
+ {loading ? (
+ 
+ )}
+
+ )
+}
+
+export default ResponsiveImage
diff --git a/src/components/common/Tipping/Tipping.tsx b/src/components/common/Tipping/Tipping.tsx
new file mode 100644
index 0000000..ca01dab
--- /dev/null
+++ b/src/components/common/Tipping/Tipping.tsx
@@ -0,0 +1,289 @@
+import {
+ Avatar,
+ Box,
+ Button,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ Input,
+ InputAdornment,
+ InputLabel,
+ Tooltip,
+ Typography,
+ useTheme
+} from '@mui/material'
+import React, { useCallback, useState } from 'react'
+import { CardContentContainerComment } from '../../../pages/BlogList/PostPreview-styles'
+import { StyledCardHeaderComment } from '../../../pages/BlogList/PostPreview-styles'
+import { StyledCardColComment } from '../../../pages/BlogList/PostPreview-styles'
+import { AuthorTextComment } from '../../../pages/BlogList/PostPreview-styles'
+import { StyledCardContentComment } from '../../../pages/BlogList/PostPreview-styles'
+import MenuItem from '@mui/material/MenuItem'
+import Select, { SelectChangeEvent } from '@mui/material/Select'
+import { useDispatch, useSelector } from 'react-redux'
+import { RootState } from '../../../state/store'
+import Portal from '../Portal'
+import MonetizationOnIcon from '@mui/icons-material/MonetizationOn'
+interface TippingProps {
+ name: string
+ onSubmit: () => void
+ onClose: () => void
+ onlyIcon?: boolean
+}
+import QORT from '../../../assets/img/qort.png'
+import ARRR from '../../../assets/img/arrr.png'
+import LTC from '../../../assets/img/ltc.png'
+import BTC from '../../../assets/img/btc.png'
+import DOGE from '../../../assets/img/doge.png'
+import DGB from '../../../assets/img/dgb.png'
+import RVN from '../../../assets/img/rvn.png'
+import { setNotification } from '../../../state/features/notificationsSlice'
+const coins = [
+ { value: 'QORT', label: 'QORT' },
+ { value: 'ARRR', label: 'ARRR' },
+ { value: 'LTC', label: 'LTC' },
+ { value: 'BTC', label: 'BTC' },
+ { value: 'DOGE', label: 'DOGE' },
+ { value: 'DGB', label: 'DGB' },
+ { value: 'RVN', label: 'RVN' }
+]
+export const Tipping = ({
+ onSubmit,
+ onClose,
+ name,
+ onlyIcon
+}: TippingProps) => {
+ const { user } = useSelector((state: RootState) => state.auth)
+ const [isOpen, setIsOpen] = useState-
+ {videos.map((video) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {children}+ case 'heading-2': + return ( +
+ {children} +
+ ) + case 'heading-3': + return ( ++ {children} +
+ ) + case 'code-block': + return ( +
+ {children}
+
+ )
+ case 'code-line':
+ return {children}
+ case 'link':
+ return (
+
+ {children}
+
+ )
+ default:
+ return (
+ + {children} +
+ ) + } +} + + +export const renderLeaf = ({ attributes, children, leaf }: RenderLeafProps) => { + let el = children + + if (leaf.bold) { + el = {el} + } + + if (leaf.italic) { + el = {el} + } + + if (leaf.underline) { + el = {el} + } + + if (leaf.link) { + el = ( + + {el} + + ) + } + + return {el} +} \ No newline at end of file diff --git a/src/components/editor/ReadOnlySlate.tsx b/src/components/editor/ReadOnlySlate.tsx new file mode 100644 index 0000000..cd2616c --- /dev/null +++ b/src/components/editor/ReadOnlySlate.tsx @@ -0,0 +1,25 @@ +import React, { useMemo } from 'react'; +import { createEditor, Descendant, Editor } from 'slate'; +import { withReact, Slate, Editable, RenderElementProps, RenderLeafProps } from 'slate-react'; +import { renderElement, renderLeaf } from './BlogEditor'; + +interface ReadOnlySlateProps { + content: any + mode?: string +} +const ReadOnlySlate: React.FC-
+ {fullNotifications.map((notification: any, index: number) => (
+
+
+
+ )
+}
diff --git a/src/components/modals/EditBlogModal.tsx b/src/components/modals/EditBlogModal.tsx
new file mode 100644
index 0000000..631ac25
--- /dev/null
+++ b/src/components/modals/EditBlogModal.tsx
@@ -0,0 +1,247 @@
+import React, { useState } from 'react'
+import {
+ Box,
+ Button,
+ TextField,
+ Typography,
+ Modal,
+ Select,
+ MenuItem,
+ FormControl,
+ InputLabel,
+ SelectChangeEvent,
+ OutlinedInput,
+ Chip,
+ IconButton
+} from '@mui/material'
+import { useDispatch } from 'react-redux'
+import { togglePublishBlogModal } from '../../state/features/globalSlice'
+import AddIcon from '@mui/icons-material/Add'
+import CloseIcon from '@mui/icons-material/Close'
+import { styled } from '@mui/system'
+interface SelectOption {
+ id: string
+ name: string
+}
+interface MyModalProps {
+ open: boolean
+ onClose: () => void
+ onPublish: (
+ title: string,
+ description: string,
+ category: string,
+ tags: string[]
+ ) => Promise
+
+ Error loading content: Invalid Data
+
+ }
+ >
+
+
+
+
+ )
+ }
+ if (section?.type === 'image') {
+ return (
+
+
+ Error loading content: Invalid Data
+
+ }
+ >
+
+ 
+
+
+
+ )
+ }
+ if (section?.type === 'video') {
+ return (
+
+
+ Error loading content: Invalid Data
+
+ }
+ >
+
+
+
+
+
+
+ )
+ }
+ if (section?.type === 'audio') {
+ return (
+
+
+ Error loading content: Invalid Data
+
+ }
+ >
+
+
+ {
+ if (!blog || !postId) return
+
+ const formBlogId = addPrefix(blog)
+ const formPostId =
+ buildIdentifierFromCreateTitleIdAndId(
+ formBlogId,
+ postId
+ )
+ if (audioPostId && formPostId !== audioPostId) {
+ tempSaveAudio.current = {
+ ...(tempSaveAudio.current || {}),
+ currentSelection: section,
+ message:
+ 'You are current on a playlist. Would you like to switch?'
+ }
+ setisOpenSwitchPlaylistModal(true)
+ } else {
+ if (!audios && saveAudio?.current) {
+ const findIndex = (
+ saveAudio?.current?.audios || []
+ ).findIndex(
+ (item: any) =>
+ item.identifier ===
+ section.content.identifier
+ )
+ dispatch(setAudio(saveAudio?.current))
+ dispatch(setCurrAudio(findIndex))
+ return
+ }
+
+ const findIndex = (audios || []).findIndex(
+ (item) =>
+ item.identifier ===
+ section.content.identifier
+ )
+ if (findIndex >= 0) {
+ dispatch(setCurrAudio(findIndex))
+ }
+ }
+ }}
+ title={section.content?.title}
+ description={section.content?.description}
+ author=""
+ />
+
+
+
+
+ )
+ }
+ if (section?.type === 'file') {
+ return (
+
+
+ Error loading content: Invalid Data
+
+ }
+ >
+
+
+
+
+
+
+ )
+ }
+ })}
+
+
+ Error loading content: Invalid Data
+
+ }
+ >
+
+
+
+
+ )
+ }
+ if (section?.type === 'image') {
+ return (
+
+
+ Error loading content: Invalid Data
+
+ }
+ >
+
+
+
+
+
+
+
+ )
+ }
+
+ if (section?.type === 'video') {
+ return (
+
+
+ Error loading content: Invalid Data
+
+ }
+ >
+
+
+
+
+
+
+
+
+ )
+ }
+ if (section?.type === 'audio') {
+ return (
+
+
+ Error loading content: Invalid Data
+
+ }
+ >
+
+
+ {
+ if (!blog || !postId) return
+ const formBlogId = addPrefix(blog)
+ const formPostId =
+ buildIdentifierFromCreateTitleIdAndId(
+ formBlogId,
+ postId
+ )
+ if (formPostId !== audioPostId) {
+ tempSaveAudio.current = {
+ ...(tempSaveAudio.current || {}),
+ currentSelection: section,
+ message:
+ 'You are current on a playlist. Would you like to switch?'
+ }
+ setisOpenSwitchPlaylistModal(true)
+ } else {
+ const findIndex = (
+ audios || []
+ ).findIndex(
+ (item) =>
+ item.identifier ===
+ section.content.identifier
+ )
+ if (findIndex >= 0) {
+ dispatch(setCurrAudio(findIndex))
+ }
+ }
+ }}
+ title={section.content?.title}
+ description={section.content?.description}
+ author=""
+ />
+
+
+
+
+ )
+ }
+ if (section?.type === 'file') {
+ return (
+
+
+ Error loading content: Invalid Data
+
+ }
+ >
+
+
+
+
+
+
+ )
+ }
+ })}
+ CreatEditProfile
+ )
+}
diff --git a/src/pages/CreatePost/CreatePost-styles.ts b/src/pages/CreatePost/CreatePost-styles.ts
new file mode 100644
index 0000000..da84d3a
--- /dev/null
+++ b/src/pages/CreatePost/CreatePost-styles.ts
@@ -0,0 +1,14 @@
+import { styled } from '@mui/system'
+
+import { Button } from '@mui/material'
+
+export const BuilderButton = styled(Button)(({ theme }) => ({
+ backgroundColor: theme.palette.primary.light,
+ color: theme.palette.text.primary,
+ fontFamily: 'Arial',
+ transition: "all 0.3s ease-in-out",
+ "&:hover": {
+ cursor: "pointer",
+ filter: "brightness(0.9)"
+ }
+}));
\ No newline at end of file
diff --git a/src/pages/CreatePost/CreatePost.tsx b/src/pages/CreatePost/CreatePost.tsx
new file mode 100644
index 0000000..e66783d
--- /dev/null
+++ b/src/pages/CreatePost/CreatePost.tsx
@@ -0,0 +1,194 @@
+import { Box, Button, Typography } from '@mui/material'
+import React, { useMemo, useState } from 'react'
+import { ReusableModal } from '../../components/modals/ReusableModal'
+import { CreatePostBuilder } from './CreatePostBuilder'
+import { CreatePostMinimal } from './CreatePostMinimal'
+import HandymanRoundedIcon from '@mui/icons-material/HandymanRounded'
+import HourglassFullRoundedIcon from '@mui/icons-material/HourglassFullRounded'
+import { display } from '@mui/system'
+import { useDispatch, useSelector } from 'react-redux'
+import { setIsLoadingGlobal } from '../../state/features/globalSlice'
+import { useParams } from 'react-router-dom'
+import { checkStructure } from '../../utils/checkStructure'
+import { RootState } from '../../state/store'
+import {
+ addPrefix,
+ buildIdentifierFromCreateTitleIdAndId
+} from '../../utils/blogIdformats'
+import { Tipping } from '../../components/common/Tipping/Tipping'
+type EditorType = 'minimal' | 'builder'
+interface CreatePostProps {
+ mode?: string
+}
+export const CreatePost = ({ mode }: CreatePostProps) => {
+ const { user: username, postId, blog } = useParams()
+ const fullPostId = useMemo(() => {
+ if (!blog || !postId || mode !== 'edit') return ''
+ const formBlogId = addPrefix(blog)
+ const formPostId = buildIdentifierFromCreateTitleIdAndId(formBlogId, postId)
+ return formPostId
+ }, [blog, postId, mode])
+ const { user } = useSelector((state: RootState) => state.auth)
+
+ const [toggleEditorType, setToggleEditorType] = useState
+ {Array.from({ length: gridItemCount }, (_, i) => (
+
+ ))}
+
+
+
+ {editingSection &&
+ editingSection.id === section.id ? null : (
+
+
+ removeSection(section)}
+ sx={{
+ cursor: 'pointer',
+ height: '18px',
+ width: 'auto'
+ }}
+ />
+ editSection(section)}
+ sx={{
+ cursor: 'pointer',
+ height: '18px',
+ width: 'auto'
+ }}
+ />
+
+
+ )}
+
+
+ )
+ }
+ if (section.type === 'image') {
+ return (
+
+
+
+
+
+ removeSection(section)}
+ sx={{
+ cursor: 'pointer',
+ height: '18px',
+ width: 'auto'
+ }}
+ />
+ editImage(base64, section)}
+ >
+
+
+
+
+
+ )
+ }
+
+ if (section.type === 'video') {
+ return (
+
+
+
+
+ removeSection(section)}
+ sx={{
+ cursor: 'pointer',
+ height: '18px',
+ width: 'auto'
+ }}
+ />
+
+ editVideo(
+ {
+ name: video.name,
+ identifier: video.identifier,
+ service: video.service,
+ title: video?.metadata?.title,
+ description: video?.metadata?.description
+ },
+ section
+ )
+ }
+ />
+
+
+
+
+ )
+ }
+ if (section.type === 'audio') {
+ return (
+
+
+
+ {}}
+ title={section.content?.title}
+ description={section.content?.description}
+ author=""
+ />
+
+ removeSection(section)}
+ sx={{
+ cursor: 'pointer',
+ height: '18px',
+ width: 'auto'
+ }}
+ />
+
+ editAudio(
+ {
+ name: audio.name,
+ identifier: audio.identifier,
+ service: audio.service,
+ title: audio?.metadata?.title,
+ description: audio?.metadata?.description
+ },
+ section
+ )
+ }
+ />
+
+
+
+
+ )
+ }
+ if (section.type === 'file') {
+ return (
+
+
+
+
+ removeSection(section)}
+ sx={{
+ cursor: 'pointer',
+ height: '18px',
+ width: 'auto'
+ }}
+ />
+
+
+
+
+ )
+ }
+ })}
+
+
+ {editingSection &&
+ editingSection.id === section.id ? null : (
+
+
+
+ removeSection(section, rowIndex)
+ }
+ sx={{
+ cursor: 'pointer',
+ height: '18px',
+ width: 'auto'
+ }}
+ />
+ editSection(section)}
+ sx={{
+ cursor: 'pointer',
+ height: '18px',
+ width: 'auto'
+ }}
+ />
+
+
+ )}
+
+
+ )
+ }
+ if (section.type === 'image') {
+ return (
+
+
+
+
+
+ removeSection(section, rowIndex)}
+ sx={{
+ cursor: 'pointer',
+ height: '18px',
+ width: 'auto'
+ }}
+ />
+ editImage(base64, section)}
+ >
+
+
+
+
+
+ )
+ }
+
+ if (section.type === 'video') {
+ return (
+
+
+
+
+ removeSection(section, rowIndex)}
+ sx={{
+ cursor: 'pointer',
+ height: '18px',
+ width: 'auto'
+ }}
+ />
+
+ editVideo(
+ {
+ name: video.name,
+ identifier: video.identifier,
+ service: video.service,
+ title: video?.metadata?.title,
+ description: video?.metadata?.description
+ },
+ section
+ )
+ }
+ />
+
+
+
+
+ )
+ }
+ if (section.type === 'audio') {
+ return (
+
+
+
+ {}}
+ title={section.content?.title}
+ description={section.content?.description}
+ author=""
+ />
+
+ removeSection(section, rowIndex)}
+ sx={{
+ cursor: 'pointer',
+ height: '18px',
+ width: 'auto'
+ }}
+ />
+
+ editAudio(
+ {
+ name: audio.name,
+ identifier: audio.identifier,
+ service: audio.service,
+ title: audio?.metadata?.title,
+ description: audio?.metadata?.description
+ },
+ section
+ )
+ }
+ />
+
+
+
+
+ )
+ }
+ if (section.type === 'file') {
+ return (
+
+
+
+
+ removeSection(section, rowIndex)}
+ sx={{
+ cursor: 'pointer',
+ height: '18px',
+ width: 'auto'
+ }}
+ />
+
+
+
+
+ )
+ }
+ })}
+ {row.type === 'image' && row.ids.length < 3 && (
+ -
+ {navItems.map((navItem: any) => (
+
Home
+ )
+}
diff --git a/src/pages/Mail/AliasMail.tsx b/src/pages/Mail/AliasMail.tsx
new file mode 100644
index 0000000..411863b
--- /dev/null
+++ b/src/pages/Mail/AliasMail.tsx
@@ -0,0 +1,279 @@
+import React, {
+ FC,
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState
+} from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useDispatch, useSelector } from 'react-redux'
+import { RootState } from '../../state/store'
+import EditIcon from '@mui/icons-material/Edit'
+import { Box, Button, Input, Typography, useTheme } from '@mui/material'
+import { useFetchPosts } from '../../hooks/useFetchPosts'
+import LazyLoad from '../../components/common/LazyLoad'
+import { removePrefix } from '../../utils/blogIdformats'
+import { NewMessage } from './NewMessage'
+import Tabs from '@mui/material/Tabs'
+import Tab from '@mui/material/Tab'
+import { useFetchMail } from '../../hooks/useFetchMail'
+import { ShowMessage } from './ShowMessage'
+import { fetchAndEvaluateMail } from '../../utils/fetchMail'
+import { addToHashMapMail } from '../../state/features/mailSlice'
+import {
+ setIsLoadingGlobal,
+ setUserAvatarHash
+} from '../../state/features/globalSlice'
+import SimpleTable from './MailTable'
+import { MAIL_SERVICE_TYPE } from '../../constants/mail'
+import { BlogPost } from '../../state/features/blogSlice'
+
+interface AliasMailProps {
+ value: string
+}
+export const AliasMail = ({ value }: AliasMailProps) => {
+ const theme = useTheme()
+ const { user } = useSelector((state: RootState) => state.auth)
+ const [isOpen, setIsOpen] = useState
+ {label}
+ {
+ setValueTab(0)
+ const newList = [...alias]
+
+ newList.splice(index, 1)
+
+ setAlias(newList)
+ }}
+ >
+
+
+ )
+ }
+
+ return (
+
+ {value === index && children}
+
+ )
+}
\ No newline at end of file
diff --git a/src/pages/Mail/MailTable.tsx b/src/pages/Mail/MailTable.tsx
new file mode 100644
index 0000000..a678e6d
--- /dev/null
+++ b/src/pages/Mail/MailTable.tsx
@@ -0,0 +1,190 @@
+import * as React from 'react'
+import Table from '@mui/material/Table'
+import TableBody from '@mui/material/TableBody'
+import TableCell from '@mui/material/TableCell'
+import TableContainer from '@mui/material/TableContainer'
+import TableHead from '@mui/material/TableHead'
+import TableRow from '@mui/material/TableRow'
+import Paper from '@mui/material/Paper'
+import { Avatar, Box } from '@mui/material'
+import { useSelector } from 'react-redux'
+import { RootState } from '../../state/store'
+import { formatTimestamp } from '../../utils/time'
+
+const tableCellFontSize = '16px'
+
+interface Data {
+ name: string
+ description: string
+ createdAt: number
+ user: string
+ id: string
+ tags: string[]
+ subject?: string
+}
+
+interface ColumnData {
+ dataKey: keyof Data
+ label: string
+ numeric?: boolean
+ width?: number
+}
+
+const columns: ColumnData[] = [
+ {
+ label: 'Sender',
+ dataKey: 'user',
+ width: 200
+ },
+ {
+ label: 'Subject',
+ dataKey: 'description'
+ },
+ {
+ label: 'Date',
+ dataKey: 'createdAt',
+ numeric: true,
+ width: 200
+ }
+]
+
+// Replace this with your own data
+const rows: Data[] = [
+ {
+ name: 'Sample 1',
+ description: 'Sample description 1',
+ createdAt: 1682857406070,
+ user: 'tester1',
+ id: 'qortal_qmail_Phil_ViVrF2_mail_NnHcWj',
+ tags: ['attach: 0']
+ },
+ {
+ name: 'Sample 2',
+ description: 'Sample description 2',
+ createdAt: 1682857406071,
+ user: 'tester2',
+ id: 'qortal_qmail_Phil_ViVrF2_mail_NnHcWk',
+ tags: ['attach: 1']
+ }
+ // Add more rows as needed
+]
+
+function fixedHeaderContent() {
+ return (
+