bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor status Card description with UI components

Browse source
This commit is contained in:
Alex Gleason 2022-08-03 11:05:57 -05:00
parent 19ffcd2233
commit 0bffe4a227
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
app/soapbox/features/status/components/card.tsx
View file

@ -4,7 +4,7 @@ import React, { useState, useEffect } from 'react';
import Blurhash from 'soapbox/components/blurhash';
import Icon from 'soapbox/components/icon';
import { HStack, Stack } from 'soapbox/components/ui';
import { HStack, Stack, Text } from 'soapbox/components/ui';
import { normalizeAttachment } from 'soapbox/normalizers';
import type { Card as CardEntity, Attachment } from 'soapbox/types/entities';
@ -147,22 +147,27 @@ const Card: React.FC<ICard> = ({
rel='noopener'
target='_blank'
>
<strong>{trimmedTitle}</strong>
<span>{trimmedTitle}</span>
</a>
) : (
<strong title={trimmedTitle}>{trimmedTitle}</strong>
<span title={trimmedTitle}>{trimmedTitle}</span>
);
const description = (
<Stack space={2} className='flex-1 overflow-hidden p-4'>
{trimmedTitle && (
<span className='block font-medium text-gray-800 dark:text-gray-200 no-underline'>{title}</span>
<Text weight='bold'>{title}</Text>
)}
{trimmedDescription && (
<p className='text-gray-500 dark:text-gray-400'>{trimmedDescription}</p>
<Text>{trimmedDescription}</Text>
)}
<HStack>
<Icon src={require('@tabler/icons/link.svg')} /> {card.provider_name}
<HStack space={1} alignItems='center'>
<Text tag='span' theme='muted'>
<Icon src={require('@tabler/icons/link.svg')} />
</Text>
<Text tag='span' theme='muted'>
{card.provider_name}
</Text>
</HStack>
</Stack>
);