jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

🎨 Common card component + flex direction fix

Browse Source
This commit is contained in:
Tagaishi
2023-07-31 01:13:36 +02:00
parent 3b95b8d8c8
commit 6c1909e627
1 changed files with 37 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/widgets/media-requests/MediaRequestStatsTile.tsx
View File

@@ -7,6 +7,7 @@ import { WidgetLoading } from '../loading';
import { IWidget } from '../widgets'; import { IWidget } from '../widgets';
import { useMediaRequestQuery } from './media-request-query'; import { useMediaRequestQuery } from './media-request-query';
import { MediaRequestStatus } from './media-request-types'; import { MediaRequestStatus } from './media-request-types';
import { string } from 'zod';
const definition = defineWidget({ const definition = defineWidget({
id: 'media-requests-stats', id: 'media-requests-stats',
@@ -14,10 +15,10 @@ const definition = defineWidget({
options: { options: {
direction: { direction: {
type: 'select', type: 'select',
defaultValue: 'horizontal', defaultValue: 'row' as 'row' | 'column',
data: [ data: [
{ label: 'Horizontal', value: 'horizontal' }, { label: 'Horizontal', value: 'row' },
{ label: 'Vertical', value: 'vertical' }, { label: 'Vertical', value: 'column' },
], ],
}, },
}, },
@@ -49,40 +50,42 @@ function MediaRequestStatsTile({ widget }: MediaRequestStatsWidgetProps) {
w="100%" w="100%"
h="100%" h="100%"
gap="md" gap="md"
direction={ widget.properties.direction != 'vertical' ? 'row' : 'column' } direction={ widget.properties.direction?? 'row' }
> >
<Card w="100%" h="100%" withBorder style={{flex:"1 1 auto"}}> <StatCard
<Stack w="100%" h="100%" align="center" justify="center" spacing={0}> number={data.filter((x) => x.status === MediaRequestStatus.PendingApproval).length}
<Text align="center"> label={t('stats.pending')}
{data.filter((x) => x.status === MediaRequestStatus.PendingApproval).length} />
</Text> <StatCard
<Text color="dimmed" align="center" size="xs"> number={data.filter((x) => x.type === 'tv').length}
{t('stats.pending')} label={t('stats.tvRequests')}
</Text> />
</Stack> <StatCard
</Card> number={data.filter((x) => x.type === 'movie').length}
<Card w="100%" h="100%" withBorder style={{flex:"1 1 auto"}}> label={t('stats.movieRequests')}
<Stack w="100%" h="100%" align="center" justify="center" spacing={0}> />
<Text align="center">
{data.filter((x) => x.type === 'tv').length}
</Text>
<Text color="dimmed" align="center" size="xs">
{t('stats.tvRequests')}
</Text>
</Stack>
</Card>
<Card w="100%" h="100%" withBorder style={{flex:"1 1 auto"}}>
<Stack w="100%" h="100%" align="center" justify="center" spacing={0}>
<Text align="center">
{data.filter((x) => x.type === 'movie').length}
</Text>
<Text color="dimmed" align="center" size="xs">
{t('stats.movieRequests')}
</Text>
</Stack>
</Card>
</Flex> </Flex>
); );
} }
interface StatCardProps {
number: number;
label: string;
}
const StatCard = ({ number, label }: StatCardProps) => {
return (
<Card w="100%" h="100%" withBorder style={{flex:"1 1 auto"}}>
<Stack w="100%" h="100%" align="center" justify="center" spacing={0}>
<Text align="center">
{number}
</Text>
<Text color="dimmed" align="center" size="xs">
{label}
</Text>
</Stack>
</Card>
);
};
export default definition; export default definition;