diff --git a/src/app/[locale]/watch-doc/page.tsx b/src/app/[locale]/watch-doc/page.tsx new file mode 100644 index 0000000..8dd22e7 --- /dev/null +++ b/src/app/[locale]/watch-doc/page.tsx @@ -0,0 +1,135 @@ +'use server' + +import Link from 'next/link'; + +interface PageProps { + searchParams: Promise<{ docid?: string }>; +} + +export default async function Page({ + searchParams +}: PageProps) { + const { docid } = await searchParams; + + return ( +
+
+
+ NoCopy + Name +
+ +
+
Защита подтверждена
+
Документ Название документа зарегистрирован и защищён платформой NoCopy.
+
+ +
+
+
+
+ Правообладатель +
+ +
+
+
N
+
+
Сидоров Станислав Андреевич
+
ООО "ПРОКОНТРОЛ"
+
Зарегистрирован в NoCopy
+
+
+
+
+ +
+
+ Скачать документ +
+ +
+
+ Вы вошли как Сидоров Станислав Андреевич. +
+ Скачивание будет зарегистрировано. +
+ + +
+
+ +
+ + + О NoCopy + +
+
+ +
+
+
+ Предосмотр +
+ +
+
+ документ +
+
+
+ + 1 / 11 + +
+ +
+
+
+
+
+ +
+ NoCopy + Условия + Конфиденциальность +
+
+
+ ) +} \ No newline at end of file diff --git a/src/app/components/tanstak-table/TanstakTable.tsx b/src/app/components/tanstak-table/TanstakTable.tsx index ce5fb78..bcc25d6 100644 --- a/src/app/components/tanstak-table/TanstakTable.tsx +++ b/src/app/components/tanstak-table/TanstakTable.tsx @@ -12,7 +12,7 @@ import { ColumnFiltersState, PaginationState } from '@tanstack/react-table'; -import { IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter, IconFileDownload, IconInfo, IconEye, IconCheck, IconImageFile } from '@/app/ui/icons/icons'; +import {IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter, IconFileDownload, IconInfo, IconEye, IconCheck, IconImageFile, IconLink} from '@/app/ui/icons/icons'; import { useTranslations, useLocale } from 'next-intl'; import DropDownList from '@/app/components/DropDownList'; import { useQuery, useQueryClient } from '@tanstack/react-query'; @@ -572,6 +572,16 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) { > + {row.original.fileType === 'document' && ( + + + + )}
{row.original.protectStatus === 'PROTECTED' && ( diff --git a/src/app/styles/global-styles.scss b/src/app/styles/global-styles.scss index 04a7aae..bf1b5a7 100644 --- a/src/app/styles/global-styles.scss +++ b/src/app/styles/global-styles.scss @@ -8,6 +8,7 @@ @use './VKLogin.scss'; @use './animation.scss'; @use './violation-details.scss'; +@use './watch-doc.scss'; .page-title { font-size: 30px; diff --git a/src/app/styles/pages-styles.scss b/src/app/styles/pages-styles.scss index d712274..a8e734f 100644 --- a/src/app/styles/pages-styles.scss +++ b/src/app/styles/pages-styles.scss @@ -988,6 +988,10 @@ } } + svg { + fill: v.$white; + } + span { padding-left: 5px; } diff --git a/src/app/styles/watch-doc.scss b/src/app/styles/watch-doc.scss new file mode 100644 index 0000000..083d23f --- /dev/null +++ b/src/app/styles/watch-doc.scss @@ -0,0 +1,257 @@ +@use './variable.scss' as v; + +:root { + --bg: #f5f6fa; + --card: #fff; + --border: #e2e5ef; + --border2: #d0d4e4; + --text: #0f1221; + --text2: #4b5270; + --muted: #8890ad; + --accent: #5b47e0; + --accent2: #7c5cf6; + --green: #059669; + --green-bg: #ecfdf5; + --green-bd: #a7f3d0; + --red: #dc2626; + --red-bg: #fef2f2; + --amber: #b45309; + --shadow: 0 2px 12px rgba(15, 18, 33, .07); +} + +.watch-doc { + &-wrapper { + background: var(--bg); + color: var(--text); + font-size: 15px; + line-height: 1.6; + min-height: 100vh; + + + .btn-acc { + background: var(--accent); + color: #fff; + box-shadow: 0 3px 12px rgba(91, 71, 224, .28); + margin: 0 auto; + display: block; + + &:hover { + background: var(--accent2); + text-decoration: none; + } + } + + .btn-out { + background: var(--card); + color: var(--text2); + border: 1px solid var(--border2); + width: 100%; + + &:hover { + border-color: var(--accent); + color: var(--accent); + text-decoration: none; + } + } + + .document-controls { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 8px; + + &__nav { + display: flex; + align-items: center; + gap: 8px; + } + + &__next, + &__prev { + font-size: 0.75rem; + color: var(--accent); + background: none; + border: 1px solid var(--border2); + border-radius: 6px; + padding: 3px 10px; + cursor: pointer; + font-family: inherit; + display: inline; + + &:hover { + background: var(--accent); + color: #fff; + } + } + + &__current-page { + font-size: 0.75rem; + color: var(--muted); + display: inline; + } + + &__fullscreen { + font-size: .75rem; + color: var(--accent); + background: none; + border: 1px solid var(--border2); + border-radius: 6px; + padding: 3px 10px; + cursor: pointer; + font-family: inherit; + + &:hover { + background: var(--accent); + color: #fff; + } + } + } + } + + &-page { + max-width: 880px; + margin: 0 auto; + padding: 0 16px 60px; + } + + &-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 18px 0 20px; + border-bottom: 1px solid var(--border); + margin-bottom: 28px; + + .header-logo { + font-size: 1.1rem; + font-weight: 700; + color: v.$p-color; + display: flex; + align-items: center; + gap: 7px; + } + + .header-user { + font-size: .83rem; + color: var(--text2); + background: #fff; + border: 1px solid var(--border); + border-radius: 8px; + padding: 7px 14px; + } + } + + &-status { + background: var(--green-bg); + border: 1.5px solid var(--green-bd); + + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 14px; + margin-bottom: 22px; + padding: 20px 22px; + border-radius: 14px; + + .st-title { + color: var(--green); + font-size: 1.05rem; + font-weight: 700; + margin-bottom: 3px; + } + + .st-sub { + font-size: .83rem; + color: var(--text2); + line-height: 1.5; + } + } + + &-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 14px; + } + + &-footer { + text-align: center; + padding: 28px 0 0; + color: var(--muted); + font-size: .76rem; + border-top: 1px solid var(--border); + margin-top: 14px; + display: flex; + justify-content: center; + gap: 10px; + } + + &-card { + background: var(--card); + border: 1px solid var(--border); + border-radius: 14px; + margin-bottom: 14px; + overflow: hidden; + box-shadow: var(--shadow); + + .card-head { + padding: 14px 20px; + border-bottom: 1px solid var(--border); + display: flex; + align-items: center; + gap: 9px; + + font-size: .78rem; + font-weight: 700; + color: var(--text); + text-transform: uppercase; + letter-spacing: .6px; + } + + .card-body { + padding: 14px 20px; + + .owner-row { + display: flex; + align-items: center; + gap: 12px; + } + + .owner-av { + width: 42px; + height: 42px; + border-radius: 10px; + background: linear-gradient(135deg, var(--accent), var(--accent2)); + display: flex; + align-items: center; + justify-content: center; + color: #fff; + font-size: 1.1rem; + font-weight: 700; + flex-shrink: 0; + } + + .owner-name { + font-weight: 700; + margin-bottom: 5px; + } + + .owner-meta { + color: var(--muted); + } + } + + .download-description { + font-size: .82rem; + color: var(--text2); + margin-bottom: 14px; + text-align: center; + } + } + + &-actions { + display: flex; + gap: 9px; + flex-wrap: wrap; + margin-top: 16px; + } +} \ No newline at end of file diff --git a/src/app/ui/icons/icons.tsx b/src/app/ui/icons/icons.tsx index 94818bc..0962774 100644 --- a/src/app/ui/icons/icons.tsx +++ b/src/app/ui/icons/icons.tsx @@ -210,54 +210,60 @@ export function IconCheck() { export function IconPolicy() { return ( - + ) } export function IconFiles() { return ( - + ) } export function IconAccountBalanceWallet() { return ( - + ) } export function IconCheckbook() { return ( - + ) } export function IconGavel() { return ( - + ) } export function IconInfoMessage() { return ( - + ) } export function IconContentCopy() { return ( - + ) } export function IconFollowToLink() { return ( - + ) } export function IconFullScreen() { return ( - + + ) +} + +export function IconLink() { + return ( + ) } \ No newline at end of file