denis/peliprint
denis/peliprint
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update resources/scripts/components/dashboard/AccountApiContainer.tsx

Browse source
This commit is contained in:
denis 2024-11-03 02:32:09 -05:00
parent 56c61599c0
commit c73b2a828d
1 changed files with 9 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
resources/scripts/components/dashboard/AccountApiContainer.tsx
View file

@ -10,6 +10,7 @@ import FlashMessageRender from '@/components/FlashMessageRender';
import { format } from 'date-fns'; import { format } from 'date-fns';
import PageContentBlock from '@/components/elements/PageContentBlock'; import PageContentBlock from '@/components/elements/PageContentBlock';
import tw from 'twin.macro'; import tw from 'twin.macro';
import { useTranslation } from 'react-i18next';
import GreyRowBox from '@/components/elements/GreyRowBox'; import GreyRowBox from '@/components/elements/GreyRowBox';
import { Dialog } from '@/components/elements/dialog'; import { Dialog } from '@/components/elements/dialog';
import { useFlashKey } from '@/plugins/useFlash'; import { useFlashKey } from '@/plugins/useFlash';
@ -19,6 +20,8 @@ import BeforeContent from '@/blueprint/components/Account/API/BeforeContent';
import AfterContent from '@/blueprint/components/Account/API/AfterContent'; import AfterContent from '@/blueprint/components/Account/API/AfterContent';
export default () => { export default () => {
const { t } = useTranslation(['dashboard/account', 'strings']);
const [deleteIdentifier, setDeleteIdentifier] = useState(''); const [deleteIdentifier, setDeleteIdentifier] = useState('');
const [keys, setKeys] = useState<ApiKey[]>([]); const [keys, setKeys] = useState<ApiKey[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
@ -65,7 +68,7 @@ export default () => {
</Dialog.Confirm> </Dialog.Confirm>
{keys.length === 0 ? ( {keys.length === 0 ? (
<p css={tw`text-center text-sm`}> <p css={tw`text-center text-sm`}>
{loading ? 'Loading...' : 'No API keys exist for this account.'} {loading ? t('loading', { ns: 'strings' }) : 'No API keys exist for this account.'}
</p> </p>
) : ( ) : (
keys.map((key, index) => ( keys.map((key, index) => (
@ -77,8 +80,10 @@ export default () => {
<div css={tw`ml-4 flex-1 overflow-hidden`}> <div css={tw`ml-4 flex-1 overflow-hidden`}>
<p css={tw`text-sm break-words`}>{key.description}</p> <p css={tw`text-sm break-words`}>{key.description}</p>
<p css={tw`text-2xs text-neutral-300 uppercase`}> <p css={tw`text-2xs text-neutral-300 uppercase`}>
Last used:&nbsp; {t('last_used', { ns: 'strings' })}:&nbsp;
{key.lastUsedAt ? format(key.lastUsedAt, 'MMM do, yyyy HH:mm') : 'Never'} {key.lastUsedAt
? format(key.lastUsedAt, 'MMM do, yyyy HH:mm')
: t('never', { ns: 'strings' })}
</p> </p>
</div> </div>
<p css={tw`text-sm ml-4 hidden md:block`}> <p css={tw`text-sm ml-4 hidden md:block`}>
@ -98,4 +103,4 @@ export default () => {
<AfterContent /> <AfterContent />
</PageContentBlock> </PageContentBlock>
); );
}; };