forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-07-27 22:22:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate ServersListGroup to tailwind components

Browse Source
This commit is contained in:
Alejandro Celaya
2025-04-03 08:59:06 +02:00
parent fd7bfd845e
commit aefe5e0848
7 changed files with 62 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/servers/ServersListGroup.tsx
View File

@@ -3,33 +3,42 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { clsx } from 'clsx';
import type { FC, PropsWithChildren } from 'react';
import { Link } from 'react-router';
import { ListGroup, ListGroupItem } from 'reactstrap';
import type { ServerWithId } from './data';
import './ServersListGroup.scss';
type ServersListGroupProps = PropsWithChildren<{
servers: ServerWithId[];
embedded?: boolean;
borderless?: boolean;
}>;
const ServerListItem = ({ id, name }: { id: string; name: string }) => (
<ListGroupItem tag={Link} to={`/server/${id}`} className="servers-list__server-item">
{name}
<FontAwesomeIcon icon={chevronIcon} className="servers-list__server-item-icon" />
</ListGroupItem>
<Link
to={`/server/${id}`}
className={clsx(
'servers-list__server-item',
'tw:flex tw:items-center tw:justify-between tw:gap-x-2 tw:px-4 tw:py-3',
'tw:rounded-none tw:hover:bg-lm-secondary tw:hover:dark:bg-dm-secondary',
'tw:border-b tw:last:border-0 tw:border-lm-border tw:dark:border-dm-border',
)}
>
<span className="tw:truncate">{name}</span>
<FontAwesomeIcon icon={chevronIcon} />
</Link>
);
export const ServersListGroup: FC<ServersListGroupProps> = ({ servers, children, embedded = false }) => (
export const ServersListGroup: FC<ServersListGroupProps> = ({ servers, children, borderless }) => (
<>
{children && <div data-testid="title" className="mb-0 fs-5 fw-normal lh-sm">{children}</div>}
{children && <div data-testid="title" className="fs-5 fw-normal lh-sm">{children}</div>}
{servers.length > 0 && (
<ListGroup
<div
data-testid="list"
tag="div"
className={clsx('servers-list__list-group', { 'servers-list__list-group--embedded': embedded })}
className={clsx(
'tw:w-full tw:border-lm-border tw:dark:border-dm-border',
'tw:md:max-h-56 tw:md:overflow-y-auto tw:-mb-1 tw:scroll-thin',
{ 'tw:border-y': !borderless },
)}
>
{servers.map(({ id, name }) => <ServerListItem key={id} id={id} name={name} />)}
</ListGroup>
</div>
)}
</>
);