frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rewrite table styles from tailwind into scss

Browse Source
This commit is contained in:
smanylov
2025-12-30 13:35:20 +07:00
parent 1032c5420b
commit f16e527a32
4 changed files with 330 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/tanstakTable.tsx
+44 -47
View File
@@ -48,15 +48,15 @@ type ApiResponse = {
const FileTypeIcon = ({ type }: { type: string }) => { const FileTypeIcon = ({ type }: { type: string }) => {
switch (type) { switch (type) {
case 'image': case 'image':
return <span className="text-[#f08c00]"> return <span className="color-image">
<IconImageFile /> <IconImageFile />
</span>; </span>;
case 'video': case 'video':
return <span className="text-[#2f9e44]"> return <span className="color-video">
<IconVideoFile /> <IconVideoFile />
</span>; </span>;
case 'audio': case 'audio':
return <span className="text-[#1971c2]"> return <span className="color-audio">
<IconAudioFile /> <IconAudioFile />
</span>; </span>;
default: default:
@@ -136,13 +136,13 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
{ {
accessorKey: 'fileName', accessorKey: 'fileName',
header: ({ column }) => ( header: ({ column }) => (
<div className="flex items-center justify-start"> <div className="column start">
<span> <span>
{t('file')} {t('file')}
</span> </span>
<button <button
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')} onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
className="ml-2 p-1 hover:bg-gray-200 rounded" className="sort-button"
> >
{ {
column.getIsSorted() === 'asc' ? column.getIsSorted() === 'asc' ?
@@ -164,7 +164,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
<div className="flex items-center space-x-2 w-[250px]"> <div className="flex items-center space-x-2 w-[250px]">
<FileTypeIcon type={row.original.fileType} /> <FileTypeIcon type={row.original.fileType} />
<div> <div>
<div className="font-medium w-full max-w-[300px] truncate" title={row.original.fileName}>{row.original.fileName}</div> <div className="font-medium w-full max-w-[250px] truncate" title={row.original.fileName}>{row.original.fileName}</div>
</div> </div>
</div> </div>
), ),
@@ -173,13 +173,13 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
{ {
accessorKey: 'status', accessorKey: 'status',
header: ({ column }) => ( header: ({ column }) => (
<div className="flex items-center justify-center"> <div className="column">
<span> <span>
status status
</span> </span>
<button <button
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')} onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
className="ml-2 p-1 hover:bg-gray-200 rounded" className="sort-button"
> >
{ {
column.getIsSorted() === 'asc' ? column.getIsSorted() === 'asc' ?
@@ -208,13 +208,13 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
{ {
accessorKey: 'violations', accessorKey: 'violations',
header: ({ column }) => ( header: ({ column }) => (
<div className="flex items-center justify-center"> <div className="column">
<span> <span>
{t('violations')} {t('violations')}
</span> </span>
<button <button
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')} onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
className="ml-2 p-1 hover:bg-gray-200 rounded" className="sort-button"
> >
{ {
column.getIsSorted() === 'asc' ? column.getIsSorted() === 'asc' ?
@@ -250,13 +250,13 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
{ {
accessorKey: 'checks', accessorKey: 'checks',
header: ({ column }) => ( header: ({ column }) => (
<div className="flex items-center justify-center"> <div className="column">
<span> <span>
{t('checks')} {t('checks')}
</span> </span>
<button <button
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')} onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
className="ml-2 p-1 hover:bg-gray-200 rounded" className="sort-button"
> >
{ {
column.getIsSorted() === 'asc' ? column.getIsSorted() === 'asc' ?
@@ -283,13 +283,13 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
{ {
accessorKey: 'lastCheck', accessorKey: 'lastCheck',
header: ({ column }) => ( header: ({ column }) => (
<div className="flex items-center justify-center"> <div className="column">
<span> <span>
{t('last-check')} {t('last-check')}
</span> </span>
<button <button
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')} onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
className="ml-2 p-1 hover:bg-gray-200 rounded" className="sort-button"
> >
{ {
column.getIsSorted() === 'asc' ? column.getIsSorted() === 'asc' ?
@@ -328,7 +328,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
id: 'actions', id: 'actions',
header: () => { header: () => {
return ( return (
<div className="flex items-center justify-center"> <div className="column">
{t('actions')} {t('actions')}
</div> </div>
) )
@@ -542,13 +542,13 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
}); });
return ( return (
<div className="p-6 mx-auto tanstak-table"> <div className="tanstak-table-wrapper">
<ModalWindow children={openWindowChildren} state={openWindow} callBack={setOpenWindow}></ModalWindow> <ModalWindow children={openWindowChildren} state={openWindow} callBack={setOpenWindow}></ModalWindow>
{/* Фильтры */} {/* Фильтры */}
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 pb-4 pt-0 px-0"> <div className="tanstak-table-filtres">
<div className="flex flex-col md:flex-row gap-4 w-full md:w-auto"> <div className="table-filtres-wrapper">
<div className="flex flex-col w-50"> <div className="table-filtres-item">
<div className="text-sm font-medium mb-1">{t('date-filter')}:</div> <div className="table-filtres-label">{t('date-filter')}:</div>
<DropDownList <DropDownList
value={dateFilter} value={dateFilter}
translatedValue={(() => { translatedValue={(() => {
@@ -586,8 +586,8 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
</div> </div>
{fileType === "all" && ( {fileType === "all" && (
<div className="flex flex-col w-50"> <div className="table-filtres-item">
<div className="text-sm font-medium mb-1">{t('type-filter')}:</div> <div className="table-filtres-label">{t('type-filter')}:</div>
<DropDownList <DropDownList
value={typeFilter} value={typeFilter}
translatedValue={ translatedValue={
@@ -623,8 +623,8 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
)} )}
</div> </div>
<div className="flex flex-col w-full md:w-auto"> <div className="table-filtres-item">
<div className="text-sm font-medium mb-1">{t('items-per-page')}:</div> <div className="table-filtres-label">{t('items-per-page')}:</div>
<DropDownList <DropDownList
value={table.getState().pagination.pageSize} value={table.getState().pagination.pageSize}
//@ts-ignore сделал так потому что для table.setPageSize нужна цифра //@ts-ignore сделал так потому что для table.setPageSize нужна цифра
@@ -640,16 +640,14 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
</div> </div>
{/* Таблица */} {/* Таблица */}
<div className='w-full tanstak-file-table'> <div className="tanstak-table-block">
<div className="overflow-x-auto rounded-lg shadow"> <table className="tanstak-table">
<table className=" divide-y divide-gray-200 table-fixed md:table-auto w-full"> <thead className="tanstak-table-head">
<thead className="bg-gray-50">
{table.getHeaderGroups().map(headerGroup => ( {table.getHeaderGroups().map(headerGroup => (
<tr key={headerGroup.id}> <tr key={headerGroup.id}>
{headerGroup.headers.map(header => ( {headerGroup.headers.map(header => (
<th <th
key={header.id} key={header.id}
className="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider whitespace-nowrap"
> >
{header.isPlaceholder {header.isPlaceholder
? null ? null
@@ -661,12 +659,12 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
</tr> </tr>
))} ))}
</thead> </thead>
<tbody className="bg-white divide-y divide-gray-200"> <tbody className="tanstak-table-body">
{table.getRowModel().rows.length > 0 ? ( {table.getRowModel().rows.length > 0 ? (
table.getRowModel().rows.map(row => ( table.getRowModel().rows.map(row => (
<tr key={row.id} className="hover:bg-gray-50 transition-colors"> <tr key={row.id}>
{row.getVisibleCells().map(cell => ( {row.getVisibleCells().map(cell => (
<td key={cell.id} className="px-6 py-4 whitespace-nowrap"> <td key={cell.id}>
{typeof cell.column.columnDef.cell === 'function' {typeof cell.column.columnDef.cell === 'function'
? cell.column.columnDef.cell(cell.getContext()) ? cell.column.columnDef.cell(cell.getContext())
: cell.getValue() as string} : cell.getValue() as string}
@@ -676,7 +674,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
)) ))
) : ( ) : (
<tr> <tr>
<td colSpan={columns.length} className="px-6 py-8 text-center text-gray-500"> <td colSpan={columns.length} className="text-center">
{t('no-data-for-selected-filters')} {t('no-data-for-selected-filters')}
</td> </td>
</tr> </tr>
@@ -684,39 +682,38 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
{/* Пагинация */} {/* Пагинация */}
<div className="flex flex-col md:flex-row items-end justify-between mt-6 gap-4"> <div className="tanstak-table-pagination">
<div className="flex items-center gap-2"> <div className="pagination-info">
<span className="text-sm text-gray-700"> <span className="pagination-info-pages">
{t('page')}{' '} {t('page')}{' '}
<strong> <strong>
{table.getState().pagination.pageIndex + 1} {t('out-of')} {table.getPageCount() ? table.getPageCount() : 1} {table.getState().pagination.pageIndex + 1} {t('out-of')} {table.getPageCount() ? table.getPageCount() : 1}
</strong> </strong>
</span> </span>
<span className="text-sm text-gray-500"> <span className="pagination-info-files">
| {t('shown')} {table.getRowModel().rows.length} {t('out-of')} {filteredData.length} {t('files')} | {t('shown')} {table.getRowModel().rows.length} {t('out-of')} {filteredData.length} {t('files')}
</span> </span>
</div> </div>
<div className="flex items-center gap-2"> <div className="pagination-controls">
<button <button
className="px-2 py-1 border rounded-md hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed" className="arrow"
onClick={() => table.firstPage()} onClick={() => table.firstPage()}
disabled={!table.getCanPreviousPage()} disabled={!table.getCanPreviousPage()}
> >
<IconDoubleArrowLeft /> <IconDoubleArrowLeft />
</button> </button>
<button <button
className="px-2 py-1 border rounded-md hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed" className="arrow"
onClick={() => table.previousPage()} onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()} disabled={!table.getCanPreviousPage()}
> >
<IconArrowLeft /> <IconArrowLeft />
</button> </button>
<div className="flex items-center gap-1"> <div className="pagination-controls-pages">
{Array.from({ length: Math.min(5, table.getPageCount()) }, (_, i) => { {Array.from({ length: Math.min(5, table.getPageCount()) }, (_, i) => {
const pageIndex = Math.max( const pageIndex = Math.max(
0, 0,
@@ -730,9 +727,9 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
return ( return (
<button <button
key={pageIndex} key={pageIndex}
className={`border border-black px-3 py-1 rounded-md ${table.getState().pagination.pageIndex === pageIndex className={`${table.getState().pagination.pageIndex === pageIndex
? 'bg-blue-500 text-white' ? 'current'
: 'hover:bg-gray-100' : 'other'
}`} }`}
onClick={() => table.setPageIndex(pageIndex)} onClick={() => table.setPageIndex(pageIndex)}
> >
@@ -745,14 +742,14 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
</div> </div>
<button <button
className="px-2 py-1 border rounded-md hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed" className="arrow"
onClick={() => table.nextPage()} onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()} disabled={!table.getCanNextPage()}
> >
<IconArrowRight /> <IconArrowRight />
</button> </button>
<button <button
className="px-2 py-1 border rounded-md hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed" className="arrow"
onClick={() => table.lastPage()} onClick={() => table.lastPage()}
disabled={!table.getCanNextPage()} disabled={!table.getCanNextPage()}
> >
src/app/styles/global-styles.scss
+14 -27
View File
@@ -142,20 +142,6 @@
} }
} }
@media (max-width: 1300px) {
.tanstak-file-table {
max-width: 800px;
margin: 0 auto;
}
}
@media (max-width: 1200px) {
.tanstak-file-table {
max-width: 500px;
margin: 0 auto;
}
}
.modal-wrapper { .modal-wrapper {
position: fixed; position: fixed;
z-index: 101; z-index: 101;
@@ -178,19 +164,6 @@
} }
} }
.tanstak-table {
.btn-modal {
transition: all 0.3ms ease-in-out;
border-radius: 10px;
padding: 5px 20px;
font-weight: 500;
}
:where(.divide-gray-200 > tr:last-child) {
border-bottom: 1px solid var(--color-gray-200);
}
}
.sidebar { .sidebar {
width: 280px; width: 280px;
background: linear-gradient(180deg, v.$p-color 0%, v.$s-color 100%); background: linear-gradient(180deg, v.$p-color 0%, v.$s-color 100%);
@@ -297,3 +270,17 @@
fill: v.$white; fill: v.$white;
} }
} }
.color {
&-image {
color: v.$color-image;
}
&-audio {
color: v.$color-audio;
}
&-video {
color: v.$color-video;
}
}
src/app/styles/pages-styles.scss
+235
View File
@@ -413,3 +413,238 @@
flex-wrap: wrap; flex-wrap: wrap;
gap: 20px; gap: 20px;
} }
.tanstak-table-wrapper {
padding: 1.5rem;
margin: 0 auto;
.btn-modal {
transition: all 0.3ms ease-in-out;
border-radius: 10px;
padding: 5px 20px;
font-weight: 500;
}
:where(.divide-gray-200 > tr:last-child) {
border-bottom: 1px solid var(--color-gray-200);
}
.tanstak-table-filtres {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
padding-bottom: 1rem;
padding-top: 0;
padding-left: 0;
padding-right: 0;
@media (min-width: 768px) {
flex-direction: row;
align-items: center;
}
.table-filtres-wrapper {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
@media (min-width: 768px) {
flex-direction: row;
width: auto;
}
.table-filtres-item {
display: flex;
flex-direction: column;
width: 12.5rem;
}
.table-filtres-label {
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 0.25rem;
}
}
}
.tanstak-table-pagination {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
margin-top: 1.5rem;
gap: 1rem;
@media (min-width: 768px) {
flex-direction: row;
}
.pagination-info {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
&-pages {
color: v.$text-p;
}
&-files {
color: v.$text-s;
}
}
.pagination-controls {
display: flex;
align-items: center;
gap: 0.5rem;
.arrow {
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
border: 1px solid;
border-radius: 0.375rem;
&:hover {
background-color: v.$bg-light;
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
&-pages {
display: flex;
align-items: center;
gap: 0.25rem;
button {
border: 1px solid v.$p-color;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
border-radius: 0.375rem;
&.current {
background-color: v.$p-color;
color: v.$white;
}
&.other {
&:hover {
background-color: v.$bg-light;
}
}
}
}
}
}
.tanstak-table-block {
width: 100%;
overflow-x: auto;
border-radius: 0.5rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.tanstak-table {
width: 100%;
table-layout: fixed;
>*+* {
border-top: 1px solid v.$b-color-2;
}
> :not(:last-child) {
border-bottom: 1px solid v.$b-color-2;
}
@media (min-width: 768px) {
table-layout: auto;
}
&-head {
background-color: v.$b-color-1;
th {
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
text-align: left;
font-size: 0.75rem;
font-weight: 500;
color: v.$text-p;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
}
.column {
display: flex;
align-items: center;
justify-content: center;
&.start {
justify-content: start;
}
.sort-button {
margin-left: 0.5rem;
padding: 0.25rem;
border-radius: 0.25rem;
&:hover {
background-color: #e5e7eb;
}
}
}
}
&-body {
background-color: v.$white;
>*+* {
border-top: 1px solid v.$b-color-2;
}
tr {
transition: background-color 0.2s ease-in-out;
&:hover {
background-color: v.$bg-light;
}
}
td {
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 1rem;
padding-bottom: 1rem;
white-space: nowrap;
}
}
}
}
@media (max-width: 1300px) {
.tanstak-table {
max-width: 800px;
margin: 0 auto;
}
}
@media (max-width: 1200px) {
.tanstak-table {
max-width: 500px;
margin: 0 auto;
}
}
src/app/styles/variable.scss
+4
View File
@@ -12,3 +12,7 @@ $bg-darkening: #0000007a;
$shadow-1: #0000001a; $shadow-1: #0000001a;
$white: #fff; $white: #fff;
$red: #dc2626; $red: #dc2626;
$color-image: #f08c00;
$color-video: #2f9e44;
$color-audio: #1971c2;