@meith/web 0.25.0 → 0.26.0

package/src/components/admin/content-forms.tsx

@@ -24,7 +24,7 @@ import {
   updateWordFilterAction,
 } from '@/server/content-admin-actions'
 
-import { FormError, SubmitButton } from '../auth/form-controls'
+import { FormError, PendingButton, SubmitButton } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
 import { INPUT, Saved } from './form-bits'
 
@@ -87,9 +87,9 @@ export function WordFilterRowForm({ filter, copy }: { filter: WordFilterValues;
 
       <form action={removeAction}>
         <input type="hidden" name="id" value={filter.id} />
-        <button type="submit" className="text-xs text-muted-foreground hover:underline">
+        <PendingButton showWorking className="text-xs text-muted-foreground hover:underline">
           {fromCopy(copy, 'adminContent.filter.removeThis')}
-        </button>
+        </PendingButton>
       </form>
     </div>
   )
@@ -143,9 +143,9 @@ export function DeletePrefixForm({ prefix, copy }: { prefix: PrefixValues; copy:
     <form action={action} className="flex items-center gap-2">
       <FormError message={state.error} />
       <input type="hidden" name="id" value={prefix.id} />
-      <button type="submit" className="text-xs text-muted-foreground hover:underline">
+      <PendingButton showWorking className="text-xs text-muted-foreground hover:underline">
         {fromCopy(copy, 'admin.remove')}
-      </button>
+      </PendingButton>
     </form>
   )
 }
@@ -252,9 +252,9 @@ export function SmileyRowForm({ smiley, copy }: { smiley: SmileyValues; copy: Co
 
       <form action={removeAction}>
         <input type="hidden" name="id" value={smiley.id} />
-        <button type="submit" className="text-xs text-destructive hover:underline">
+        <PendingButton showWorking className="text-xs text-destructive hover:underline">
           {fromCopy(copy, 'admin.remove')}
-        </button>
+        </PendingButton>
       </form>
     </div>
   )
@@ -362,9 +362,9 @@ export function DirectiveRowForm({ directive, copy }: { directive: DirectiveValu
 
       <form action={removeAction}>
         <input type="hidden" name="id" value={directive.id} />
-        <button type="submit" className="text-xs text-destructive hover:underline">
+        <PendingButton showWorking className="text-xs text-destructive hover:underline">
           {fromCopy(copy, 'admin.remove')}
-        </button>
+        </PendingButton>
       </form>
     </div>
   )
@@ -422,9 +422,9 @@ export function DeleteAttachmentForm({ attachmentId, copy }: { attachmentId: num
     <form action={action} className="shrink-0">
       <FormError message={state.error} />
       <input type="hidden" name="id" value={attachmentId} />
-      <button type="submit" className="text-xs text-destructive hover:underline">
+      <PendingButton showWorking className="text-xs text-destructive hover:underline">
         {fromCopy(copy, 'adminContent.attachment.delete')}
-      </button>
+      </PendingButton>
     </form>
   )
 }
@@ -568,9 +568,9 @@ export function AnnouncementRowForm({
 
       <form action={removeAction}>
         <input type="hidden" name="id" value={announcement.id} />
-        <button type="submit" className="text-xs text-destructive hover:underline">
+        <PendingButton showWorking className="text-xs text-destructive hover:underline">
           {fromCopy(copy, 'admin.remove')}
-        </button>
+        </PendingButton>
       </form>
     </div>
   )
@@ -670,9 +670,9 @@ export function CaptchaQuestionRowForm({
 
       <form action={removeAction}>
         <input type="hidden" name="id" value={question.id} />
-        <button type="submit" className="text-xs text-destructive hover:underline">
+        <PendingButton showWorking className="text-xs text-destructive hover:underline">
           {fromCopy(copy, 'admin.remove')}
-        </button>
+        </PendingButton>
       </form>
     </div>
   )

package/src/components/admin/forum-forms.tsx

@@ -5,7 +5,7 @@ import { useActionState } from 'react'
 import type { MatrixCell, MatrixRow } from '@meith/authorization'
 import { cn, Disclosure } from '@meith/ui'
 
-import { PANEL_CARD, PANEL_LIST, PANEL_ROW } from '@/components/shell/panel-list'
+import { PANEL_CARD, PANEL_LIST, PANEL_NOTE, PANEL_ROW } from '@/components/shell/panel-list'
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import {
   appointModeratorAction,
@@ -17,7 +17,7 @@ import {
   saveForumPermissionsAction,
 } from '@/server/forum-admin-actions'
 
-import { FormError, SubmitButton } from '../auth/form-controls'
+import { FormError, PendingButton, SubmitButton } from '../auth/form-controls'
 import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
 import { INPUT, Saved } from './form-bits'
 
@@ -534,13 +534,13 @@ export function ModeratorsPanel({
 
   return (
     <section className="flex flex-col gap-4">
-      <h2 className="text-lg font-semibold tracking-tight">
+      <h2 className="font-heading text-lg font-semibold">
         {fromCopy(copy, 'adminForum.moderators')}
       </h2>
 
       <FormError message={removeState.error} />
       {moderators.length === 0 ? (
-        <p className="text-sm text-muted-foreground">{fromCopy(copy, 'adminForum.noModerators')}</p>
+        <p className={PANEL_NOTE}>{fromCopy(copy, 'adminForum.noModerators')}</p>
       ) : (
         <ul className={PANEL_LIST}>
           {moderators.map((moderator) => (
@@ -561,12 +561,12 @@ export function ModeratorsPanel({
               <form action={remove}>
                 <input type="hidden" name="forumId" value={forumId} />
                 <input type="hidden" name="appointmentId" value={moderator.id} />
-                <button
-                  type="submit"
+                <PendingButton
+                  showWorking
                   className="text-xs text-muted-foreground hover:text-foreground"
                 >
                   {fromCopy(copy, 'admin.remove')}
-                </button>
+                </PendingButton>
               </form>
             </li>
           ))}

package/src/components/admin/group-forms.tsx

@@ -16,7 +16,7 @@ import {
   updatePromotionRuleAction,
 } from '@/server/group-admin-actions'
 
-import { FormError, SubmitButton } from '../auth/form-controls'
+import { FormError, PendingButton, SubmitButton } from '../auth/form-controls'
 import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
 import { INPUT, Saved } from './form-bits'
 import { OklchPicker } from './oklch-picker'
@@ -579,18 +579,18 @@ export function PromotionRuleRowForm({
         <form action={toggleAction} className="flex items-center">
           <input type="hidden" name="id" value={rule.id} />
           {!rule.enabled && <input type="hidden" name="enabled" value="1" />}
-          <button type="submit" className="text-xs text-muted-foreground hover:underline">
+          <PendingButton className="text-xs text-muted-foreground hover:underline">
             {rule.enabled
               ? fromCopy(copy, 'adminGroup.rule.disable')
               : fromCopy(copy, 'adminGroup.rule.enable')}
-          </button>
+          </PendingButton>
         </form>
 
         <form action={removeAction} className="flex items-center">
           <input type="hidden" name="id" value={rule.id} />
-          <button type="submit" className="text-xs text-destructive hover:underline">
+          <PendingButton className="text-xs text-destructive hover:underline">
             {fromCopy(copy, 'admin.remove')}
-          </button>
+          </PendingButton>
         </form>
       </div>
       <p className="text-xs text-muted-foreground">

package/src/components/admin/mail-test-card.tsx

@@ -6,6 +6,7 @@ import { PANEL_CARD } from '@/components/shell/panel-list'
 import { EMPTY_STATE, type FormState } from '@/server/auth-form-state'
 import { sendTestMailAction } from '@/server/mail-test-actions'
 
+import { PendingButton } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
 import { Saved } from './form-bits'
 
@@ -66,15 +67,14 @@ export function MailTestCard({
 
       <form action={submit} className="flex flex-col gap-2">
         <div>
-          <button
-            type="submit"
+          <PendingButton
             disabled={pending || !sends}
             className="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-60"
           >
             {pending
               ? fromCopy(copy, 'adminPanel.mail.sending')
               : fromCopy(copy, 'adminPanel.mail.send')}
-          </button>
+          </PendingButton>
         </div>
         <p className="text-xs text-muted-foreground">
           {copy['adminPanel.mail.testNoteLead']}

package/src/components/admin/marketplace-forms.tsx

@@ -5,7 +5,7 @@ import { useActionState } from 'react'
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { refreshMarketplaceAction } from '@/server/marketplace-actions'
 
-import { FormError } from '../auth/form-controls'
+import { FormError, PendingButton } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
 import { Saved } from './form-bits'
 
@@ -18,12 +18,12 @@ export function MarketplaceRefreshForm({ copy }: { copy: Copy }) {
       <Saved when={state.notice === 'refreshed'}>
         {fromCopy(copy, 'adminPanel.marketplace.refreshed')}
       </Saved>
-      <button
-        type="submit"
+      <PendingButton
+        showWorking
         className="inline-flex h-9 w-fit items-center justify-center rounded-md border border-border px-3 text-sm font-medium transition-colors hover:border-primary hover:bg-accent"
       >
         {fromCopy(copy, 'adminPanel.marketplace.refresh')}
-      </button>
+      </PendingButton>
     </form>
   )
 }

package/src/components/admin/navigation-forms.tsx

@@ -9,7 +9,7 @@ import {
   updateNavigationItemAction,
 } from '@/server/navigation-admin-actions'
 
-import { FormError, SubmitButton } from '../auth/form-controls'
+import { FormError, PendingButton, SubmitButton } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
 import { INPUT, Saved } from './form-bits'
 
@@ -193,9 +193,9 @@ export function NavigationItemRowForm({
 
       <form action={removeAction}>
         <input type="hidden" name="id" value={item.id} />
-        <button type="submit" className="text-xs text-destructive hover:underline">
+        <PendingButton showWorking className="text-xs text-destructive hover:underline">
           {fromCopy(copy, 'adminNavigation.removeThis')}
-        </button>
+        </PendingButton>
       </form>
     </div>
   )

package/src/components/admin/plugin-forms.tsx

@@ -9,7 +9,7 @@ import {
   setPluginEnabledAction,
 } from '@/server/plugin-admin-actions'
 
-import { FormError, SubmitButton } from '../auth/form-controls'
+import { FormError, PendingButton, SubmitButton } from '../auth/form-controls'
 import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
 import { INPUT, Saved } from './form-bits'
 
@@ -44,14 +44,14 @@ export function PluginEnableForm({
       <FormError message={state.error} />
       <input type="hidden" name="key" value={pluginKey} />
       <input type="hidden" name="enabled" value={enabled ? '0' : '1'} />
-      <button
-        type="submit"
+      <PendingButton
+        showWorking
         className="inline-flex h-9 items-center justify-center rounded-md border border-border px-3 text-sm"
       >
         {enabled
           ? fromCopy(copy, 'adminPanel.plugin.disable')
           : fromCopy(copy, 'adminPanel.plugin.enable')}
-      </button>
+      </PendingButton>
     </form>
   )
 }
@@ -63,12 +63,12 @@ export function PluginHealthResetForm({ pluginKey, copy }: { pluginKey: string;
     <form action={action} className="flex flex-col gap-2">
       <FormError message={state.error} />
       <input type="hidden" name="key" value={pluginKey} />
-      <button
-        type="submit"
+      <PendingButton
+        showWorking
         className="inline-flex h-9 items-center justify-center rounded-md border border-border px-3 text-sm"
       >
         {fromCopy(copy, 'adminPanel.plugin.clearFailures')}
-      </button>
+      </PendingButton>
     </form>
   )
 }

package/src/components/admin/settings-form.tsx

@@ -2,12 +2,15 @@
 
 import { useActionState } from 'react'
 
+import { cn } from '@meith/ui'
+
 import { saveAdminSettingsAction } from '@/server/admin-settings-actions'
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import type { SettingFieldModel, SettingGroupModel } from '@/view/admin-settings'
 
 import { FormError, SubmitButton } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
+import { PANEL_CARD } from '../shell/panel-list'
 import { INPUT, Saved } from './form-bits'
 
 function Control({ setting, copy }: { setting: SettingFieldModel; copy: Copy }) {
@@ -105,8 +108,8 @@ export function AdminSettingsForm({
       <input type="hidden" name="keys" value={keys.join(',')} />
 
       {groups.map((group) => (
-        <section key={group.group} className="flex flex-col gap-4">
-          <h2 className="text-lg font-semibold tracking-tight">{group.label}</h2>
+        <section key={group.group} className={cn(PANEL_CARD, 'gap-5')}>
+          <h2 className="font-heading text-lg font-semibold">{group.label}</h2>
           <div className="flex flex-col gap-5">
             {group.settings.map((setting) => (
               <div key={setting.key} className="flex flex-col gap-1">

package/src/components/admin/theme-forms.tsx

@@ -29,7 +29,7 @@ import {
 } from '@/view/theme-draft'
 import { BRAND_PRESETS, groupTokens } from '@/view/theme-tokens'
 
-import { FormError, SubmitButton } from '../auth/form-controls'
+import { FormError, PendingButton, SubmitButton } from '../auth/form-controls'
 import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
 import { Saved } from './form-bits'
 import { OklchPicker } from './oklch-picker'
@@ -473,14 +473,13 @@ export function ThemeEditorForm({
                   : formatFromCopy(copy, 'adminTheme.saveChanges', { count: unsaved })}
               </SubmitButton>
             </span>
-            <button
-              type="submit"
+            <PendingButton
               name="intent"
               value="preview"
               className="inline-flex h-10 items-center justify-center rounded-md border border-border px-4 text-sm"
             >
               {fromCopy(copy, 'adminTheme.previewWithoutSaving')}
-            </button>
+            </PendingButton>
             <span className="text-xs text-muted-foreground">
               {unsaved === 0
                 ? fromCopy(copy, 'adminTheme.nothingToSave')
@@ -593,13 +592,12 @@ export function ThemeStateForms({
         {!isDefault && enabled && (
           <form action={defaultAction}>
             <input type="hidden" name="key" value={themeKey} />
-            <button
-              type="submit"
+            <PendingButton
               aria-label={formatFromCopy(copy, 'adminTheme.state.makeDefaultFor', { title })}
               className={GHOST_BUTTON}
             >
               {fromCopy(copy, 'adminTheme.state.makeDefault')}
-            </button>
+            </PendingButton>
           </form>
         )}
 
@@ -607,8 +605,7 @@ export function ThemeStateForms({
           <form action={enabledAction}>
             <input type="hidden" name="key" value={themeKey} />
             <input type="hidden" name="enabled" value={enabled ? 'false' : 'true'} />
-            <button
-              type="submit"
+            <PendingButton
               aria-label={formatFromCopy(
                 copy,
                 enabled ? 'adminTheme.state.turnOffFor' : 'adminTheme.state.turnOnFor',
@@ -619,7 +616,7 @@ export function ThemeStateForms({
               {enabled
                 ? fromCopy(copy, 'adminTheme.state.turnOff')
                 : fromCopy(copy, 'adminTheme.state.turnOn')}
-            </button>
+            </PendingButton>
           </form>
         )}
 

package/src/components/auth/form-controls.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useRef } from 'react'
 import { useFormStatus } from 'react-dom'
 
-import { Alert, AlertDescription, AlertTitle, Input, Field as UiField } from '@meith/ui'
+import { Alert, AlertDescription, AlertTitle, cn, Input, Field as UiField } from '@meith/ui'
 import { Button } from '@meith/ui/button'
 
 import { fromCopy, useCopy } from '../shell/copy'
@@ -31,6 +31,28 @@ export function SubmitButton({
   )
 }
 
+export function PendingButton({
+  children,
+  showWorking = false,
+  className,
+  ...props
+}: React.ComponentProps<'button'> & { showWorking?: boolean }) {
+  const { pending } = useFormStatus()
+  const copy = useCopy()
+
+  return (
+    <button
+      {...props}
+      type="submit"
+      disabled={pending || props.disabled}
+      aria-busy={pending || undefined}
+      className={cn(className, 'disabled:cursor-not-allowed disabled:opacity-60')}
+    >
+      {pending && showWorking ? fromCopy(copy, 'form.working') : children}
+    </button>
+  )
+}
+
 export function useFocusOnFail<T extends HTMLElement>(failed: boolean) {
   const { pending } = useFormStatus()
   const ref = useRef<T>(null)

package/src/components/auth/second-factor-form.tsx

@@ -2,13 +2,13 @@
 
 import { useActionState } from 'react'
 
-import { Button } from '@meith/ui/button'
+import { buttonVariants } from '@meith/ui'
 
 import { abandonSecondFactorAction, verifySecondFactorAction } from '@/server/auth-actions'
 import { EMPTY_STATE } from '@/server/auth-form-state'
 
 import { type Copy, fromCopy } from '../shell/copy'
-import { FormError, SubmitButton } from './form-controls'
+import { FormError, PendingButton, SubmitButton } from './form-controls'
 import { OtpField, otpRecoveryFromCopy } from './otp-field'
 
 export function SecondFactorForm({
@@ -43,9 +43,9 @@ export function SecondFactorForm({
       </form>
 
       <form action={abandonSecondFactorAction}>
-        <Button type="submit" variant="ghost" size="sm">
+        <PendingButton showWorking className={buttonVariants({ variant: 'ghost', size: 'sm' })}>
           {fromCopy(copy, 'authForm.secondFactor.cancel')}
-        </Button>
+        </PendingButton>
       </form>
     </div>
   )

package/src/components/content/composer-intents.tsx

@@ -1,27 +1,28 @@
 import { buttonVariants } from '@meith/ui'
 
+import { PendingButton } from '../auth/form-controls'
 import { fromCopy, useCopy } from '../shell/copy'
 
 export function ComposerIntents() {
   const copy = useCopy()
   return (
     <>
-      <button
-        type="submit"
+      <PendingButton
         name="intent"
         value="preview"
+        showWorking
         className={buttonVariants({ variant: 'outline' })}
       >
         {fromCopy(copy, 'composer.preview')}
-      </button>
-      <button
-        type="submit"
+      </PendingButton>
+      <PendingButton
         name="intent"
         value="save_draft"
+        showWorking
         className={buttonVariants({ variant: 'ghost' })}
       >
         {fromCopy(copy, 'composer.saveDraft')}
-      </button>
+      </PendingButton>
     </>
   )
 }

package/src/components/content/edit-post-form.tsx

@@ -6,7 +6,7 @@ import { useActionState } from 'react'
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { deletePostAction, editPostAction, restorePostAction } from '@/server/content-actions'
 
-import { FormError, SubmitButton } from '../auth/form-controls'
+import { FormError, PendingButton, SubmitButton } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
 import { MarkdownEditor } from './markdown-editor'
 
@@ -53,14 +53,14 @@ export function EditPostForm({
 
       <div className="flex flex-wrap gap-3">
         <SubmitButton>{fromCopy(copy, 'composer.edit.submit')}</SubmitButton>
-        <button
-          type="submit"
+        <PendingButton
           name="intent"
           value="preview"
+          showWorking
           className="inline-flex h-10 items-center justify-center rounded-md border border-border px-4 text-sm font-medium transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
         >
           {fromCopy(copy, 'composer.preview')}
-        </button>
+        </PendingButton>
       </div>
     </form>
   )
@@ -84,12 +84,12 @@ export function DeletePostForm({
       <input type="hidden" name="postId" value={postId} />
       <p className="text-sm text-muted-foreground">{fromCopy(copy, 'composer.edit.deleteBlurb')}</p>
       <div>
-        <button
-          type="submit"
+        <PendingButton
+          showWorking
           className="inline-flex h-10 items-center justify-center rounded-md border border-destructive/40 px-4 text-sm font-medium text-destructive transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
         >
           {fromCopy(copy, 'composer.edit.delete')}
-        </button>
+        </PendingButton>
       </div>
     </form>
   )

package/src/components/content/poll-edit-form.tsx

@@ -3,6 +3,8 @@ import { POLL_OPTION_LENGTH_MAX, POLL_QUESTION_MAX, type Poll } from '@meith/pol
 import { getTranslator } from '@/server/i18n'
 import { editPollAction } from '@/server/poll-actions'
 
+import { PendingButton } from '../auth/form-controls'
+
 const NEW_OPTION_SLOTS = ['first', 'second', 'third'] as const
 
 function inputValue(at: Date | null): string {
@@ -89,7 +91,7 @@ export async function PollEditForm({ poll, threadId }: { poll: Poll; threadId: n
       </label>
 
       <div>
-        <button type="submit">{t.t('pollEdit.save')}</button>
+        <PendingButton showWorking>{t.t('pollEdit.save')}</PendingButton>
       </div>
     </form>
   )

package/src/components/content/poll.tsx

@@ -3,6 +3,8 @@ import { POLL_CHOICES_UNLIMITED, type Poll } from '@meith/polls'
 import { getTranslator } from '@/server/i18n'
 import { votePollAction } from '@/server/poll-actions'
 
+import { PendingButton } from '../auth/form-controls'
+
 export async function PollForm({
   poll,
   threadId,
@@ -69,9 +71,9 @@ export async function PollForm({
           </div>
         ))}
         {mayCast ? (
-          <button type="submit">
+          <PendingButton showWorking>
             {hasVoted ? t.t('pollForm.changeVote') : t.t('pollForm.vote')}
-          </button>
+          </PendingButton>
         ) : (
           <p className="text-sm text-muted-foreground">
             {closed ? t.t('pollForm.closed') : t.t('pollForm.votes', { count: total })}

package/src/components/content/thanks-button.tsx

@@ -7,6 +7,7 @@ import { cn } from '@meith/ui'
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { thankForPostAction } from '@/server/reputation-actions'
 
+import { PendingButton } from '../auth/form-controls'
 import { formatFromCopy, fromCopy, useCopy } from '../shell/copy'
 
 export function ThanksButton({
@@ -31,8 +32,7 @@ export function ThanksButton({
       <input type="hidden" name="userId" value={authorUserId} />
       <input type="hidden" name="returnTo" value={returnTo} />
 
-      <button
-        type="submit"
+      <PendingButton
         aria-pressed={thanked}
         className={cn(
           'inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-sm font-medium transition-colors',
@@ -55,7 +55,7 @@ export function ThanksButton({
             </span>
           </span>
         )}
-      </button>
+      </PendingButton>
 
       {state.error !== undefined && (
         <span className="ml-2 text-xs text-destructive">{state.error}</span>

package/src/components/content/thread-rating.tsx

@@ -3,6 +3,7 @@ import { cn } from '@meith/ui'
 
 import { rateThreadAction } from '@/server/thread-rating-actions'
 
+import { PendingButton } from '../auth/form-controls'
 import { type Copy, formatFromCopy, fromCopy } from '../shell/copy-record'
 
 const STAR_PATH = 'M10 1.6l2.47 5.01 5.53.8-4 3.9.94 5.5L10 14.21l-4.94 2.6.94-5.5-4-3.9 5.53-.8z'
@@ -109,9 +110,8 @@ export function ThreadRatingForm({
               const chosen = rating.mine !== null && value <= rating.mine
 
               return (
-                <button
+                <PendingButton
                   key={value}
-                  type="submit"
                   name="rating"
                   value={value}
                   aria-label={
@@ -126,7 +126,7 @@ export function ThreadRatingForm({
                   )}
                 >
                   <Star fill={chosen ? 1 : 0} className="size-5" />
-                </button>
+                </PendingButton>
               )
             })}
           </span>