63 lines
1.6 KiB
TypeScript
63 lines
1.6 KiB
TypeScript
import { Stack, Text } from '@mantine/core';
|
|
import { useCommonHooks, useQueryAPI } from 'hooks';
|
|
import { useEffect, useState } from 'react';
|
|
import { textClasses } from 'styles';
|
|
import AppItem from './AppItem';
|
|
|
|
function Applications({ contentType }: any) {
|
|
const { data: apps, isFetching: isAppsFetching } = useQueryAPI({
|
|
endpoint: 'api/apps',
|
|
});
|
|
const [applicationData, setApplicationData] = useState<any>([]);
|
|
const { isMobile } = useCommonHooks();
|
|
|
|
useEffect(() => {
|
|
if (apps && !isAppsFetching) {
|
|
setApplicationData(apps);
|
|
}
|
|
}, [apps, isAppsFetching]);
|
|
|
|
return (
|
|
<>
|
|
{applicationData.length > 0 && contentType.length > 0 && (
|
|
<Stack id='apps' style={{ gap: 0 }}>
|
|
<Text className={textClasses.sectionTitle} classNames={textClasses}>
|
|
Applications
|
|
</Text>
|
|
<Stack
|
|
style={{
|
|
gap: '.25rem',
|
|
backgroundSize: 'cover',
|
|
borderBottom: '0px solid',
|
|
display: 'grid',
|
|
gridColumnGap: '5px',
|
|
gridRowGap: '5px',
|
|
gridTemplateColumns: isMobile ? '1fr 1fr 1fr' : '1fr 1fr 1fr 1fr 1fr 1fr',
|
|
gridTemplateRows: '64px',
|
|
paddingBottom: 'var(--module-spacing)',
|
|
}}
|
|
>
|
|
{applicationData?.map((application: any) => {
|
|
if (
|
|
contentType.includes(application.filterName) ||
|
|
contentType.includes('All')
|
|
)
|
|
return (
|
|
<AppItem
|
|
key={application.name}
|
|
name={application.name}
|
|
url={application.url}
|
|
icon={application.icon}
|
|
category={application.category}
|
|
/>
|
|
);
|
|
})}
|
|
</Stack>
|
|
</Stack>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Applications;
|