Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-07-23 04:36:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

started app browser

Browse Source
This commit is contained in:
PhilReact
2024-10-18 02:50:19 +03:00
parent bd170d8481
commit 28c2dfbb7a
16 changed files with 795 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
src/components/Apps/AppsHome.tsx
View File

@@ -1,56 +1,81 @@
import React, { useMemo, useState } from 'react'
import { AppCircle, AppCircleContainer, AppCircleLabel, AppsContainer, AppsParent } from './Apps-styles'
import { Avatar, ButtonBase } from '@mui/material'
import { Add } from '@mui/icons-material'
import { getBaseApiReact } from '../../App'
import React, { useMemo, useState } from "react";
import {
AppCircle,
AppCircleContainer,
AppCircleLabel,
AppsContainer,
AppsParent,
} from "./Apps-styles";
import { Avatar, ButtonBase } from "@mui/material";
import { Add } from "@mui/icons-material";
import { getBaseApiReact } from "../../App";
import LogoSelected from "../../assets/svgs/LogoSelected.svg";
import { executeEvent } from "../../utils/events";
export const AppsHome = ({downloadedQapps, setMode}) => {
export const AppsHome = ({ downloadedQapps, setMode }) => {
return (
<AppsParent>
<AppsContainer>
<ButtonBase onClick={()=> {
setMode('library')
}}>
<AppCircleContainer>
<AppsContainer>
<ButtonBase
onClick={() => {
setMode("library");
}}
>
<AppCircleContainer>
<AppCircle>
<Add>+</Add>
<Add>+</Add>
</AppCircle>
<AppCircleLabel>Add</AppCircleLabel>
</AppCircleContainer>
</AppCircleContainer>
</ButtonBase>
{downloadedQapps?.map((app) => {
return (
<ButtonBase
sx={{
height: "80px",
width: "60px",
}}
onClick={()=> {
executeEvent("addTab", {
data: app
})
}}
>
<AppCircleContainer>
<AppCircle
sx={{
border: "none",
}}
>
<Avatar
sx={{
height: "31px",
width: "31px",
'& img': {
objectFit: 'fill',
}
}}
alt={app?.name}
src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${
app?.name
}/qortal_avatar?async=true`}
>
<img
style={{
width: "31px",
height: "auto",
}}
src={LogoSelected}
alt="center-icon"
/>
</Avatar>
</AppCircle>
<AppCircleLabel>
{app?.name}
</AppCircleLabel>
</AppCircleContainer>
</ButtonBase>
{downloadedQapps?.map((qapp)=> {
return (
<ButtonBase sx={{
height: '80px',
width: '60px'
}}>
<AppCircleContainer>
<AppCircle sx={{
border: 'none'
}}>
<Avatar
sx={{
height: "31px",
width: "31px",
}}
alt={qapp?.name}
src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${qapp?.name}/qortal_avatar?async=true`}
>
<img style={{
width: '31px',
height: 'auto'
}} src={LogoSelected} alt="center-icon" />
</Avatar>
</AppCircle>
<AppCircleLabel>{qapp?.metadata?.title || qapp?.name}</AppCircleLabel>
</AppCircleContainer>
</ButtonBase>
)
})}
</AppsContainer>
</AppsParent>
)
}
);
})}
</AppsContainer>
);
};