moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor Icon component 

Added 'element' prop to Icon component, updated imports, and cleaned up spaces.
This commit is contained in:
danidfra 2024-07-28 23:16:32 -03:00
parent 65107a2117
commit 098b760b06
3 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/ui/button/button.tsx
View File

@ -17,6 +17,8 @@ interface IButton {
className?: string;
/** Prevent the button from being clicked. */
disabled?: boolean;
/** Specifies the media element type as 'svg' or 'img'. */
element?: 'svg' | 'img';
/** URL to an SVG icon to render inside the button. */
icon?: string;
/** Action when the button is clicked. */
@ -39,6 +41,7 @@ const Button = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.El
block = false,
children,
disabled = false,
element = 'svg',
icon,
onClick,
size = 'md',
@ -63,7 +66,7 @@ const Button = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.El
return null;
}
return <Icon src={icon} className='h-4 w-4' />;
return <Icon src={icon} className='h-4 w-4' element={element} />;
};
const handleClick: React.MouseEventHandler<HTMLButtonElement> = React.useCallback((event) => {

9
src/components/ui/icon/icon.tsx
View File

@ -17,15 +17,14 @@ interface IIcon extends Pick<React.SVGAttributes<SVGAElement>, 'strokeWidth'> {
src: string;
/** Width and height of the icon in pixels. */
size?: number;
/** Specifies the media element type as 'svg' or 'img'. */
element?: 'svg' | 'img';
/** Override the data-testid */
'data-testid'?: string;
}
/** Renders an SVG or image icon with optional counter. */
const Icon: React.FC<IIcon> = ({ src, alt, count, size, countMax, ...filteredProps }): JSX.Element => {
const isSVG = src.endsWith('.svg');
const Icon: React.FC<IIcon> = ({ src, alt, count, size, countMax, element, ...filteredProps }): JSX.Element => {
return (
<div
className='relative flex shrink-0 flex-col'
@ -36,7 +35,7 @@ const Icon: React.FC<IIcon> = ({ src, alt, count, size, countMax, ...filteredPro
<Counter count={count} countMax={countMax} />
</span>
) : null}
{isSVG ? (<SvgIcon src={src} size={size} alt={alt} {...filteredProps} />) : (<img src={src} width={size} height={size} alt={alt} {...filteredProps} />) }
{element === 'svg' ? (<SvgIcon src={src} size={size} alt={alt} {...filteredProps} />) : (<img src={src} width={size} height={size} alt={alt} {...filteredProps} />) }
</div>
);

22
src/features/zap/components/zap-pay-request-form.tsx
View File

@ -3,19 +3,17 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
import { zap } from 'soapbox/actions/interactions';
import { openModal, closeModal } from 'soapbox/actions/modals';
import chestIcon from 'soapbox/assets/icons/blue-chest.png';
import coinStack from 'soapbox/assets/icons/coin-stack.png';
import coinIcon from 'soapbox/assets/icons/coin.png';
import moneyBag from 'soapbox/assets/icons/money-bag.png';
import pileCoin from 'soapbox/assets/icons/pile-coin.png';
import Account from 'soapbox/components/account';
import { Stack, Button, Input } from 'soapbox/components/ui';
import { useAppDispatch } from 'soapbox/hooks';
import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities';
const chestIcon = require('soapbox/assets/icons/blue-chest.png');
const coinStack = require('soapbox/assets/icons/coin-stack.png');
const coinIcon = require('soapbox/assets/icons/coin.png');
const moneyBag = require('soapbox/assets/icons/money-bag.png');
const pileCoin = require('soapbox/assets/icons/pile-coin.png');
interface IZapPayRequestForm {
status?: StatusEntity;
@ -74,11 +72,11 @@ const ZapPayRequestForm = ({ account, status }: IZapPayRequestForm) => {
</div>
<div className='flex justify-center '>
<Button onClick={() => setZapAmount(50)} className='m-1' type='button' icon={coinIcon} theme={zapAmount === 50 ? 'primary' : 'muted'} text='50' />
<Button onClick={() => setZapAmount(200)} className='m-1' type='button' icon={coinStack} theme={zapAmount === 200 ? 'primary' : 'muted'} text='200' />
<Button onClick={() => setZapAmount(1_000)} className='m-1' type='button' icon={pileCoin} theme={zapAmount === 1_000 ? 'primary' : 'muted'} text='1K' />
<Button onClick={() => setZapAmount(3_000)} className='m-1' type='button' icon={moneyBag} theme={zapAmount === 3_000 ? 'primary' : 'muted'} text='3K' />
<Button onClick={() => setZapAmount(5_000)} className='m-1' type='button' icon={chestIcon} theme={zapAmount === 5_000 ? 'primary' : 'muted'} text='5K' />
<Button onClick={() => setZapAmount(50)} className='m-1' type='button' element='img' icon={coinIcon} theme={zapAmount === 50 ? 'primary' : 'muted'} text='50' />
<Button onClick={() => setZapAmount(200)} className='m-1' type='button' element='img' icon={coinStack} theme={zapAmount === 200 ? 'primary' : 'muted'} text='200' />
<Button onClick={() => setZapAmount(1_000)} className='m-1' type='button' element='img' icon={pileCoin} theme={zapAmount === 1_000 ? 'primary' : 'muted'} text='1K' />
<Button onClick={() => setZapAmount(3_000)} className='m-1' type='button' element='img' icon={moneyBag} theme={zapAmount === 3_000 ? 'primary' : 'muted'} text='3K' />
<Button onClick={() => setZapAmount(5_000)} className='m-1' type='button' element='img' icon={chestIcon} theme={zapAmount === 5_000 ? 'primary' : 'muted'} text='5K' />
</div>
<div className='flex justify-center'>