add document view layout
This commit is contained in:
smanylov
@@ -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 (
|
||||
<div
|
||||
className="watch-doc-wrapper"
|
||||
>
|
||||
<div
|
||||
className="watch-doc-page"
|
||||
>
|
||||
<header className="watch-doc-header">
|
||||
<Link href="#" className="header-logo">NoCopy</Link>
|
||||
<Link href="#" className="header-user">Name</Link>
|
||||
</header>
|
||||
|
||||
<div
|
||||
className="watch-doc-status"
|
||||
>
|
||||
<div className="st-title">Защита подтверждена</div>
|
||||
<div className="st-sub">Документ <strong>Название документа</strong> зарегистрирован и защищён платформой NoCopy.</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="watch-doc-grid"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="watch-doc-card"
|
||||
>
|
||||
<div
|
||||
className="card-head"
|
||||
>
|
||||
Правообладатель
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="card-body"
|
||||
>
|
||||
<div className="owner-row">
|
||||
<div className="owner-av">N</div>
|
||||
<div>
|
||||
<div className="owner-name">Сидоров Станислав Андреевич</div>
|
||||
<div className="owner-meta">ООО "ПРОКОНТРОЛ"</div>
|
||||
<div className="owner-meta">Зарегистрирован в NoCopy</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="watch-doc-card"
|
||||
>
|
||||
<div
|
||||
className="card-head"
|
||||
>
|
||||
Скачать документ
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="card-body"
|
||||
>
|
||||
<div className="download-description">
|
||||
Вы вошли как <strong>Сидоров Станислав Андреевич</strong>.
|
||||
<br />
|
||||
Скачивание будет зарегистрировано.
|
||||
</div>
|
||||
|
||||
<button className="btn btn-acc">
|
||||
Скачать защищённый PDF
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="watch-doc-actions">
|
||||
<button className="btn btn-out">
|
||||
Скопировать ссылку
|
||||
</button>
|
||||
<Link href="#" className="btn btn-out" target="_blank">
|
||||
О NoCopy
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div
|
||||
className="watch-doc-card"
|
||||
>
|
||||
<div
|
||||
className="card-head"
|
||||
>
|
||||
Предосмотр
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="card-body"
|
||||
>
|
||||
<div
|
||||
className="prev-wrap"
|
||||
>
|
||||
документ
|
||||
</div>
|
||||
<div className="document-controls">
|
||||
<div className="document-controls__nav">
|
||||
<button className="document-controls__prev">← Пред.</button>
|
||||
<span className="document-controls__current-page">1 / 11</span>
|
||||
<button className="document-controls__next">След. →</button>
|
||||
</div>
|
||||
<button className="document-controls__fullscreen">На весь экран</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="watch-doc-footer"
|
||||
>
|
||||
<a href="#">NoCopy</a>
|
||||
<a href="#">Условия</a>
|
||||
<a href="#">Конфиденциальность</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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 }) {
|
||||
>
|
||||
<IconEye />
|
||||
</Link>
|
||||
{row.original.fileType === 'document' && (
|
||||
<Link
|
||||
href={`/watch-doc?docid=${row.original.id}`}
|
||||
className="bg-indigo-500 hover:bg-indigo-600"
|
||||
title={t('view')}
|
||||
target='_blank'
|
||||
>
|
||||
<IconLink />
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
<div className="actions-group">
|
||||
{row.original.protectStatus === 'PROTECTED' && (
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
@use './VKLogin.scss';
|
||||
@use './animation.scss';
|
||||
@use './violation-details.scss';
|
||||
@use './watch-doc.scss';
|
||||
|
||||
.page-title {
|
||||
font-size: 30px;
|
||||
|
||||
@@ -988,6 +988,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: v.$white;
|
||||
}
|
||||
|
||||
span {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -210,54 +210,60 @@ export function IconCheck() {
|
||||
|
||||
export function IconPolicy() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" ><path d="M480-80q-139-35-229.5-159.5T160-516v-244l320-120 320 120v244q0 85-29 163.5T688-214L560-342q-18 11-38.5 16.5T480-320q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 22-5.5 42.5T618-398l60 60q20-41 31-86t11-92v-189l-240-90-240 90v189q0 121 68 220t172 132q26-8 49.5-20.5T576-214l56 56q-33 27-71.5 47T480-80Zm56.5-343.5Q560-447 560-480t-23.5-56.5Q513-560 480-560t-56.5 23.5Q400-513 400-480t23.5 56.5Q447-400 480-400t56.5-23.5ZM488-477Z" /></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" className="icon"><path d="M480-80q-139-35-229.5-159.5T160-516v-244l320-120 320 120v244q0 85-29 163.5T688-214L560-342q-18 11-38.5 16.5T480-320q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 22-5.5 42.5T618-398l60 60q20-41 31-86t11-92v-189l-240-90-240 90v189q0 121 68 220t172 132q26-8 49.5-20.5T576-214l56 56q-33 27-71.5 47T480-80Zm56.5-343.5Q560-447 560-480t-23.5-56.5Q513-560 480-560t-56.5 23.5Q400-513 400-480t23.5 56.5Q447-400 480-400t56.5-23.5ZM488-477Z" /></svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconFiles() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" ><path d="M160-160q-33 0-56.5-23.5T80-240v-400q0-33 23.5-56.5T160-720h240l80-80h320q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm73-280h207v-207L233-440Zm-73-40 160-160H160v160Zm0 120v120h640v-480H520v280q0 33-23.5 56.5T440-360H160Zm280-160Z" /></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" className="icon"><path d="M160-160q-33 0-56.5-23.5T80-240v-400q0-33 23.5-56.5T160-720h240l80-80h320q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm73-280h207v-207L233-440Zm-73-40 160-160H160v160Zm0 120v120h640v-480H520v280q0 33-23.5 56.5T440-360H160Zm280-160Z" /></svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconAccountBalanceWallet() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" ><path d="M200-200v-560 560Zm0 80q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v100h-80v-100H200v560h560v-100h80v100q0 33-23.5 56.5T760-120H200Zm320-160q-33 0-56.5-23.5T440-360v-240q0-33 23.5-56.5T520-680h280q33 0 56.5 23.5T880-600v240q0 33-23.5 56.5T800-280H520Zm280-80v-240H520v240h280Zm-117.5-77.5Q700-455 700-480t-17.5-42.5Q665-540 640-540t-42.5 17.5Q580-505 580-480t17.5 42.5Q615-420 640-420t42.5-17.5Z" /></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" className="icon"><path d="M200-200v-560 560Zm0 80q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v100h-80v-100H200v560h560v-100h80v100q0 33-23.5 56.5T760-120H200Zm320-160q-33 0-56.5-23.5T440-360v-240q0-33 23.5-56.5T520-680h280q33 0 56.5 23.5T880-600v240q0 33-23.5 56.5T800-280H520Zm280-80v-240H520v240h280Zm-117.5-77.5Q700-455 700-480t-17.5-42.5Q665-540 640-540t-42.5 17.5Q580-505 580-480t17.5 42.5Q615-420 640-420t42.5-17.5Z" /></svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconCheckbook() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" ><path d="M240-360h280l80-80H240v80Zm0-160h240v-80H240v80Zm-80-160v400h280l-80 80H80v-560h800v120h-80v-40H160Zm756 212q5 5 5 11t-5 11l-36 36-70-70 36-36q5-5 11-5t11 5l48 48ZM520-120v-70l266-266 70 70-266 266h-70ZM160-680v400-400Z" /></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" className="icon"><path d="M240-360h280l80-80H240v80Zm0-160h240v-80H240v80Zm-80-160v400h280l-80 80H80v-560h800v120h-80v-40H160Zm756 212q5 5 5 11t-5 11l-36 36-70-70 36-36q5-5 11-5t11 5l48 48ZM520-120v-70l266-266 70 70-266 266h-70ZM160-680v400-400Z" /></svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconGavel() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" ><path d="M160-120v-80h480v80H160Zm226-194L160-540l84-86 228 226-86 86Zm254-254L414-796l86-84 226 226-86 86Zm184 408L302-682l56-56 522 522-56 56Z" /></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" className="icon"><path d="M160-120v-80h480v80H160Zm226-194L160-540l84-86 228 226-86 86Zm254-254L414-796l86-84 226 226-86 86Zm184 408L302-682l56-56 522 522-56 56Z" /></svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconInfoMessage() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" ><path d="M440-280h80v-240h-80v240Zm68.5-331.5Q520-623 520-640t-11.5-28.5Q497-680 480-680t-28.5 11.5Q440-657 440-640t11.5 28.5Q463-600 480-600t28.5-11.5ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" /></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" className="icon"><path d="M440-280h80v-240h-80v240Zm68.5-331.5Q520-623 520-640t-11.5-28.5Q497-680 480-680t-28.5 11.5Q440-657 440-640t11.5 28.5Q463-600 480-600t28.5-11.5ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" /></svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconContentCopy() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" /></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" className="icon"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" /></svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconFollowToLink() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" className="icon"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconFullScreen() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M120-120v-200h80v120h120v80H120Zm520 0v-80h120v-120h80v200H640ZM120-640v-200h200v80H200v120h-80Zm640 0v-120H640v-80h200v200h-80Z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000" className="icon"><path d="M120-120v-200h80v120h120v80H120Zm520 0v-80h120v-120h80v200H640ZM120-640v-200h200v80H200v120h-80Zm640 0v-120H640v-80h200v200h-80Z" /></svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconLink() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" className="icon"><path d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z" /></svg>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user