Skip to content

Commit

Permalink
Merge pull request #33 from 2060-io/Services-list-Responsive
Browse files Browse the repository at this point in the history
feat: Table listing responsive services
  • Loading branch information
lotharking authored Aug 14, 2024
2 parents dafd51b + 2c35d06 commit cce3f7c
Showing 2 changed files with 39 additions and 16 deletions.
2 changes: 1 addition & 1 deletion src/app/ui/Pagination/Pagination.tsx
Original file line number Diff line number Diff line change
@@ -79,7 +79,7 @@ export function Pagination({
<select
value={itemsPerPage}
onChange={handleItemsPerPageChange}
className="border rounded px-2 py-1"
className="border-[1.5px] border-stroke focus:border-primary dark:border-form-strokedark active:border-primary dark:focus:border-primary rounded dark:bg-form-input px-2 py-1"
>
<option value={5}>5</option>
<option value={10}>10</option>
53 changes: 38 additions & 15 deletions src/components/Services/DtsList.tsx
Original file line number Diff line number Diff line change
@@ -178,7 +178,7 @@ function DtsList() {
className={className}
onClick={handleButtonClick}
>
<span className="absolute text-2xl font-bold text-gray-600 dark:text-gray-300">
<span className="relative text-2xl font-bold text-gray-600 dark:text-gray-300">
+
</span>
</button>
@@ -187,19 +187,42 @@ function DtsList() {

if (auth.isAuthenticated) {
return (
<div className="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
<div className="mb-6 flex w-full flex-col sm:flex-row justify-between items-center px-4 space-y-4 sm:space-y-0">
<div>
<button className="text-gray-700 dark:text-gray-300 underline hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
onClick={listDtsVOs}
>
Refresh
</button>
<div className="overflow-x-auto rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
<div className="flex justify-between items-center mb-6">
<div className="flex items-left">
<table>
<tbody>
<tr>
<td className="min-w-25">
<button className="text-gray-700 dark:text-gray-300 underline hover:text-gray-900 dark:hover:text-gray-100 transition-colors ml-4"
onClick={listDtsVOs}
>
Refresh
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 items-center w-full sm:w-auto">
<InputSearch></InputSearch>
<SelectStateFilter className="w-full sm:w-auto h-10"/>
<ButtonAddService className="rounded-full bg-white dark:bg-boxdark w-10 h-10 border-2 border-gray-300 dark:border-strokedark flex items-center justify-center relative"/>
<div className="flex items-center">
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td className="w-60 min-w-60 text-right">
<InputSearch></InputSearch>
</td>
<td className="w-[200px] min-w-[200px] text-center pr-3 pl-3">
<SelectStateFilter className="w-full h-10 dark:bg-form-input"/>
</td>
<td className="w-[50px] min-w-[50px] text-center">
<ButtonAddService className="rounded-full bg-white dark:bg-boxdark w-10 h-10 border-2 border-gray-300 dark:border-strokedark relative"/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="max-w-full">
@@ -313,10 +336,10 @@ function DtsList() {
</tbody>
</table>
</div>
<div className="mb-6 flex w-full flex-col sm:flex-row justify-between items-center px-4 space-y-4 sm:space-y-0">
<div className="mb-6 mt-6 flex w-full flex-col sm:flex-row justify-between items-center px-4 space-y-4 sm:space-y-0">
<div>
</div>
<div className="-full sm:w-auto flex justify-center sm:justify-end">
<div className="max-w-full justify-center sm:justify-end">
<Pagination
itemsPerPage={itemsPerPage}
setItemsPerPage={setItemsPerPage}

0 comments on commit cce3f7c

Please sign in to comment.