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

Change classNames "status-check" to use only Tailwind

This commit is contained in:
danidfra 2024-11-04 20:37:05 -03:00
parent ceb00418a4
commit 9c1d5260b4
1 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/features/report/components/status-check-box.tsx
View File

@ -1,12 +1,13 @@
import clsx from 'clsx';
import noop from 'lodash/noop'; import noop from 'lodash/noop';
import React, { Suspense } from 'react'; import React, { Suspense } from 'react';
import { toggleStatusReport } from 'soapbox/actions/reports'; import { toggleStatusReport } from 'soapbox/actions/reports';
import StatusContent from 'soapbox/components/status-content'; import StatusContent from 'soapbox/components/status-content';
import { Toggle } from 'soapbox/components/ui'; import { Toggle } from 'soapbox/components/ui';
import { MediaGallery, Video, Audio } from 'soapbox/features/ui/util/async-components';
import { useAppDispatch, useAppSelector } from 'soapbox/hooks'; import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
import { MediaGallery, Video, Audio } from '../../ui/util/async-components';
interface IStatusCheckBox { interface IStatusCheckBox {
id: string; id: string;
@ -20,6 +21,8 @@ const StatusCheckBox: React.FC<IStatusCheckBox> = ({ id, disabled }) => {
const onToggle: React.ChangeEventHandler<HTMLInputElement> = (e) => dispatch(toggleStatusReport(id, e.target.checked)); const onToggle: React.ChangeEventHandler<HTMLInputElement> = (e) => dispatch(toggleStatusReport(id, e.target.checked));
const mediaType = status?.media_attachments.get(0)?.type;
if (!status || status.reblog) { if (!status || status.reblog) {
return null; return null;
} }
@ -70,13 +73,17 @@ const StatusCheckBox: React.FC<IStatusCheckBox> = ({ id, disabled }) => {
} }
return ( return (
<div className='status-check-box'> <div className='flex items-center justify-between'>
<div className='status-check-box__status'> <div className='py-2'>
<StatusContent status={status} /> <StatusContent status={status} />
<Suspense>{media}</Suspense> <Suspense>
<div className={clsx('max-w-[250px]', { 'mt-2': mediaType === 'audio' || mediaType === 'video' })}>
{media}
</div>
</Suspense>
</div> </div>
<div className='status-check-box-toggle'> <div className='flex flex-[0_0_auto] items-center justify-center p-2.5'>
<Toggle checked={checked} onChange={onToggle} disabled={disabled} /> <Toggle checked={checked} onChange={onToggle} disabled={disabled} />
</div> </div>
</div> </div>