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

add fixes

Browse Source
This commit is contained in:
smanylov
2025-12-19 13:05:50 +07:00
parent 35659a2878
commit c26c2ebc7f
5 changed files with 54 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/dropDownList.tsx
+5 -4
View File
@@ -5,6 +5,7 @@ interface DropDownListProps {
children: ReactNode;
value: string | number;
callBack: (value: string) => void;
translatedValue?: string;
}
interface ChildProps {
@@ -14,7 +15,7 @@ interface ChildProps {
children?: React.ReactNode;
}
export default function DropDownList({ children, value, callBack }: DropDownListProps) {
export default function DropDownList({ children, value, callBack, translatedValue }: DropDownListProps) {
const [isOpen, setIsOpen] = useState(false)
const dropdownRef = useRef<HTMLDivElement>(null)
useClickOutside(dropdownRef, () => {
@@ -30,8 +31,8 @@ export default function DropDownList({ children, value, callBack }: DropDownList
callBack(childValue || "");
setIsOpen(false);
},
className: `flex items-center w-full px-4 py-2 text-sm text-left hover:bg-blue-100 cursor-pointer select-none`,
key: index
className: `flex items-center w-full px-4 py-2 text-sm text-left hover:bg-blue-100 cursor-pointer select-none ${value === childValue ? "font-bold" : ""}`,
key: index,
});
}
return child;
@@ -47,7 +48,7 @@ export default function DropDownList({ children, value, callBack }: DropDownList
>
<span className="flex items-center">
<span className="mr-2">
{value}
{translatedValue ? translatedValue : value}
</span>
</span>
<svg
src/app/components/tanstakTable.tsx
+26 -22
View File
@@ -11,7 +11,7 @@ import {
SortingState,
ColumnFiltersState,
} from '@tanstack/react-table';
import { IconImageFile, IconVideoFile, IconAudioFile, IconEye, IconDownload, IconShield, IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter } from '@/app/ui/icons/icons';
import {IconImageFile, IconVideoFile, IconAudioFile, IconEye, IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter, IconFileOpen, IconShieldExclamation} from '@/app/ui/icons/icons';
import { useTranslations } from 'next-intl';
import DropDownList from '@/app/components/dropDownList';
@@ -60,7 +60,7 @@ export default function TanstakFilesTable() {
// Данные с timestamp вместо Date объектов
const [data] = useState<FileItem[]>([
{ id: 1, fileName: 'image1.jpg', fileType: 'image', violations: 5, checks: 12, lastCheck: 1705267200000 }, // 15.01.2024
{ id: 2, fileName: 'presentation.mp4', fileType: 'video', violations: 2, checks: 8, lastCheck: 1705180800000 }, // 14.01.2024
{ id: 2, fileName: 'prespresentationpresentationprpresentationpresentationesentationentation.mp4', fileType: 'video', violations: 2, checks: 8, lastCheck: 1705180800000 }, // 14.01.2024
{ id: 3, fileName: 'song.mp3', fileType: 'audio', violations: 0, checks: 5, lastCheck: 1705094400000 }, // 13.01.2024
{ id: 4, fileName: 'photo1.jpg', fileType: 'image', violations: 3, checks: 10, lastCheck: 1705008000000 }, // 12.01.2024
{ id: 5, fileName: 'movie.mp4', fileType: 'video', violations: 1, checks: 7, lastCheck: 1704921600000 }, // 11.01.2024
@@ -115,10 +115,10 @@ export default function TanstakFilesTable() {
</div>
),
cell: ({ row }) => (
<div className="flex items-center space-x-2">
<div className="flex items-center space-x-2 w-[250px]">
<FileTypeIcon type={row.original.fileType} />
<div>
<div className="font-medium">{row.original.fileName}</div>
<div className="font-medium w-full max-w-[300px] truncate" title={row.original.fileName}>{row.original.fileName}</div>
</div>
</div>
),
@@ -245,13 +245,13 @@ export default function TanstakFilesTable() {
onClick={() => handleDownload(row.original)}
className="px-3 py-1 bg-green-500 text-white rounded hover:bg-green-600 text-sm"
>
<IconDownload />
<IconFileOpen />
</button>
<button
onClick={() => handleProtect(row.original)}
className="px-3 py-1 bg-violet-500 text-white rounded hover:bg-violet-600 text-sm"
>
<IconShield />
<IconShieldExclamation />
</button>
</div>
),
@@ -336,14 +336,15 @@ export default function TanstakFilesTable() {
});
return (
<div className="p-6 mx-auto">
<div className="p-6 mx-auto tanstak-table">
{/* Фильтры */}
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 py-4 px-0">
<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="flex flex-col md:flex-row gap-4 w-full md:w-auto">
<div className="flex flex-col w-50">
<div className="text-sm font-medium mb-1">{t('date-filter')}:</div>
<DropDownList
value={(() => {
value={dateFilter}
translatedValue={(() => {
switch (dateFilter) {
case 'all':
return t('all-dates')
@@ -380,18 +381,21 @@ export default function TanstakFilesTable() {
<div className="flex flex-col w-50">
<div className="text-sm font-medium mb-1">{t('type-filter')}:</div>
<DropDownList
value={(() => {
switch (typeFilter) {
case 'image':
return t('images')
case 'video':
return t('videos')
case 'audio':
return t('audios')
default:
return t('all-types')
}
})()}
value={typeFilter}
translatedValue={
(() => {
switch (typeFilter) {
case 'image':
return t('images')
case 'video':
return t('videos')
case 'audio':
return t('audios')
default:
return t('all-types')
}
})()
}
callBack={setTypeFilter}
>
<li value="all">
@@ -479,7 +483,7 @@ export default function TanstakFilesTable() {
<span className="text-sm text-gray-700">
{t('page')}{' '}
<strong>
{table.getState().pagination.pageIndex + 1} {t('out-of')} {table.getPageCount()}
{table.getState().pagination.pageIndex + 1} {t('out-of')} {table.getPageCount() ? table.getPageCount() : 1}
</strong>
</span>
<span className="text-sm text-gray-500">