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

feat: rough enhance lightning design

This commit is contained in:
P. Reis 2024-06-03 20:54:34 -03:00
parent 4254168b9a
commit 74485b3524
1 changed files with 20 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,7 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
import { zap } from 'soapbox/actions/interactions'; import { zap } from 'soapbox/actions/interactions';
import { openModal, closeModal } from 'soapbox/actions/modals'; import { openModal, closeModal } from 'soapbox/actions/modals';
import Account from 'soapbox/components/account'; import Account from 'soapbox/components/account';
import { Stack, Button, Select } from 'soapbox/components/ui'; import { Stack, Button, Input } from 'soapbox/components/ui';
import { useAppDispatch } from 'soapbox/hooks'; import { useAppDispatch } from 'soapbox/hooks';
import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities'; import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities';
@ -23,7 +23,7 @@ const ZapPayRequestForm = ({ account, status }: IZapPayRequestForm) => {
const intl = useIntl(); const intl = useIntl();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const [zapComment, setZapComment] = useState(''); const [zapComment, setZapComment] = useState('');
const [zapAmount, setZapAmount] = useState(1); const [zapAmount, setZapAmount] = useState(500);
const handleSubmit = async (e?: React.FormEvent<Element>) => { const handleSubmit = async (e?: React.FormEvent<Element>) => {
e?.preventDefault(); e?.preventDefault();
@ -40,34 +40,26 @@ const ZapPayRequestForm = ({ account, status }: IZapPayRequestForm) => {
} }
}; };
const zapOptions = () => {
return ( return (
[ <Stack space={3} element='form' onSubmit={handleSubmit}>
<option key={1} disabled>
<FormattedMessage id='zap.unit' defaultMessage='Zap amount in sats' />
</option>,
<option key={2} value={1} defaultValue={1}>1 😐</option>,
<option key={3} value={500}>500 👍</option>,
<option key={4} value={666}>666 😈 </option>,
<option key={5} value={1000}>1k 🚀</option>,
]
);
};
return (
<Stack element='form' onSubmit={handleSubmit}>
<Account account={account} showProfileHoverCard={false} /> <Account account={account} showProfileHoverCard={false} />
<Select
onChange={e => setZapAmount(Number(e.target.value))} <div className='flex justify-center'>
children={zapOptions()} <Input type='text' min={1} value={zapAmount} className='lg border-ul max-w-20 border-neutral-200 bg-inherit pb-1 text-center text-3xl font-bold outline-none focus:ring-0' />
size={zapOptions().length} <FormattedMessage id='zap.unit' defaultMessage='Zap amount in sats' />
/> </div>
<input
type='text' <div className='flex justify-center '>
onChange={e => setZapComment(e.target.value)} <Button onClick={_ => setZapAmount(1)} className='m-1' type='button' theme='muted' text='😐 1' />
placeholder={intl.formatMessage(messages.zap_commentPlaceholder)} <Button onClick={_ => setZapAmount(500)} className='m-1' type='button' theme='primary' text='👍 500' />
/> <Button onClick={_ => setZapAmount(666)} className='m-1' type='button' theme='muted' text='😈 666' />
<Button onClick={_ => setZapAmount(1000)} className='m-1' type='button' theme='muted' text='🚀 1K' />
</div>
<div className='flex w-full'>
<Input className='w-10/12' onChange={e => setZapComment(e.target.value)} type='text' placeholder={intl.formatMessage(messages.zap_commentPlaceholder)} />
<Button type='submit' theme='primary' icon={require('@tabler/icons/outline/bolt.svg')} text={intl.formatMessage(messages.zap_button)} /> <Button type='submit' theme='primary' icon={require('@tabler/icons/outline/bolt.svg')} text={intl.formatMessage(messages.zap_button)} />
</div>
</Stack> </Stack>
); );
}; };