🐛 fix: Refactor protocol status display for improved readability in server form component

This commit is contained in:
web 2025-09-14 00:39:18 -07:00
parent 461fdb1219
commit f700be095a

View File

@ -36,6 +36,7 @@ import {
import { Switch } from '@workspace/ui/components/switch'; import { Switch } from '@workspace/ui/components/switch';
import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input'; import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
import { Icon } from '@workspace/ui/custom-components/icon'; import { Icon } from '@workspace/ui/custom-components/icon';
import { cn } from '@workspace/ui/lib/utils';
import { useTranslations } from 'next-intl'; import { useTranslations } from 'next-intl';
import { uid } from 'radash'; import { uid } from 'radash';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
@ -509,27 +510,18 @@ export default function ServerForm(props: {
<AccordionItem key={type} value={type} className='mb-2 rounded-lg border'> <AccordionItem key={type} value={type} className='mb-2 rounded-lg border'>
<AccordionTrigger className='px-4 py-3 hover:no-underline'> <AccordionTrigger className='px-4 py-3 hover:no-underline'>
<div className='flex w-full items-center justify-between'> <div className='flex w-full items-center justify-between'>
<div className='flex items-center'> <div className='flex flex-col items-start'>
<div <div className='flex items-center gap-2'>
className={`mr-3 flex size-9 items-center justify-center rounded-md ${ <span className='font-medium capitalize'>{type}</span>
isEnabled </div>
? 'bg-green-100 text-green-600 dark:border-green-800 dark:bg-green-950 dark:text-green-400' <span
: 'bg-muted text-muted-foreground' className={cn(
}`} 'text-muted-foreground text-xs',
isEnabled && 'text-green-500',
)}
> >
<Icon {isEnabled ? t('enabled') : t('disabled')}
icon={isEnabled ? 'mdi:check' : 'mdi:minus'} </span>
className='size-5'
/>
</div>
<div className='flex flex-col items-start'>
<div className='flex items-center gap-2'>
<span className='font-medium capitalize'>{type}</span>
</div>
<span className='text-muted-foreground text-xs'>
{isEnabled ? t('enabled') : t('disabled')}
</span>
</div>
</div> </div>
<div className='mr-2 flex items-center gap-1'> <div className='mr-2 flex items-center gap-1'>
{current.transport && ( {current.transport && (