louiscklaw/lettersoup-online
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

build ok,

Browse Source
This commit is contained in:
louiscklaw
2025-04-14 11:05:23 +08:00
parent c33cabee4a
commit 187fe40c08
2 changed files with 18 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
002_source/cms/src/components/dashboard/overview/helper-widget.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import * as React from 'react'; import * as React from 'react';
import Card from '@mui/material/Card'; import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions'; import CardActions from '@mui/material/CardActions';
@@ -6,6 +8,7 @@ import Divider from '@mui/material/Divider';
import Stack from '@mui/material/Stack'; import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import type { Icon } from '@phosphor-icons/react/dist/lib/types'; import type { Icon } from '@phosphor-icons/react/dist/lib/types';
import { useTranslation } from 'react-i18next';
export interface HelperWidgetProps { export interface HelperWidgetProps {
action: React.ReactNode; action: React.ReactNode;
@@ -16,6 +19,7 @@ export interface HelperWidgetProps {
} }
export function HelperWidget({ action, description, icon: Icon, label, title }: HelperWidgetProps): React.JSX.Element { export function HelperWidget({ action, description, icon: Icon, label, title }: HelperWidgetProps): React.JSX.Element {
const { t } = useTranslation();
return ( return (
<Card> <Card>
<CardContent> <CardContent>
@@ -34,13 +38,13 @@ export function HelperWidget({ action, description, icon: Icon, label, title }:
}} }}
> >
<Icon fontSize="var(--icon-fontSize-md)" /> <Icon fontSize="var(--icon-fontSize-md)" />
<Typography variant="subtitle2">{label}</Typography> <Typography variant="subtitle2">{t(label)}</Typography>
</Stack> </Stack>
</div> </div>
<Stack spacing={1}> <Stack spacing={1}>
<Typography variant="h6">{title}</Typography> <Typography variant="h6">{t(title)}</Typography>
<Typography color="text.secondary" variant="body2"> <Typography color="text.secondary" variant="body2">
{description} {t(description)}
</Typography> </Typography>
</Stack> </Stack>
</Stack> </Stack>

17
002_source/cms/src/components/dashboard/overview/subscriptions.tsx
View File

@@ -1,3 +1,5 @@
'use client';
import * as React from 'react'; import * as React from 'react';
import Avatar from '@mui/material/Avatar'; import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button'; import Button from '@mui/material/Button';
@@ -16,6 +18,7 @@ import Typography from '@mui/material/Typography';
import { ArrowRight as ArrowRightIcon } from '@phosphor-icons/react/dist/ssr/ArrowRight'; import { ArrowRight as ArrowRightIcon } from '@phosphor-icons/react/dist/ssr/ArrowRight';
import { ContactlessPayment as ContactlessPaymentIcon } from '@phosphor-icons/react/dist/ssr/ContactlessPayment'; import { ContactlessPayment as ContactlessPaymentIcon } from '@phosphor-icons/react/dist/ssr/ContactlessPayment';
import { DotsThree as DotsThreeIcon } from '@phosphor-icons/react/dist/ssr/DotsThree'; import { DotsThree as DotsThreeIcon } from '@phosphor-icons/react/dist/ssr/DotsThree';
import { useTranslation } from 'react-i18next';
export interface Subscription { export interface Subscription {
id: string; id: string;
@@ -31,6 +34,7 @@ export interface SubscriptionsProps {
} }
export function Subscriptions({ subscriptions }: SubscriptionsProps): React.JSX.Element { export function Subscriptions({ subscriptions }: SubscriptionsProps): React.JSX.Element {
const { t } = useTranslation();
return ( return (
<Card> <Card>
<CardHeader <CardHeader
@@ -39,7 +43,7 @@ export function Subscriptions({ subscriptions }: SubscriptionsProps): React.JSX.
<ContactlessPaymentIcon fontSize="var(--Icon-fontSize)" /> <ContactlessPaymentIcon fontSize="var(--Icon-fontSize)" />
</Avatar> </Avatar>
} }
title="Our subscriptions" title={t('Our subscriptions')}
/> />
<CardContent sx={{ pb: '8px' }}> <CardContent sx={{ pb: '8px' }}>
<List disablePadding> <List disablePadding>
@@ -51,7 +55,7 @@ export function Subscriptions({ subscriptions }: SubscriptionsProps): React.JSX.
<Divider /> <Divider />
<CardActions> <CardActions>
<Button color="secondary" endIcon={<ArrowRightIcon />} size="small"> <Button color="secondary" endIcon={<ArrowRightIcon />} size="small">
See all subscriptions {t('See all subscriptions')}
</Button> </Button>
</CardActions> </CardActions>
</Card> </Card>
@@ -59,11 +63,12 @@ export function Subscriptions({ subscriptions }: SubscriptionsProps): React.JSX.
} }
function SubscriptionItem({ subscription }: { subscription: Subscription }): React.JSX.Element { function SubscriptionItem({ subscription }: { subscription: Subscription }): React.JSX.Element {
const { t } = useTranslation();
const { label, color } = ( const { label, color } = (
{ {
paid: { label: 'Paid', color: 'success' }, paid: { label: t('Paid'), color: 'success' },
canceled: { label: 'Canceled', color: 'error' }, canceled: { label: t('Canceled'), color: 'error' },
expiring: { label: 'Expiring', color: 'warning' }, expiring: { label: t('Expiring'), color: 'warning' },
} as const } as const
)[subscription.status]; )[subscription.status];
@@ -90,7 +95,7 @@ function SubscriptionItem({ subscription }: { subscription: Subscription }): Rea
<Typography sx={{ whiteSpace: 'nowrap' }} variant="body2"> <Typography sx={{ whiteSpace: 'nowrap' }} variant="body2">
{subscription.costs}{' '} {subscription.costs}{' '}
<Typography color="text.secondary" component="span" variant="inherit"> <Typography color="text.secondary" component="span" variant="inherit">
/{subscription.billingCycle} /{t(subscription.billingCycle)}
</Typography> </Typography>
</Typography> </Typography>
} }