Migrate server-related components to tailwind

This commit is contained in:
Alejandro Celaya
2025-04-01 11:48:35 +02:00
parent c462bc30e1
commit 06fac716d1
7 changed files with 38 additions and 31 deletions

View File

@@ -1,5 +1,7 @@
import type { TimeoutToggle } from '@shlinkio/shlink-frontend-kit';
import { Result, useToggle } from '@shlinkio/shlink-frontend-kit';
import { useToggle } from '@shlinkio/shlink-frontend-kit';
import type { ResultProps } from '@shlinkio/shlink-frontend-kit/tailwind';
import { Result } from '@shlinkio/shlink-frontend-kit/tailwind';
import type { FC } from 'react';
import { useCallback, useState } from 'react';
import { useNavigate } from 'react-router';
@@ -26,11 +28,11 @@ type CreateServerDeps = {
useTimeoutToggle: TimeoutToggle;
};
const ImportResult = ({ type }: { type: 'error' | 'success' }) => (
const ImportResult = ({ variant }: Pick<ResultProps, 'variant'>) => (
<div className="mt-3">
<Result type={type}>
{type === 'success' && 'Servers properly imported. You can now select one from the list :)'}
{type === 'error' && 'The servers could not be imported. Make sure the format is correct.'}
<Result variant={variant}>
{variant === 'success' && 'Servers properly imported. You can now select one from the list :)'}
{variant === 'error' && 'The servers could not be imported. Make sure the format is correct.'}
</Result>
</div>
);
@@ -68,16 +70,16 @@ const CreateServer: FCWithDeps<CreateServerProps, CreateServerDeps> = ({ servers
return (
<NoMenuLayout>
<ServerForm title={<h5 className="mb-0">Add new server</h5>} onSubmit={onSubmit}>
<ServerForm title="Add new server" onSubmit={onSubmit}>
{!hasServers && (
<ImportServersBtn tooltipPlacement="top" onImport={setServersImported} onImportError={setErrorImporting} />
)}
{hasServers && <Button outline onClick={goBack}>Cancel</Button>}
<Button outline color="primary" className="ms-2">Create server</Button>
<Button outline color="primary">Create server</Button>
</ServerForm>
{serversImported && <ImportResult type="success" />}
{errorImporting && <ImportResult type="error" />}
{serversImported && <ImportResult variant="success" />}
{errorImporting && <ImportResult variant="error" />}
<DuplicatedServersModal
isOpen={isConfirmModalOpen}