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
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "no-copy-frontend",
"version": "0.5.0",
"version": "0.6.0",
"private": true,
"scripts": {
"dev": "next dev -p 2999",
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">
src/app/styles/global-styles.scss
+6
View File
@@ -147,4 +147,10 @@
border-radius: 20px;
box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 20px;
}
}
.tanstak-table {
:where(.divide-gray-200 > tr:last-child) {
border-bottom: 1px solid var(--color-gray-200);
}
}
src/app/ui/icons/icons.tsx
+16
View File
@@ -1,5 +1,7 @@
/* https://icon-sets.iconify.design/ic/ */
import { CLIENT_STATIC_FILES_RUNTIME_WEBPACK } from 'next/dist/shared/lib/constants'
export function IconImageFile() {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon">
@@ -103,4 +105,18 @@ export function IconNotification() {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon"><g fill="none"><path d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z" /><path fill="currentColor" d="M12 2a7 7 0 0 0-7 7v3.528a1 1 0 0 1-.105.447l-1.717 3.433A1.1 1.1 0 0 0 4.162 18h15.676a1.1 1.1 0 0 0 .984-1.592l-1.716-3.433a1 1 0 0 1-.106-.447V9a7 7 0 0 0-7-7m0 19a3 3 0 0 1-2.83-2h5.66A3 3 0 0 1 12 21" /></g></svg>
)
}
export function IconFileOpen() {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon">
<path fill="currentColor" d="M15 22H6c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h8l6 6v6h-2V9h-5V4H6v16h9zm4-.34v-2.24l2.95 2.95l1.41-1.41L20.41 18h2.24v-2H17v5.66z" />
</svg>
)
}
export function IconShieldExclamation() {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M20.25 5c-2.663 0-5.258-.943-7.8-2.85a.75.75 0 0 0-.9 0C9.008 4.057 6.413 5 3.75 5a.75.75 0 0 0-.75.75V11c0 5.001 2.958 8.676 8.725 10.948a.75.75 0 0 0 .55 0C18.042 19.676 21 16 21 11V5.75a.75.75 0 0 0-.75-.75m-8.993 2.63a.75.75 0 0 1 1.486 0l.007.102v6.5l-.007.102a.75.75 0 0 1-1.486 0l-.007-.102v-6.5zM12 18a1 1 0 1 1 0-2a1 1 0 0 1 0 2"/></svg>
)
}