mirror of
https://github.com/idanoo/autobrr
synced 2025-07-23 16:59:12 +00:00
feat(web): releases list filtering (#136)
This commit is contained in:
Ludvig Lundgren
GitHub
parent
279d4ff7a3
commit
246e3ddc26
7 changed files with 459 additions and 48 deletions
|
|
@ -97,6 +97,30 @@ export const APIClient = {
|
|||
},
|
||||
release: {
|
||||
find: (query?: string) => appClient.Get<ReleaseFindResponse>(`api/release${query}`),
|
||||
findQuery: (offset?: number, limit?: number, filters?: any[]) => {
|
||||
let queryString = "?"
|
||||
|
||||
if (offset != 0) {
|
||||
queryString += `offset=${offset}`
|
||||
}
|
||||
if (limit != 0) {
|
||||
queryString += `&limit=${limit}`
|
||||
}
|
||||
if (filters && filters?.length > 0) {
|
||||
filters?.map((filter) => {
|
||||
if (filter.id === "indexer" && filter.value != "") {
|
||||
queryString += `&indexer=${filter.value}`
|
||||
}
|
||||
// using action_status instead of push_status because thats the column accessor
|
||||
if (filter.id === "action_status" && filter.value != "") {
|
||||
queryString += `&push_status=${filter.value}`
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return appClient.Get<ReleaseFindResponse>(`api/release${queryString}`)
|
||||
},
|
||||
indexerOptions: () => appClient.Get<string[]>(`api/release/indexers`),
|
||||
stats: () => appClient.Get<ReleaseStats>("api/release/stats")
|
||||
}
|
||||
};
|
||||
|
|
@ -210,4 +210,19 @@ export const ActionTypeNameMap = {
|
|||
"RADARR": "Radarr",
|
||||
"SONARR": "Sonarr",
|
||||
"LIDARR": "Lidarr",
|
||||
};
|
||||
};
|
||||
|
||||
export const PushStatusOptions: any[] = [
|
||||
{
|
||||
label: "Rejected",
|
||||
value: "PUSH_REJECTED",
|
||||
},
|
||||
{
|
||||
label: "Approved",
|
||||
value: "PUSH_APPROVED"
|
||||
},
|
||||
{
|
||||
label: "Error",
|
||||
value: "PUSH_ERROR"
|
||||
},
|
||||
];
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import * as React from "react";
|
||||
import { useQuery } from "react-query";
|
||||
import { formatDistanceToNowStrict } from "date-fns";
|
||||
import { useTable, useSortBy, usePagination, Column } from "react-table";
|
||||
import { useTable, useSortBy, usePagination, useAsyncDebounce, useFilters, Column } from "react-table";
|
||||
import {
|
||||
ClockIcon,
|
||||
BanIcon,
|
||||
|
|
@ -12,13 +12,18 @@ import {
|
|||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
ChevronDoubleRightIcon,
|
||||
CheckIcon
|
||||
CheckIcon,
|
||||
ChevronDownIcon,
|
||||
} from "@heroicons/react/solid";
|
||||
|
||||
import { APIClient } from "../api/APIClient";
|
||||
import { EmptyListState } from "../components/emptystates";
|
||||
import { classNames, simplifyDate } from "../utils";
|
||||
|
||||
import { Fragment } from "react";
|
||||
import { Listbox, Transition } from "@headlessui/react";
|
||||
import { PushStatusOptions } from "../domain/constants";
|
||||
|
||||
export function Releases() {
|
||||
return (
|
||||
<main>
|
||||
|
|
@ -34,6 +39,33 @@ export function Releases() {
|
|||
)
|
||||
}
|
||||
|
||||
// // Define a default UI for filtering
|
||||
// function GlobalFilter({
|
||||
// preGlobalFilteredRows,
|
||||
// globalFilter,
|
||||
// setGlobalFilter,
|
||||
// }: any) {
|
||||
// const count = preGlobalFilteredRows.length
|
||||
// const [value, setValue] = React.useState(globalFilter)
|
||||
// const onChange = useAsyncDebounce(value => {
|
||||
// setGlobalFilter(value || undefined)
|
||||
// }, 200)
|
||||
|
||||
// return (
|
||||
// <span>
|
||||
// Search:{' '}
|
||||
// <input
|
||||
// value={value || ""}
|
||||
// onChange={e => {
|
||||
// setValue(e.target.value);
|
||||
// onChange(e.target.value);
|
||||
// }}
|
||||
// placeholder={`${count} records...`}
|
||||
// />
|
||||
// </span>
|
||||
// )
|
||||
// }
|
||||
|
||||
// This is a custom filter UI for selecting
|
||||
// a unique option from a list
|
||||
export function SelectColumnFilter({
|
||||
|
|
@ -46,11 +78,16 @@ export function SelectColumnFilter({
|
|||
preFilteredRows.forEach((row: { values: { [x: string]: unknown } }) => {
|
||||
options.add(row.values[id])
|
||||
})
|
||||
|
||||
return [...options.values()]
|
||||
}, [id, preFilteredRows])
|
||||
|
||||
const opts = ["PUSH_REJECTED"]
|
||||
|
||||
// Render a multi-select box
|
||||
return (
|
||||
<div className="mb-6">
|
||||
|
||||
<label className="flex items-baseline gap-x-2">
|
||||
<span className="text-gray-700">{render("Header")}: </span>
|
||||
<select
|
||||
|
|
@ -63,13 +100,211 @@ export function SelectColumnFilter({
|
|||
}}
|
||||
>
|
||||
<option value="">All</option>
|
||||
{options.map((option, i) => (
|
||||
{opts.map((option, i: number) => (
|
||||
<option key={i} value={option}>
|
||||
{option}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// This is a custom filter UI for selecting
|
||||
// a unique option from a list
|
||||
export function IndexerSelectColumnFilter({
|
||||
column: { filterValue, setFilter, id },
|
||||
}: any) {
|
||||
const { data, isSuccess } = useQuery(
|
||||
['release_indexers'],
|
||||
() => APIClient.release.indexerOptions(),
|
||||
{
|
||||
keepPreviousData: true,
|
||||
staleTime: Infinity,
|
||||
}
|
||||
);
|
||||
|
||||
const opts = isSuccess && data?.map(i => ({ value: i, label: i})) as any[]
|
||||
|
||||
// Render a multi-select box
|
||||
return (
|
||||
<div className="mr-3">
|
||||
<div className="w-48">
|
||||
<Listbox
|
||||
refName={id}
|
||||
value={filterValue}
|
||||
onChange={setFilter}
|
||||
>
|
||||
<div className="relative mt-1">
|
||||
<Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left bg-white dark:bg-gray-800 rounded-lg shadow-md cursor-default focus:outline-none focus-visible:ring-2 focus-visible:ring-opacity-75 focus-visible:ring-white focus-visible:ring-offset-orange-300 focus-visible:ring-offset-2 focus-visible:border-indigo-500 dark:text-gray-400 sm:text-sm">
|
||||
<span className="block truncate">{filterValue ? filterValue : "Indexer"}</span>
|
||||
<span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||||
<ChevronDownIcon
|
||||
className="w-5 h-5 ml-2 -mr-1 text-gray-600 hover:text-gray-600"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options className="absolute w-full py-1 mt-1 overflow-auto text-base bg-white dark:bg-gray-800 rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
|
||||
<Listbox.Option
|
||||
key={0}
|
||||
className={({ active }) =>
|
||||
`cursor-default select-none relative py-2 pl-10 pr-4 ${
|
||||
active ? 'text-gray-500 dark:text-gray-200 bg-gray-300 dark:bg-gray-900' : 'text-gray-900 dark:text-gray-400'
|
||||
}`
|
||||
}
|
||||
value={undefined}
|
||||
>
|
||||
{({ selected }) => (
|
||||
<>
|
||||
<span
|
||||
className={`block truncate ${
|
||||
selected ? 'font-medium' : 'font-normal'
|
||||
}`}
|
||||
>
|
||||
All
|
||||
</span>
|
||||
{selected ? (
|
||||
<span className="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500 dark:text-gray-400">
|
||||
<CheckIcon className="w-5 h-5" aria-hidden="true" />
|
||||
</span>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
{isSuccess && data?.map((indexer, idx) => (
|
||||
<Listbox.Option
|
||||
key={idx}
|
||||
className={({ active }) =>
|
||||
`cursor-default select-none relative py-2 pl-10 pr-4 ${
|
||||
active ? 'text-gray-500 dark:text-gray-200 bg-gray-300 dark:bg-gray-900' : 'text-gray-900 dark:text-gray-400'
|
||||
}`
|
||||
}
|
||||
value={indexer}
|
||||
>
|
||||
{({ selected }) => (
|
||||
<>
|
||||
<span
|
||||
className={`block truncate ${
|
||||
selected ? 'font-medium' : 'font-normal'
|
||||
}`}
|
||||
>
|
||||
{indexer}
|
||||
</span>
|
||||
{selected ? (
|
||||
<span className="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500 dark:text-gray-400">
|
||||
<CheckIcon className="w-5 h-5" aria-hidden="true" />
|
||||
</span>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</div>
|
||||
</Listbox>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function PushStatusSelectColumnFilter({
|
||||
column: { filterValue, setFilter, id },
|
||||
}: any) {
|
||||
return (
|
||||
<div className="mr-3">
|
||||
|
||||
<div className="w-48">
|
||||
<Listbox
|
||||
refName={id}
|
||||
value={filterValue}
|
||||
onChange={setFilter}
|
||||
>
|
||||
<div className="relative mt-1">
|
||||
<Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left bg-white dark:bg-gray-800 rounded-lg shadow-md cursor-default focus:outline-none focus-visible:ring-2 focus-visible:ring-opacity-75 focus-visible:ring-white focus-visible:ring-offset-orange-300 focus-visible:ring-offset-2 focus-visible:border-indigo-500 dark:text-gray-400 sm:text-sm">
|
||||
<span className="block truncate">{filterValue ? PushStatusOptions.find((o) => o.value === filterValue && o.value)!.label : "Push status"}</span>
|
||||
<span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||||
<ChevronDownIcon
|
||||
className="w-5 h-5 ml-2 -mr-1 text-gray-600 hover:text-gray-600"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options className="absolute w-full py-1 mt-1 overflow-auto text-base bg-white dark:bg-gray-800 rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
|
||||
<Listbox.Option
|
||||
key={0}
|
||||
className={({ active }) =>
|
||||
`cursor-default select-none relative py-2 pl-10 pr-4 ${
|
||||
active ? 'text-gray-500 dark:text-gray-200 bg-gray-300 dark:bg-gray-900' : 'text-gray-900 dark:text-gray-400'
|
||||
}`
|
||||
}
|
||||
value={undefined}
|
||||
>
|
||||
{({ selected }) => (
|
||||
<>
|
||||
<span
|
||||
className={`block truncate ${
|
||||
selected ? 'font-medium' : 'font-normal'
|
||||
}`}
|
||||
>
|
||||
All
|
||||
</span>
|
||||
{selected ? (
|
||||
<span className="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500 dark:text-gray-400">
|
||||
<CheckIcon className="w-5 h-5" aria-hidden="true" />
|
||||
</span>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
{PushStatusOptions.map((status, idx) => (
|
||||
<Listbox.Option
|
||||
key={idx}
|
||||
className={({ active }) =>
|
||||
`cursor-default select-none relative py-2 pl-10 pr-4 ${
|
||||
active ? 'text-gray-500 dark:text-gray-200 bg-gray-300 dark:bg-gray-900' : 'text-gray-900 dark:text-gray-400'
|
||||
}`
|
||||
}
|
||||
value={status.value}
|
||||
>
|
||||
{({ selected }) => (
|
||||
<>
|
||||
<span
|
||||
className={`block truncate ${
|
||||
selected ? 'font-medium' : 'font-normal'
|
||||
}`}
|
||||
>
|
||||
{status.label}
|
||||
</span>
|
||||
{selected ? (
|
||||
<span className="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500 dark:text-gray-400">
|
||||
<CheckIcon className="w-5 h-5" aria-hidden="true" />
|
||||
</span>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</div>
|
||||
</Listbox>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -164,11 +399,13 @@ const initialState = {
|
|||
queryPageIndex: 0,
|
||||
queryPageSize: 10,
|
||||
totalCount: null,
|
||||
queryFilters: []
|
||||
};
|
||||
|
||||
const PAGE_CHANGED = 'PAGE_CHANGED';
|
||||
const PAGE_SIZE_CHANGED = 'PAGE_SIZE_CHANGED';
|
||||
const TOTAL_COUNT_CHANGED = 'TOTAL_COUNT_CHANGED';
|
||||
const FILTER_CHANGED = 'FILTER_CHANGED';
|
||||
|
||||
const reducer = (state: any, { type, payload }: any) => {
|
||||
switch (type) {
|
||||
|
|
@ -187,6 +424,12 @@ const reducer = (state: any, { type, payload }: any) => {
|
|||
...state,
|
||||
totalCount: payload,
|
||||
};
|
||||
|
||||
case FILTER_CHANGED:
|
||||
return {
|
||||
...state,
|
||||
queryFilters: payload,
|
||||
};
|
||||
default:
|
||||
throw new Error(`Unhandled action type: ${type}`);
|
||||
}
|
||||
|
|
@ -213,28 +456,38 @@ function Table() {
|
|||
Header: "Actions",
|
||||
accessor: 'action_status',
|
||||
Cell: ReleaseStatusCell,
|
||||
Filter: PushStatusSelectColumnFilter, // new
|
||||
},
|
||||
{
|
||||
Header: "Indexer",
|
||||
accessor: 'indexer',
|
||||
Cell: IndexerCell,
|
||||
Filter: SelectColumnFilter, // new
|
||||
filter: 'includes',
|
||||
Filter: IndexerSelectColumnFilter, // new
|
||||
filter: 'equal',
|
||||
// filter: 'includes',
|
||||
},
|
||||
] as Column<Release>[], [])
|
||||
|
||||
const [{ queryPageIndex, queryPageSize, totalCount }, dispatch] =
|
||||
const [{ queryPageIndex, queryPageSize, totalCount, queryFilters }, dispatch] =
|
||||
React.useReducer(reducer, initialState);
|
||||
|
||||
const { isLoading, error, data, isSuccess } = useQuery(
|
||||
['releases', queryPageIndex, queryPageSize],
|
||||
() => APIClient.release.find(`?offset=${queryPageIndex * queryPageSize}&limit=${queryPageSize}`),
|
||||
['releases', queryPageIndex, queryPageSize, queryFilters],
|
||||
// () => APIClient.release.find(`?offset=${queryPageIndex * queryPageSize}&limit=${queryPageSize}${filterIndexer && `&indexer=${filterIndexer}`}`),
|
||||
() => APIClient.release.findQuery(queryPageIndex * queryPageSize, queryPageSize, queryFilters),
|
||||
{
|
||||
keepPreviousData: true,
|
||||
staleTime: Infinity,
|
||||
}
|
||||
);
|
||||
|
||||
// const initialFilters = React.useMemo(() => [
|
||||
// {
|
||||
// id: "indexer",
|
||||
// value: "",
|
||||
// }
|
||||
// ], [])
|
||||
|
||||
// Use the state and functions returned from useTable to build your UI
|
||||
const {
|
||||
getTableProps,
|
||||
|
|
@ -254,21 +507,28 @@ function Table() {
|
|||
previousPage,
|
||||
setPageSize,
|
||||
|
||||
state: { pageIndex, pageSize },
|
||||
state: { pageIndex, pageSize, globalFilter, filters },
|
||||
// preGlobalFilteredRows,
|
||||
// setGlobalFilter,
|
||||
// preFilteredRows,
|
||||
} = useTable({
|
||||
columns,
|
||||
data: data && isSuccess ? data.data : [],
|
||||
initialState: {
|
||||
pageIndex: queryPageIndex,
|
||||
pageSize: queryPageSize,
|
||||
filters: []
|
||||
// filters: initialFilters
|
||||
},
|
||||
manualPagination: true,
|
||||
manualFilters: true,
|
||||
manualSortBy: true,
|
||||
pageCount: isSuccess ? Math.ceil(totalCount / queryPageSize) : 0,
|
||||
autoResetSortBy: false,
|
||||
autoResetExpanded: false,
|
||||
autoResetPage: false
|
||||
},
|
||||
// useFilters, // useFilters!
|
||||
useFilters, // useFilters!
|
||||
// useGlobalFilter,
|
||||
useSortBy,
|
||||
usePagination, // new
|
||||
|
|
@ -292,6 +552,11 @@ function Table() {
|
|||
}
|
||||
}, [data?.count]);
|
||||
|
||||
React.useEffect(() => {
|
||||
dispatch({ type: FILTER_CHANGED, payload: filters });
|
||||
}, [filters]);
|
||||
|
||||
|
||||
if (error) {
|
||||
return <p>Error</p>;
|
||||
}
|
||||
|
|
@ -305,6 +570,25 @@ function Table() {
|
|||
<>
|
||||
{isSuccess && data ? (
|
||||
<div className="flex flex-col">
|
||||
{/* <GlobalFilter
|
||||
preGlobalFilteredRows={preGlobalFilteredRows}
|
||||
globalFilter={globalFilter}
|
||||
setGlobalFilter={setGlobalFilter}
|
||||
preFilteredRows={preFilteredRows}
|
||||
/> */}
|
||||
<div className="flex mb-6">
|
||||
|
||||
{headerGroups.map((headerGroup: { headers: any[] }) =>
|
||||
headerGroup.headers.map((column) =>
|
||||
column.Filter ? (
|
||||
<div className="mt-2 sm:mt-0" key={column.id}>
|
||||
{column.render("Filter")}
|
||||
</div>
|
||||
) : null
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="overflow-hidden bg-white shadow-lg dark:bg-gray-800 sm:rounded-lg">
|
||||
<table {...getTableProps()} className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<thead className="bg-gray-50 dark:bg-gray-800">
|
||||
|
|
@ -388,7 +672,7 @@ function Table() {
|
|||
Page <span className="font-medium">{pageIndex + 1}</span> of <span className="font-medium">{pageOptions.length}</span>
|
||||
</span>
|
||||
<label>
|
||||
<span className="sr-only">Items Per Page</span>
|
||||
<span className="sr-only bg-gray-700">Items Per Page</span>
|
||||
<select
|
||||
className="block w-full border-gray-300 rounded-md shadow-sm cursor-pointer dark:bg-gray-800 dark:border-gray-800 dark:text-gray-600 dark:hover:text-gray-500 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
|
||||
value={pageSize}
|
||||
|
|
@ -411,29 +695,29 @@ function Table() {
|
|||
onClick={() => gotoPage(0)}
|
||||
disabled={!canPreviousPage}
|
||||
>
|
||||
<span className="sr-only">First</span>
|
||||
<ChevronDoubleLeftIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
|
||||
<span className="sr-only text-gray-400 dark:text-gray-500 dark:bg-gray-700">First</span>
|
||||
<ChevronDoubleLeftIcon className="w-4 h-4 text-gray-400 dark:text-gray-500" aria-hidden="true" />
|
||||
</PageButton>
|
||||
<PageButton
|
||||
onClick={() => previousPage()}
|
||||
disabled={!canPreviousPage}
|
||||
>
|
||||
<span className="sr-only">Previous</span>
|
||||
<ChevronLeftIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
|
||||
<span className="sr-only text-gray-400 dark:text-gray-500 dark:bg-gray-700">Previous</span>
|
||||
<ChevronLeftIcon className="w-4 h-4 text-gray-400 dark:text-gray-500" aria-hidden="true" />
|
||||
</PageButton>
|
||||
<PageButton
|
||||
onClick={() => nextPage()}
|
||||
disabled={!canNextPage}>
|
||||
<span className="sr-only">Next</span>
|
||||
<ChevronRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
|
||||
<span className="sr-only text-gray-400 dark:text-gray-500 dark:bg-gray-700">Next</span>
|
||||
<ChevronRightIcon className="w-4 h-4 text-gray-400 dark:text-gray-500" aria-hidden="true" />
|
||||
</PageButton>
|
||||
<PageButton
|
||||
className="rounded-r-md"
|
||||
onClick={() => gotoPage(pageCount - 1)}
|
||||
disabled={!canNextPage}
|
||||
>
|
||||
<span className="sr-only">Last</span>
|
||||
<ChevronDoubleRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
|
||||
<span className="sr-only text-gray-400 dark:text-gray-500 dark:bg-gray-700">Last</span>
|
||||
<ChevronDoubleRightIcon className="w-4 h-4 text-gray-400 dark:text-gray-500" aria-hidden="true" />
|
||||
</PageButton>
|
||||
</nav>
|
||||
</div>
|
||||
|
|
@ -470,7 +754,7 @@ function Button({ children, className, ...rest }: any) {
|
|||
type="button"
|
||||
className={
|
||||
classNames(
|
||||
"relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50",
|
||||
"relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-800 text-sm font-medium rounded-md text-gray-700 dark:text-gray-500 bg-white dark:bg-gray-800 hover:bg-gray-50",
|
||||
className
|
||||
)}
|
||||
{...rest}
|
||||
|
|
@ -486,7 +770,7 @@ function PageButton({ children, className, ...rest }: any) {
|
|||
type="button"
|
||||
className={
|
||||
classNames(
|
||||
"relative inline-flex items-center px-2 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600",
|
||||
"relative inline-flex items-center px-2 py-2 border border-gray-300 dark:border-gray-700 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600",
|
||||
className
|
||||
)}
|
||||
{...rest}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue