Schisandra-Cloud-Storage/schisandra-cloud-storage-front-react
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 添加默认布局

Browse Source
This commit is contained in:
landaiqing
2024-04-20 02:16:25 +08:00
parent 5889fe1b2f
commit f2b1aa6578
16 changed files with 1506 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

705
src/layout/default/index.less Normal file
View File

@@ -0,0 +1,705 @@
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
html, body {
width: 100%;
height: 100vh;
margin: 0;
}
body {
font-family: "DM Sans", sans-serif;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
//overflow: hidden;
//overflow-x: hidden;
background-image: url("@/assets/images/background.png");
background-position: center;
background-size: cover;
padding: 20px;
}
:root {
--dark-font: #0f0f10;
--light-font: #79798c;
}
a {
text-decoration: none;
cursor: pointer;
}
h1,p{
color: #0f0f10;
}
.app-container {
position: relative;
border-radius: 10px;
width: 100vw;
height: 100vh;
max-width: 1500px;
max-height: 670px;
background: linear-gradient(180deg, #e0e9fd 0%, #e9ecf1 90%);
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4);
display: flex;
overflow: hidden;
}
.left-area {
padding: 32px;
//flex-basis: 1 0 132px;
background-color: rgba(255, 255, 255, 0.9);
display: flex;
flex-direction: column;
align-items: center;
transition: all 300ms cubic-bezier(0.19, 1, 0.56, 1);
position: relative;
overflow: auto;
}
.left-area.show {
transform: translateX(0);
opacity: 1;
}
.app-name {
font-weight: 700;
font-size: 16px;
line-height: 24px;
color: var(--dark-font);
margin-bottom: 32px;
}
.item-link {
color: var(--light-font);
margin-bottom: 32px;
transition: 0.2s;
}
.item-link.active {
color: var(--dark-font);
}
.btn-logout {
border: none;
background-color: transparent;
color: var(--light-font);
margin-top: auto;
cursor: pointer;
transition: 0.2s;
}
.btn-logout:hover {
color: var(--dark-font);
}
.main-area {
flex: 1;
height: 100%;
overflow-y: auto;
background: linear-gradient(97deg, #f2f7fd 0%, #f0f4fd 90%);
border-radius: 0 10px 10px 0;
padding-bottom: 24px;
position: relative;
}
.main-area-header {
padding: 24px 40px;
background: linear-gradient(97deg, #f2f7fd 0%, #f0f4fd 90%);
}
.search-wrapper {
border-radius: 4px;
background-color: #fff;
padding-right: 12px;
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--light-font);
box-shadow: 0 2px 6px 0 rgba(136, 148, 171, 0.2), 0 24px 20px -24px rgba(71, 82, 107, 0.1);
overflow: hidden;
}
.search-input {
border: none;
flex: 1;
outline: none;
height: 100%;
padding: 0 12px;
font-size: 12px;
background-color: white;
}
.right-area {
flex-basis: 300px;
flex-grow: 0;
background: linear-gradient(180deg, #e0e9fd 0%, #e9ecf1 90%);
transition: all 300ms cubic-bezier(0.19, 1, 0.56, 1);
}
.right-area.show {
transform: translateX(0);
width: 100%;
opacity: 1;
}
.content-section {
display: block;
margin-top: 32px;
overflow-x: hidden;
padding: 0 40px;
}
.section-header {
font-size: 24px;
line-height: 32px;
margin-bottom: 16px;
}
.section-header-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
}
.section-header-link {
display: block;
font-size: 12px;
line-height: 16px;
color: #8683d6;
}
.access-links {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 0 -8px;
}
.access-icon {
width: 100%;
height: 100%;
border-radius: 12px;
padding: 20px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.access-icon svg {
width: 36px;
height: 36px;
}
.access-link-wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 8px;
}
.access-link-wrapper:nth-child(1) .access-icon {
background-color: #6166fe;
}
.access-link-wrapper:nth-child(2) .access-icon {
background-color: #6166fe;
}
.access-link-wrapper:nth-child(3) .access-icon {
background-color: #3275f7;
}
.access-link-wrapper:nth-child(4) .access-icon {
background-color: #3275f7;
}
.access-link-wrapper:nth-child(5) .access-icon {
background-color: #22244a;
}
.access-link-wrapper:nth-child(6) .access-icon {
background-color: #22244a;
}
.access-text {
color: var(--light-font);
font-size: 12px;
line-height: 24px;
}
.content-section-line,
.content-part-line {
display: flex;
justify-content: space-between;
}
.content-part-line {
height: 100%;
}
.content-section-line {
margin: 0 -8px;
}
.section-part {
flex-basis: 49%;
}
.image-wrapper {
border-radius: 12px;
overflow: hidden;
width: 100%;
height: auto;
position: relative;
flex-basis: 48%;
display: flex;
}
.image-wrapper img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: 0.2s ease-in;
}
.image-wrapper:hover img {
transform: scale(1.125);
}
.image-overlay {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgba(0, 16, 34, 0.8) 0%, rgba(240, 244, 253, 0.2) 90%);
padding: 12px;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
}
.video-info-text {
width: calc(100% - 40px);
}
.video-info-text p {
margin: 0;
}
.video-name, .video-subtext {
color: #fff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.video-name.medium, .video-subtext.medium {
font-size: 14px;
line-height: 24px;
}
.video-name.tiny, .video-subtext.tiny {
font-size: 12px;
line-height: 16px;
}
.video-info {
width: 100%;
display: flex;
justify-content: space-between;
}
.video-subtext {
opacity: 0.8;
}
.files-table {
background-color: #fff;
box-shadow: 0 2px 6px 0 rgba(136, 148, 171, 0.2), 0 24px 20px -24px rgba(71, 82, 107, 0.1);
border-radius: 12px;
padding: 12px;
display: table;
table-layout: auto;
width: 100%;
}
.files-table-header {
display: table-header-group;
}
.files-table-row {
display: table-row-group;
}
.table-cell {
display: table-cell;
font-size: 12px;
line-height: 16px;
color: #000;
padding: 8px;
}
.column-header {
font-size: 12px;
line-height: 16px;
color: #888da9;
}
.name-cell {
width: 40%;
word-break: break-all;
}
.name-cell.pdf:before {
content: "PDF";
background-color: #e2e9f8;
color: #5a8ff7;
}
.name-cell.jpg:before {
content: "JPG";
background-color: #e4e2f1;
color: #302d7d;
}
.name-cell:before {
border-radius: 4px;
font-size: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
display: inline-block;
vertical-align: middle;
margin-right: 4px;
}
.size-cell {
width: 20%;
}
.more-action {
border: none;
background-color: transparent;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23888da9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='feather feather-more-horizontal' viewBox='0 0 24 24'%3E%3Cdefs/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 24px;
height: 16px;
outline: none;
cursor: pointer;
}
.fixed.main-area-header {
position: sticky;
z-index: 2;
top: 0;
width: 100%;
padding: 12px 40px;
transition: 0.2s;
-webkit-animation: sticky 0.5s forwards;
animation: sticky 0.5s forwards;
}
@-webkit-keyframes sticky {
0% {
transform: translatey(-88px);
}
100% {
transform: translatey(0px);
}
}
@keyframes sticky {
0% {
transform: translatey(-88px);
}
100% {
transform: translatey(0px);
}
}
.video-time {
position: absolute;
z-index: 1;
border-radius: 10px;
padding: 4px 12px;
background-color: rgba(139, 156, 163, 0.5);
font-size: 10px;
right: 12px;
top: 12px;
color: #fff;
}
.btn-play {
border-radius: 50%;
background-color: #fff;
border: none;
box-shadow: 0 2px 6px 0 rgba(136, 148, 171, 0.2), 0 24px 20px -24px rgba(71, 82, 107, 0.1);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%2322244a' stroke='%2322244a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-play'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
width: 40px;
height: 40px;
flex-shrink: 0;
}
.right-area {
padding: 24px;
overflow: auto;
}
.right-area-header-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
}
.right-area-header-wrapper .more-action {
width: 24px;
height: 24px;
}
.download-item-line {
padding: 12px 0;
}
.line-header {
font-size: 12px;
line-height: 16px;
color: #888da9;
}
.download-area {
background-color: #eceffb;
border-radius: 12px;
padding: 8px;
display: flex;
align-items: center;
margin-top: 12px;
cursor: pointer;
}
.download-item-texts {
padding: 0 12px;
}
.download-item-texts p {
line-height: 16px;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 150px;
}
.download-text-header {
font-size: 12px;
}
.download-text-info {
color: #888da9;
font-size: 10px;
}
.download-text-info span {
margin-left: 8px;
}
.download-item-icon {
width: 32px;
}
.download-icon {
width: 24px;
fill: #4bc3a7;
}
.progress-bar {
height: 4px;
width: 100%;
overflow: hidden;
border-radius: 2px;
background-color: #dadff3;
margin: 6px 0;
}
.progress {
height: 100%;
width: 40%;
background-color: #4bc0dd;
display: block;
}
.received-item-line {
height: 150px;
width: 100%;
padding-top: 12px;
display: flex;
padding-left: 4px;
}
.progress-line {
height: 100%;
width: 2px;
background-color: #22244a;
display: flex;
justify-content: space-between;
flex-direction: column;
position: relative;
}
.progress-line:before, .progress-line:after {
content: "";
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #22244a;
transform: translateX(-50%);
left: 50%;
}
.progress-line:after {
bottom: 0;
}
.time {
margin-left: 12px;
font-size: 10px;
color: #888da9;
}
.received-items-content {
padding: 24px 10px;
}
.received-files {
display: flex;
height: 70%;
}
.received-files .image-wrapper {
margin-left: 6px;
display: flex;
}
.received-files-info {
font-size: 12px;
line-height: 16px;
margin-left: 12px;
margin-top: 12px;
}
.received-files-info span {
color: #7a8dc5;
}
.btn-show-left-area,
.btn-show-right-area {
position: absolute;
top: 24px;
width: 32px;
height: 40px;
border-radius: 4px;
background-color: #fff;
border: none;
display: flex;
align-items: center;
justify-content: center;
outline: none;
cursor: pointer;
display: none;
}
.btn-show-left-area {
left: 0;
border-radius: 0 4px 4px 0;
}
.btn-show-right-area {
right: 0;
border-radius: 4px 0 0 4px;
}
.btn-close-left,
.btn-close-right {
border: none;
background-color: transparent;
position: absolute;
top: 4px;
right: 4px;
color: var(--light-font);
outline: none;
cursor: pointer;
display: none;
}
.show .btn-close-left,
.show .btn-close-right {
display: block;
}
@media screen and (min-width: 850px) and (max-width: 1042px) {
.access-icon {
padding: 16px;
}
.access-icon svg {
width: 20px;
height: 20px;
}
}
@media screen and (max-width: 900px) {
.right-area {
transform: translateX(100%);
position: absolute;
opacity: 0;
z-index: 2;
height: 100%;
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4);
}
.btn-show-right-area {
display: flex;
}
.access-icon svg {
width: 36px;
height: 36px;
}
}
@media screen and (max-width: 768px) {
.left-area {
transform: translateX(-100%);
opacity: 0;
position: absolute;
z-index: 2;
height: 100%;
background-color: #fff;
background-image: none;
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4);
}
.btn-show-left-area {
display: flex;
}
.content-section-line,
.content-part-line {
flex-direction: column;
}
.image-wrapper {
margin: 10px 0;
}
.video-name.tiny, .video-subtext.tiny {
font-size: 16px;
line-height: 24px;
}
.access-link-wrapper {
width: 33.3%;
}
}
@media screen and (max-width: 520px) {
body {
padding: 0;
}
.app-container {
border-radius: 0;
}
.content-section {
padding: 0 20px;
}
.content-section-line {
margin: 0;
}
}

17
src/layout/default/index.tsx Normal file
View File

@@ -0,0 +1,17 @@
import React from 'react'
import LeftArea from '@/layout/default/left-area'
import MainArea from '@/layout/default/main-area'
import RightArea from '@/layout/default/right-area'
import './index.less'
const DefaultLayOut: React.FC = () => {
return (
<>
<div className='app-container'>
<LeftArea />
<MainArea />
<RightArea />
</div>
</>
)
}
export default DefaultLayOut

110
src/layout/default/left-area/index.tsx Normal file
View File

@@ -0,0 +1,110 @@
import React from 'react'
const LeftArea: React.FC = () => {
return (
<>
<div className='left-area'>
<button className='btn-close-left'>
<svg
xmlns='http://www.w3.org/2000/svg'
width='24'
height='24'
fill='none'
stroke='currentColor'
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth='2'
className='feather feather-x-circle'
viewBox='0 0 24 24'>
<defs></defs>
<circle cx='12' cy='12' r='10'></circle>
<path d='M15 9l-6 6M9 9l6 6'></path>
</svg>
</button>
<div className='app-name'>MyDocs</div>
<a href='#' className='item-link active' id='pageLink'>
<svg
xmlns='http://www.w3.org/2000/svg'
width='24'
height='24'
fill='none'
stroke='currentColor'
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth='2'
className='feather feather-grid'
viewBox='0 0 24 24'>
<defs></defs>
<path d='M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z'></path>
</svg>
</a>
<a href='#' className='item-link' id='pageLink'>
<svg
xmlns='http://www.w3.org/2000/svg'
width='24'
height='24'
fill='none'
stroke='currentColor'
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth='2'
className='feather feather-folder'
viewBox='0 0 24 24'>
<defs></defs>
<path d='M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z'></path>
</svg>
</a>
<a href='#' className='item-link' id='pageLink'>
<svg
xmlns='http://www.w3.org/2000/svg'
width='24'
height='24'
fill='none'
stroke='currentColor'
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth='2'
className='feather feather-hard-drive'
viewBox='0 0 24 24'>
<defs></defs>
<path d='M22 12H2M5.45 5.11L2 12v6a2 2 0 002 2h16a2 2 0 002-2v-6l-3.45-6.89A2 2 0 0016.76 4H7.24a2 2 0 00-1.79 1.11zM6 16h.01M10 16h.01'></path>
</svg>
</a>
<a href='#' className='item-link' id='pageLink'>
<svg
xmlns='http://www.w3.org/2000/svg'
width='24'
height='24'
fill='none'
stroke='currentColor'
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth='2'
className='feather feather-settings'
viewBox='0 0 24 24'>
<defs></defs>
<circle cx='12' cy='12' r='3'></circle>
<path d='M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z'></path>
</svg>
</a>
<button className='btn-logout'>
<svg
xmlns='http://www.w3.org/2000/svg'
width='24'
height='24'
fill='none'
stroke='currentColor'
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth='2'
className='feather feather-log-out'
viewBox='0 0 24 24'>
<defs></defs>
<path d='M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9'></path>
</svg>
</button>
</div>
</>
)
}
export default LeftArea

269
src/layout/default/main-area/index.tsx Normal file
View File

@@ -0,0 +1,269 @@
import React from 'react'
const MainArea: React.FC = () => {
return (
<>
<div className='main-area'>
<button className='btn-show-right-area'>
<svg
xmlns='http://www.w3.org/2000/svg'
width='24'
height='24'
viewBox='0 0 24 24'
fill='none'
stroke='currentColor'
strokeWidth='2'
strokeLinecap='round'
strokeLinejoin='round'
className='feather feather-chevron-left'>
<polyline points='15 18 9 12 15 6'></polyline>
</svg>
</button>
<button className='btn-show-left-area'>
<svg
xmlns='http://www.w3.org/2000/svg'
width='24'
height='24'
viewBox='0 0 24 24'
fill='none'
stroke='currentColor'
strokeWidth='2'
strokeLinecap='round'
strokeLinejoin='round'>
<line x1='3' y1='12' x2='21' y2='12'></line>
<line x1='3' y1='6' x2='21' y2='6'></line>
<line x1='3' y1='18' x2='21' y2='18'></line>
</svg>
</button>
<div className='main-area-header'>
<div className='search-wrapper' id='searchLine'>
<input className='search-input' type='text' placeholder='e.g. files.doc' />
<svg
xmlns='http://www.w3.org/2000/svg'
width='20'
height='20'
fill='none'
stroke='currentColor'
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth='2'
className='feather feather-search'
viewBox='0 0 24 24'>
<defs></defs>
<circle cx='11' cy='11' r='8'></circle>
<path d='M21 21l-4.35-4.35'></path>
</svg>
</div>
</div>
<section className='content-section'>
<h1 className='section-header'>Quick Access</h1>
<div className='access-links'>
<div className='access-link-wrapper'>
<div className='access-icon'>
<svg
xmlns='http://www.w3.org/2000/svg'
width='56'
height='56'
viewBox='0 0 24 24'
fill='none'
stroke='currentColor'
strokeWidth='1'
strokeLinecap='round'
strokeLinejoin='round'
className='feather feather-image'>
<rect x='3' y='3' width='18' height='18' rx='2' ry='2'></rect>
<circle cx='8.5' cy='8.5' r='1.5'></circle>
<polyline points='21 15 16 10 5 21'></polyline>
</svg>
</div>
<span className='access-text'>Images</span>
</div>
<div className='access-link-wrapper'>
<div className='access-icon'>
<svg
xmlns='http://www.w3.org/2000/svg'
width='56'
height='56'
viewBox='0 0 24 24'
fill='none'
stroke='currentColor'
strokeWidth='1'
strokeLinecap='round'
strokeLinejoin='round'
className='feather feather-music'>
<path d='M9 18V5l12-2v13'></path>
<circle cx='6' cy='18' r='3'></circle>
<circle cx='18' cy='16' r='3'></circle>
</svg>
</div>
<span className='access-text'>Music</span>
</div>
<div className='access-link-wrapper'>
<div className='access-icon'>
<svg
xmlns='http://www.w3.org/2000/svg'
width='56'
height='56'
viewBox='0 0 24 24'
fill='currentColor'
stroke='currentColor'
strokeWidth='1'
strokeLinecap='round'
strokeLinejoin='round'
className='feather feather-play'>
<polygon points='5 3 19 12 5 21 5 3'></polygon>
</svg>
</div>
<span className='access-text'>Video</span>
</div>
<div className='access-link-wrapper'>
<div className='access-icon'>
<svg
xmlns='http://www.w3.org/2000/svg'
width='56'
height='56'
viewBox='0 0 24 24'
fill='none'
stroke='currentColor'
strokeWidth='1'
strokeLinecap='round'
strokeLinejoin='round'
className='feather feather-align-left'>
<line x1='17' y1='10' x2='3' y2='10'></line>
<line x1='21' y1='6' x2='3' y2='6'></line>
<line x1='21' y1='14' x2='3' y2='14'></line>
<line x1='17' y1='18' x2='3' y2='18'></line>
</svg>
</div>
<span className='access-text'>Docs</span>
</div>
<div className='access-link-wrapper'>
<div className='access-icon'>
<svg
xmlns='http://www.w3.org/2000/svg'
width='56'
height='56'
viewBox='0 0 24 24'
fill='none'
stroke='currentColor'
strokeWidth='1'
strokeLinecap='round'
strokeLinejoin='round'
className='feather feather-layers'>
<polygon points='12 2 2 7 12 12 22 7 12 2'></polygon>
<polyline points='2 17 12 22 22 17'></polyline>
<polyline points='2 12 12 17 22 12'></polyline>
</svg>
</div>
<span className='access-text'>Apps</span>
</div>
<div className='access-link-wrapper'>
<div className='access-icon'>
<svg
xmlns='http://www.w3.org/2000/svg'
width='56'
height='56'
viewBox='0 0 24 24'
fill='none'
stroke='currentColor'
strokeWidth='1'
strokeLinecap='round'
strokeLinejoin='round'
className='feather feather-arrow-down-circle'>
<circle cx='12' cy='12' r='10'></circle>
<polyline points='8 12 12 16 16 12'></polyline>
<line x1='12' y1='8' x2='12' y2='16'></line>
</svg>
</div>
<span className='access-text'>Download</span>
</div>
</div>
</section>
<section className='content-section'>
<div className='section-header-wrapper'>
<h1 className='section-header'>Preview</h1>
<a className='section-header-link'>View in folders</a>
</div>
<div className='content-section-line'>
<div className='section-part left'>
<a className='image-wrapper'>
<div className='image-overlay'>
<div className='video-info'>
<div className='video-info-text'>
<p className='video-name medium'>
Happiness &amp; Tears
</p>
<p className='video-subtext medium'>45.5 MB</p>
</div>
<button className='btn-play'></button>
</div>
</div>
<img src='https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2251&amp;q=80' />
<span className='video-time'>10:32</span>
</a>
</div>
<div className='section-part right'>
<div className='content-part-line'>
<a className='image-wrapper'>
<div className='image-overlay'>
<div className='video-info'>
<div className='video-info-text'>
<p className='video-name tiny'>High Hopes</p>
<p className='video-subtext tiny'>50 MB</p>
</div>
</div>
</div>
<img src='https://images.unsplash.com/photo-1515552726023-7125c8d07fb3?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2167&amp;q=80' />
<span className='video-time'>02:35</span>
</a>
<a className='image-wrapper'>
<div className='image-overlay'>
<div className='video-info'>
<div className='video-info-text'>
<p className='video-name tiny'>Imaginery you</p>
<p className='video-subtext tiny'>210.2 MB</p>
</div>
</div>
</div>
<img src='https://images.unsplash.com/photo-1542359649-31e03cd4d909?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2167&amp;q=80' />
<span className='video-time'>04:15</span>
</a>
</div>
</div>
</div>
</section>
<section className='content-section'>
<div className='section-header-wrapper'>
<h1 className='section-header'>Recent Files</h1>
<a className='section-header-link'>View all files</a>
</div>
<div className='files-table'>
<div className='files-table-header'>
<div className='column-header table-cell'>Name</div>
<div className='column-header table-cell size-cell'>Size</div>
<div className='column-header table-cell'>Last Modified</div>
<div className='column-header table-cell'>Action</div>
</div>
<div className='files-table-row'>
<div className='table-cell name-cell pdf'>Brandenburg.pdf</div>
<div className='table-cell'>42 MB</div>
<div className='table-cell'>Aug 26, 2020</div>
<div className='table-cell action-cell'>
<button className='more-action'></button>
</div>
</div>
<div className='files-table-row'>
<div className='table-cell name-cell jpg'>TheLionsRoar.jpg</div>
<div className='table-cell size-cell'>500 KB</div>
<div className='table-cell'>Aug 26, 2020</div>
<div className='table-cell action-cell'>
<button className='more-action'></button>
</div>
</div>
</div>
</section>
</div>
</>
)
}
export default MainArea

133
src/layout/default/right-area/index.tsx Normal file
View File

@@ -0,0 +1,133 @@
import React from 'react'
const RightArea: React.FC = () => {
return (
<>
<div className='right-area'>
<button className='btn-close-right'>
<svg
xmlns='http://www.w3.org/2000/svg'
width='24'
height='24'
fill='none'
stroke='currentColor'
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth='2'
className='feather feather-x-circle'
viewBox='0 0 24 24'>
<defs></defs>
<circle cx='12' cy='12' r='10'></circle>
<path d='M15 9l-6 6M9 9l6 6'></path>
</svg>
</button>
<div className='right-area-header-wrapper'>
<p className='right-area-header'>Downloads</p>
<button className='more-action'></button>
</div>
<div className='download-item-line'>
<div className='line-header'>Today</div>
<div className='download-area'>
<div className='download-item-icon'>
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 512 512'
className=''>
<defs></defs>
<circle cx='256' cy='256' r='256' fill='#4b50dd'></circle>
<path
fill='#f5f5f5'
d='M192 64h176c4.4 0 8 3.6 8 8v328c0 4.4-3.6 8-8 8H120c-4.4 0-8-3.6-8-8V148l80-84z'></path>
<path
fill='#e6e6e6'
d='M184 148c4.4 0 8-3.6 8-8V64l-80 84h72z'></path>
<circle cx='352' cy='384' r='52' fill='#2179a6'></circle>
<g fill='#f5f5f5' className='g'>
<path d='M352 416c-2.208 0-4-1.788-4-4v-56c0-2.212 1.792-4 4-4s4 1.788 4 4v56c0 2.212-1.792 4-4 4z'></path>
<path d='M352 416a3.989 3.989 0 01-2.828-1.172l-20-20c-1.564-1.564-1.564-4.092 0-5.656s4.092-1.564 5.656 0L352 406.344l17.172-17.172c1.564-1.564 4.092-1.564 5.656 0s1.564 4.092 0 5.656l-20 20A3.989 3.989 0 01352 416z'></path>
</g>
</svg>
</div>
<div className='download-item-texts'>
<p className='download-text-header'>Glitter.mp4</p>
<p className='download-text-info'>
34.45 MB<span>Waiting for download</span>
</p>
</div>
<div className='download-icon'>
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 612 612'>
<defs></defs>
<path d='M403.939 295.749l-78.814 78.833V172.125c0-10.557-8.568-19.125-19.125-19.125s-19.125 8.568-19.125 19.125v202.457l-78.814-78.814c-7.478-7.478-19.584-7.478-27.043 0-7.478 7.478-7.478 19.584 0 27.042L289.208 431c4.59 4.59 10.863 6.005 16.812 4.953 5.929 1.052 12.221-.382 16.811-4.953l108.19-108.19c7.478-7.478 7.478-19.583 0-27.042-7.498-7.478-19.604-7.478-27.082-.019zM306 0C137.012 0 0 136.992 0 306s137.012 306 306 306 306-137.012 306-306S475.008 0 306 0zm0 573.75C158.125 573.75 38.25 453.875 38.25 306S158.125 38.25 306 38.25 573.75 158.125 573.75 306 453.875 573.75 306 573.75z'></path>
</svg>
</div>
</div>
</div>
<div className='download-item-line'>
<div className='line-header'>Yesterday</div>
<div className='download-area'>
<div className='download-item-icon'>
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 512 512'
className=''>
<defs></defs>
<circle cx='256' cy='256' r='256' fill='#4bc0dd'></circle>
<path
fill='#f5f5f5'
d='M192 64h176c4.4 0 8 3.6 8 8v328c0 4.4-3.6 8-8 8H120c-4.4 0-8-3.6-8-8V148l80-84z'></path>
<path
fill='#e6e6e6'
d='M184 148c4.4 0 8-3.6 8-8V64l-80 84h72z'></path>
<circle cx='352' cy='384' r='52' fill='#2179a6'></circle>
<g fill='#f5f5f5' className='g'>
<path d='M352 416c-2.208 0-4-1.788-4-4v-56c0-2.212 1.792-4 4-4s4 1.788 4 4v56c0 2.212-1.792 4-4 4z'></path>
<path d='M352 416a3.989 3.989 0 01-2.828-1.172l-20-20c-1.564-1.564-1.564-4.092 0-5.656s4.092-1.564 5.656 0L352 406.344l17.172-17.172c1.564-1.564 4.092-1.564 5.656 0s1.564 4.092 0 5.656l-20 20A3.989 3.989 0 01352 416z'></path>
</g>
</svg>
</div>
<div className='download-item-texts'>
<p className='download-text-header'>Glitter.mp4</p>
<div className='progress-bar'>
<span className='progress'></span>
</div>
</div>
<div className='download-icon'>
<svg xmlns='http://www.w3.org/2000/svg' viewBox='1 1 512 512'>
<defs></defs>
<path d='M256 512C114.613 512 0 397.383 0 256S114.613 0 256 0s256 114.613 256 256c-.168 141.316-114.684 255.832-256 256zm0-480C132.29 32 32 132.29 32 256s100.29 224 224 224 224-100.29 224-224c-.133-123.656-100.344-223.867-224-224zm0 0'></path>
<path d='M208 368c-8.836 0-16-7.164-16-16V160c0-8.836 7.164-16 16-16s16 7.164 16 16v192c0 8.836-7.164 16-16 16zm0 0M304 368c-8.836 0-16-7.164-16-16V160c0-8.836 7.164-16 16-16s16 7.164 16 16v192c0 8.836-7.164 16-16 16zm0 0'></path>
</svg>
</div>
</div>
</div>
<div className='right-area-header-wrapper'>
<p className='right-area-header'>File Received</p>
</div>
<div className='received-item-line'>
<div className='progress-line'>
<span className='time start'>15:30</span>
<span className='time end'>18:30</span>
</div>
<div className='received-items-content'>
<div className='received-files'>
<div className='image-wrapper'>
<img src='https://images.unsplash.com/photo-1523987355523-c7b5b0dd90a7?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=2250&amp;q=80' />
</div>
<div className='image-wrapper'>
<img src='https://images.unsplash.com/photo-1498855926480-d98e83099315?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2250&amp;q=80' />
</div>
<div className='image-wrapper'>
<img src='https://images.unsplash.com/photo-1492648272180-61e45a8d98a7?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=2250&amp;q=80' />
</div>
</div>
<div className='received-files-info'>
Received <span className='info-purple'>3 images</span> total{' '}
<span className='info-purple'>50.3 MB</span>
</div>
</div>
</div>
</div>
</>
)
}
export default RightArea