Merge pull request #5 from NebulousLabs/robbys-edits
- faster animations - fix mobile shapes - new copy button
This commit is contained in:
Karol Wypchło
GitHub
commit
1311539fee
|
|
@ -1,24 +1,24 @@
|
|||
import React from 'react'
|
||||
import Fade from 'react-reveal/Fade'
|
||||
import Reveal from 'react-reveal/Reveal'
|
||||
import React from "react";
|
||||
import Fade from "react-reveal/Fade";
|
||||
import Reveal from "react-reveal/Reveal";
|
||||
|
||||
import { Arrow, FooterOrb, FooterCube, Built } from '../../svg'
|
||||
import './Footer.scss'
|
||||
import { Mailing } from '..'
|
||||
import { Arrow, FooterOrb, FooterCube, Built } from "../../svg";
|
||||
import "./Footer.scss";
|
||||
import { Mailing } from "..";
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<Reveal effect="active">
|
||||
<footer className="footer">
|
||||
<div className="width">
|
||||
<Fade distance="40px" bottom>
|
||||
<Fade duration={700} distance="40px" bottom>
|
||||
<div className="footer-column">
|
||||
<Built />
|
||||
</div>
|
||||
</Fade>
|
||||
|
||||
<div className="footer-column">
|
||||
<Fade distance="40px" bottom>
|
||||
<Fade duration={700} distance="40px" bottom>
|
||||
<h2>Sia Elsewhere</h2>
|
||||
|
||||
<ul>
|
||||
|
|
@ -48,7 +48,7 @@ export default function Footer() {
|
|||
</div>
|
||||
|
||||
<div className="footer-column">
|
||||
<Fade distance="40px" bottom>
|
||||
<Fade duration={700} distance="40px" bottom>
|
||||
<h2>Social</h2>
|
||||
<ul>
|
||||
<li>
|
||||
|
|
@ -77,7 +77,7 @@ export default function Footer() {
|
|||
</div>
|
||||
|
||||
<div className="footer-column">
|
||||
<Fade distance="40px" bottom>
|
||||
<Fade duration={700} distance="40px" bottom>
|
||||
<h2>Stay up-to-date with Skynet updates</h2>
|
||||
<Mailing id="check2" light />
|
||||
</Fade>
|
||||
|
|
@ -88,5 +88,5 @@ export default function Footer() {
|
|||
<FooterOrb className="footer-orb fadeInUp delay2" />
|
||||
</footer>
|
||||
</Reveal>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import React from 'react'
|
||||
import Fade from 'react-reveal/Fade'
|
||||
import React from "react";
|
||||
import Fade from "react-reveal/Fade";
|
||||
|
||||
import './HomeBuilt.scss'
|
||||
import { CircleIcon, CodeExamples } from '../'
|
||||
import { Cylinder, SmallOrb } from '../../svg'
|
||||
import "./HomeBuilt.scss";
|
||||
import { CircleIcon, CodeExamples } from "../";
|
||||
import { Cylinder, SmallOrb } from "../../svg";
|
||||
|
||||
export default function HomeBuilt() {
|
||||
return (
|
||||
<div className="home-built">
|
||||
<header className="home-built-header">
|
||||
<Fade distance="40px" bottom>
|
||||
<Fade duration={700} distance="40px" bottom>
|
||||
<div className="home-built-divider">
|
||||
<div className="small-divider" />
|
||||
<div className="divider" />
|
||||
|
|
@ -22,7 +22,7 @@ export default function HomeBuilt() {
|
|||
<div className="small-divider" />
|
||||
</div>
|
||||
</Fade>
|
||||
<Fade distance="40px" bottom>
|
||||
<Fade duration={700} distance="40px" bottom>
|
||||
<h2>
|
||||
Infrastructure built for
|
||||
<br />
|
||||
|
|
@ -31,9 +31,9 @@ export default function HomeBuilt() {
|
|||
</Fade>
|
||||
</header>
|
||||
|
||||
<Fade distance="40px" bottom>
|
||||
<Fade duration={700} distance="40px" bottom>
|
||||
<CodeExamples />
|
||||
</Fade>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,36 +1,36 @@
|
|||
import React, { Component } from 'react'
|
||||
import CountUp from 'react-countup'
|
||||
import VisibilitySensor from 'react-visibility-sensor'
|
||||
import Fade from 'react-reveal/Fade'
|
||||
import React, { Component } from "react";
|
||||
import CountUp from "react-countup";
|
||||
import VisibilitySensor from "react-visibility-sensor";
|
||||
import Fade from "react-reveal/Fade";
|
||||
|
||||
import './HomeNetwork.scss'
|
||||
import { CircleIcon, FAQ } from '../'
|
||||
import { SmallOrb, LogoSolid, Arrow, Deco6, Deco7, Deco8 } from '../../svg'
|
||||
import "./HomeNetwork.scss";
|
||||
import { CircleIcon, FAQ } from "../";
|
||||
import { SmallOrb, LogoSolid, Arrow, Deco6, Deco7, Deco8 } from "../../svg";
|
||||
|
||||
const stats = [
|
||||
{ name: 'TB Used', value: 664 },
|
||||
{ name: 'TB Capacity', value: 2315 },
|
||||
{ name: 'Hosts', value: 335 },
|
||||
{ name: 'Storage/TB', value: 91, cent: true },
|
||||
{ name: 'Bandwidth/TB', value: 18, cent: true },
|
||||
]
|
||||
{ name: "TB Used", value: 664 },
|
||||
{ name: "TB Capacity", value: 2315 },
|
||||
{ name: "Hosts", value: 335 },
|
||||
{ name: "Storage/TB", value: 91, cent: true },
|
||||
{ name: "Bandwidth/TB", value: 18, cent: true }
|
||||
];
|
||||
|
||||
export default class HomeNetwork extends Component {
|
||||
state = {
|
||||
visable: false,
|
||||
}
|
||||
visable: false
|
||||
};
|
||||
|
||||
onChange = isVisible => {
|
||||
if (isVisible && !this.state.visable) {
|
||||
this.setState({ visable: true })
|
||||
this.setState({ visable: true });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="home-network">
|
||||
<header className="home-network-header">
|
||||
<Fade distance="40px" bottom>
|
||||
<Fade duration={700} distance="40px" bottom>
|
||||
<div className="home-network-divider">
|
||||
<CircleIcon>
|
||||
<LogoSolid />
|
||||
|
|
@ -40,7 +40,7 @@ export default class HomeNetwork extends Component {
|
|||
<div className="small-divider"></div>
|
||||
</div>
|
||||
</Fade>
|
||||
<Fade distance="40px" bottom>
|
||||
<Fade duration={700} distance="40px" bottom>
|
||||
<h2>
|
||||
Sia
|
||||
<br />
|
||||
|
|
@ -49,16 +49,25 @@ export default class HomeNetwork extends Component {
|
|||
</Fade>
|
||||
</header>
|
||||
|
||||
<Fade distance="40px" bottom>
|
||||
<VisibilitySensor onChange={this.onChange} partialVisibility offset={{ bottom: 100 }} scrollThrottle={50}>
|
||||
<Fade duration={700} distance="40px" bottom>
|
||||
<VisibilitySensor
|
||||
onChange={this.onChange}
|
||||
partialVisibility
|
||||
offset={{ bottom: 100 }}
|
||||
scrollThrottle={50}
|
||||
>
|
||||
<div className="home-network-stats">
|
||||
{stats.map((stat, i) => (
|
||||
<React.Fragment key={i}>
|
||||
<div key={i} className="home-network-stat">
|
||||
<div className="inner">
|
||||
<h3>
|
||||
{this.state.visable ? <CountUp end={stat.value} duration={3.2} /> : 0}
|
||||
{stat.cent && '¢'}
|
||||
{this.state.visable ? (
|
||||
<CountUp end={stat.value} duration={3.2} />
|
||||
) : (
|
||||
0
|
||||
)}
|
||||
{stat.cent && "¢"}
|
||||
</h3>
|
||||
<span className="network-stat-name">{stat.name}</span>
|
||||
</div>
|
||||
|
|
@ -75,25 +84,31 @@ export default class HomeNetwork extends Component {
|
|||
|
||||
<div className="home-network-columns">
|
||||
<div className="home-network-column left">
|
||||
<Fade distance="40px" bottom>
|
||||
<Fade duration={700} distance="40px" bottom>
|
||||
<p>
|
||||
Skynet Webportal is a low cost server that sits between Skynet and everyday users, enabling them to
|
||||
access Skynet content without needing to operate any special software. Once the Skylinks are generated,
|
||||
they can be shared with anyone to fetch data from Skynet. The original uploader does not need to stay
|
||||
online in order for the file to remain available. The Sia network handles all of the pinning,
|
||||
guaranteeing both high speeds and excellent uptime. A typical Skynet download starts in under 500
|
||||
milliseconds and can stream at rates as high as 1 gigabit per second. The Sia network serves as the
|
||||
backend storage layer for Skynet.
|
||||
Skynet Webportal is a low cost server that sits between Skynet
|
||||
and everyday users, enabling them to access Skynet content
|
||||
without needing to operate any special software. Once the
|
||||
Skylinks are generated, they can be shared with anyone to fetch
|
||||
data from Skynet. The original uploader does not need to stay
|
||||
online in order for the file to remain available. The Sia
|
||||
network handles all of the pinning, guaranteeing both high
|
||||
speeds and excellent uptime. A typical Skynet download starts in
|
||||
under 500 milliseconds and can stream at rates as high as 1
|
||||
gigabit per second. The Sia network serves as the backend
|
||||
storage layer for Skynet.
|
||||
</p>
|
||||
</Fade>
|
||||
|
||||
<Fade distance="40px" bottom>
|
||||
<Fade duration={700} distance="40px" bottom>
|
||||
<p>
|
||||
Sia is the leading decentralized cloud storage platform. No signups, no servers, no trusted third
|
||||
parties. Sia leverages blockchain technology to create a data storage marketplace that is more robust
|
||||
and more affordable than traditional cloud storage providers. Storage costs are as much as 10x lower
|
||||
than traditional infrastructure, bandwidth costs as much as 100x lower, all without sacrificing
|
||||
performance or reliability.
|
||||
Sia is the leading decentralized cloud storage platform. No
|
||||
signups, no servers, no trusted third parties. Sia leverages
|
||||
blockchain technology to create a data storage marketplace that
|
||||
is more robust and more affordable than traditional cloud
|
||||
storage providers. Storage costs are as much as 10x lower than
|
||||
traditional infrastructure, bandwidth costs as much as 100x
|
||||
lower, all without sacrificing performance or reliability.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
|
|
@ -104,41 +119,45 @@ export default class HomeNetwork extends Component {
|
|||
</Fade>
|
||||
</div>
|
||||
<div className="home-network-column">
|
||||
<Fade distance="40px" bottom>
|
||||
<Fade duration={700} distance="40px" bottom>
|
||||
<FAQ title="What does pinning mean?">
|
||||
<p>
|
||||
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
|
||||
took a galley of type and scrambled it to make.
|
||||
Lorem Ipsum has been the industry's standard dummy text ever
|
||||
since the 1500s, when an unknown printer took a galley of type
|
||||
and scrambled it to make.
|
||||
</p>
|
||||
</FAQ>
|
||||
</Fade>
|
||||
|
||||
<Fade distance="40px" bottom>
|
||||
<Fade duration={700} distance="40px" bottom>
|
||||
<FAQ title="Is my data secure?">
|
||||
<p>
|
||||
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis.
|
||||
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
|
||||
Sed posuere consectetur est at lobortis.
|
||||
</p>
|
||||
</FAQ>
|
||||
</Fade>
|
||||
|
||||
<Fade distance="40px" bottom>
|
||||
<Fade duration={700} distance="40px" bottom>
|
||||
<FAQ title="How does Sia compare to other decentralized storage solutions?">
|
||||
<p>
|
||||
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis.
|
||||
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
|
||||
Sed posuere consectetur est at lobortis.
|
||||
</p>
|
||||
</FAQ>
|
||||
</Fade>
|
||||
|
||||
<Fade distance="40px" bottom>
|
||||
<Fade duration={700} distance="40px" bottom>
|
||||
<FAQ title="How long will my files be available?">
|
||||
<p>
|
||||
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
|
||||
took a galley of type and scrambled it to make a type specimen book.
|
||||
Lorem Ipsum has been the industry's standard dummy text ever
|
||||
since the 1500s, when an unknown printer took a galley of type
|
||||
and scrambled it to make a type specimen book.
|
||||
</p>
|
||||
</FAQ>
|
||||
</Fade>
|
||||
|
||||
<Fade distance="40px" bottom>
|
||||
<Fade duration={700} distance="40px" bottom>
|
||||
<a className="more more-faq" href="https://support.sia.tech/">
|
||||
View more faq
|
||||
<Arrow />
|
||||
|
|
@ -147,6 +166,6 @@ export default class HomeNetwork extends Component {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,37 +1,42 @@
|
|||
import React from 'react'
|
||||
import Fade from 'react-reveal/Fade'
|
||||
import Reveal from 'react-reveal/Reveal'
|
||||
import React from "react";
|
||||
import Fade from "react-reveal/Fade";
|
||||
import Reveal from "react-reveal/Reveal";
|
||||
|
||||
import './HomeSamples.scss'
|
||||
import { Sample } from '../'
|
||||
import "./HomeSamples.scss";
|
||||
import { Sample } from "../";
|
||||
|
||||
const samples = [
|
||||
{ type: 'HTML', url: '#' },
|
||||
{ type: 'PDF', url: '#' },
|
||||
{ type: 'Image', url: '#' },
|
||||
{ type: 'Audio', url: '#' },
|
||||
{ type: 'Video', url: '#' },
|
||||
{ type: 'JSON', url: '#' },
|
||||
{ type: 'Dapps', url: '#' },
|
||||
]
|
||||
{ type: "HTML", url: "#" },
|
||||
{ type: "PDF", url: "#" },
|
||||
{ type: "Image", url: "#" },
|
||||
{ type: "Audio", url: "#" },
|
||||
{ type: "Video", url: "#" },
|
||||
{ type: "JSON", url: "#" },
|
||||
{ type: "Dapps", url: "#" }
|
||||
];
|
||||
|
||||
export default function HomeSamples() {
|
||||
return (
|
||||
<div className="home-samples">
|
||||
<Fade distance="40px" bottom>
|
||||
<Fade duration={700} distance="40px" bottom>
|
||||
<p>
|
||||
Skynet has SDKs for popular programming languages which integrate seamlessly with existing applications. Above
|
||||
are a few code snippets for uploading and downloading data from Skynet.
|
||||
Skynet has SDKs for popular programming languages which integrate
|
||||
seamlessly with existing applications. Above are a few code snippets
|
||||
for uploading and downloading data from Skynet.
|
||||
</p>
|
||||
</Fade>
|
||||
|
||||
<Reveal effect="active">
|
||||
<div className="home-samples-samples">
|
||||
{samples.map((sample, i) => (
|
||||
<Sample className={`fadeInUp delay${(i + 1) * 2}`} key={`${i}-${sample.url}`} {...sample} />
|
||||
<Sample
|
||||
className={`fadeInUp delay${i + 1}`}
|
||||
key={`${i}-${sample.url}`}
|
||||
{...sample}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
import React, { Component } from 'react'
|
||||
import Fade from 'react-reveal/Fade'
|
||||
import React, { Component } from "react";
|
||||
import Fade from "react-reveal/Fade";
|
||||
|
||||
import './HomeStay.scss'
|
||||
import { SocialLink, CircleIcon, Mailing } from '../'
|
||||
import { SmallOrb, Pyramid } from '../../svg'
|
||||
import "./HomeStay.scss";
|
||||
import { SocialLink, CircleIcon, Mailing } from "../";
|
||||
import { SmallOrb, Pyramid } from "../../svg";
|
||||
|
||||
export default class HomeStay extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="home-stay">
|
||||
<header className="home-stay-header">
|
||||
<Fade distance="40px" bottom>
|
||||
<Fade duration={700} distance="40px" bottom>
|
||||
<div className="home-stay-divider">
|
||||
<CircleIcon>
|
||||
<Pyramid />
|
||||
|
|
@ -20,7 +20,7 @@ export default class HomeStay extends Component {
|
|||
<div className="small-divider" />
|
||||
</div>
|
||||
</Fade>
|
||||
<Fade distance="40px" bottom>
|
||||
<Fade duration={700} distance="40px" bottom>
|
||||
<h2>
|
||||
Stay up to date with
|
||||
<br />
|
||||
|
|
@ -31,27 +31,27 @@ export default class HomeStay extends Component {
|
|||
|
||||
<div className="home-stay-flex">
|
||||
<div className="home-stay-left">
|
||||
<Fade distance="40px" bottom>
|
||||
<Fade duration={700} distance="40px" bottom>
|
||||
<p>
|
||||
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac
|
||||
facilisis in.
|
||||
Integer posuere erat a ante venenatis dapibus posuere velit
|
||||
aliquet. Cras justo odio, dapibus ac facilisis in.
|
||||
</p>
|
||||
</Fade>
|
||||
|
||||
<Fade distance="40px" bottom>
|
||||
<Fade duration={700} distance="40px" bottom>
|
||||
<Mailing id="check1" />
|
||||
</Fade>
|
||||
|
||||
<Fade distance="40px" bottom>
|
||||
<Fade duration={700} distance="40px" bottom>
|
||||
<p className="disclaimer-text">
|
||||
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac
|
||||
facilisis in.
|
||||
Integer posuere erat a ante venenatis dapibus posuere velit
|
||||
aliquet. Cras justo odio, dapibus ac facilisis in.
|
||||
</p>
|
||||
</Fade>
|
||||
</div>
|
||||
|
||||
<ul className="home-stay-right">
|
||||
<Fade distance="40px" bottom>
|
||||
<Fade duration={700} distance="40px" bottom>
|
||||
<li>
|
||||
<SocialLink
|
||||
icon="github"
|
||||
|
|
@ -65,7 +65,7 @@ export default class HomeStay extends Component {
|
|||
/>
|
||||
</li>
|
||||
</Fade>
|
||||
<Fade distance="40px" bottom>
|
||||
<Fade duration={700} distance="40px" bottom>
|
||||
<li>
|
||||
<SocialLink
|
||||
icon="discord"
|
||||
|
|
@ -75,7 +75,7 @@ export default class HomeStay extends Component {
|
|||
/>
|
||||
</li>
|
||||
</Fade>
|
||||
<Fade distance="40px" bottom>
|
||||
<Fade duration={700} distance="40px" bottom>
|
||||
<li>
|
||||
<SocialLink
|
||||
icon="twitter"
|
||||
|
|
@ -88,6 +88,6 @@ export default class HomeStay extends Component {
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import React from 'react'
|
||||
import Reveal from 'react-reveal/Reveal'
|
||||
import React from "react";
|
||||
import Reveal from "react-reveal/Reveal";
|
||||
|
||||
import './HomeTop.scss'
|
||||
import { Skynet, Deco1, Deco2 } from '../../svg'
|
||||
import "./HomeTop.scss";
|
||||
import { Skynet, Deco1, Deco2 } from "../../svg";
|
||||
|
||||
export default function HomeTop() {
|
||||
return (
|
||||
|
|
@ -12,11 +12,14 @@ export default function HomeTop() {
|
|||
|
||||
<h1 className="fadeInUp delay2">Build the Future Web.</h1>
|
||||
|
||||
<p className="fadeInUp delay4">Skynet is a decentralized file sharing and content distribution protocol.</p>
|
||||
<p className="fadeInUp delay3">
|
||||
Skynet is a decentralized file sharing and content distribution
|
||||
protocol.
|
||||
</p>
|
||||
|
||||
<Deco1 className="deco-1 fadeInUp delay8" />
|
||||
<Deco2 className="deco-2 fadeInUp delay8" />
|
||||
<Deco1 className="deco-1 fadeInUp delay6" />
|
||||
<Deco2 className="deco-2 fadeInUp delay6" />
|
||||
</div>
|
||||
</Reveal>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import '../../variables.scss';
|
||||
@import "../../variables.scss";
|
||||
|
||||
.home-top {
|
||||
text-align: center;
|
||||
|
|
@ -47,8 +47,8 @@
|
|||
.deco-1 {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
bottom: 54%;
|
||||
margin-left: -20px;
|
||||
bottom: 25%;
|
||||
margin-left: 20px;
|
||||
animation: 6s float infinite;
|
||||
|
||||
@media (min-width: 591px) {
|
||||
|
|
@ -59,8 +59,8 @@
|
|||
.deco-2 {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
bottom: 34%;
|
||||
margin-left: -40px;
|
||||
bottom: 5%;
|
||||
margin-left: -15px;
|
||||
animation: 8s float infinite;
|
||||
|
||||
@media (min-width: 591px) {
|
||||
|
|
|
|||
|
|
@ -1,43 +1,47 @@
|
|||
import React, { Component } from 'react'
|
||||
import classNames from 'classnames'
|
||||
import Dropzone from 'react-dropzone'
|
||||
import Reveal from 'react-reveal/Reveal'
|
||||
import React, { Component } from "react";
|
||||
import classNames from "classnames";
|
||||
import Dropzone from "react-dropzone";
|
||||
import Reveal from "react-reveal/Reveal";
|
||||
|
||||
import { Button, UploadFile } from '../'
|
||||
import { Deco3, Deco4, Deco5 } from '../../svg'
|
||||
import './HomeUpload.scss'
|
||||
import { Button, UploadFile } from "../";
|
||||
import { Deco3, Deco4, Deco5 } from "../../svg";
|
||||
import "./HomeUpload.scss";
|
||||
|
||||
export default class HomeUpload extends Component {
|
||||
state = { files: [] }
|
||||
state = { files: [] };
|
||||
|
||||
handleDrop = async acceptedFiles => {
|
||||
this.setState({
|
||||
files: [
|
||||
...acceptedFiles.map(file => {
|
||||
return { file, status: 'uploading' }
|
||||
return { file, status: "uploading" };
|
||||
}),
|
||||
...this.state.files,
|
||||
],
|
||||
})
|
||||
...this.state.files
|
||||
]
|
||||
});
|
||||
|
||||
acceptedFiles.forEach(async (file) => {
|
||||
const url = `https://siasky.net/api/skyfile?filename=${file.name}`
|
||||
const fd = new FormData()
|
||||
fd.append("file", file)
|
||||
acceptedFiles.forEach(async file => {
|
||||
const url = `https://siasky.net/api/skyfile?filename=${file.name}`;
|
||||
const fd = new FormData();
|
||||
fd.append("file", file);
|
||||
|
||||
const onComplete = (status, skylink) => {
|
||||
this.setState((state) => {
|
||||
const index = state.files.findIndex((f) => f.file === file);
|
||||
this.setState(state => {
|
||||
const index = state.files.findIndex(f => f.file === file);
|
||||
|
||||
return {
|
||||
files: [
|
||||
files: [
|
||||
...state.files.slice(0, index),
|
||||
{ ...state.files[index], status, url: `https://siasky.net/${skylink}` },
|
||||
{
|
||||
...state.files[index],
|
||||
status,
|
||||
url: `https://siasky.net/${skylink}`
|
||||
},
|
||||
...state.files.slice(index + 1)
|
||||
]
|
||||
}
|
||||
})
|
||||
}
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
|
|
@ -47,26 +51,30 @@ export default class HomeUpload extends Component {
|
|||
});
|
||||
const { skylink } = await response.json();
|
||||
|
||||
onComplete('complete', skylink);
|
||||
} catch(error) {
|
||||
onComplete('error');
|
||||
onComplete("complete", skylink);
|
||||
} catch (error) {
|
||||
onComplete("error");
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Reveal effect="active">
|
||||
<div className="home-upload">
|
||||
<div className="home-upload-box fadeInUp delay6">
|
||||
<div className="home-upload-box fadeInUp delay4">
|
||||
<Dropzone onDrop={acceptedFiles => this.handleDrop(acceptedFiles)}>
|
||||
{({ getRootProps, getInputProps, isDragActive }) => (
|
||||
<>
|
||||
<div
|
||||
className={classNames('home-upload-dashed', { 'drop-active': isDragActive })}
|
||||
className={classNames("home-upload-dashed", {
|
||||
"drop-active": isDragActive
|
||||
})}
|
||||
{...getRootProps()}
|
||||
>
|
||||
<span className="home-upload-text">Drag & drop your file(s) here to pin</span>
|
||||
<span className="home-upload-text">
|
||||
Drag & drop your file(s) here to pin
|
||||
</span>
|
||||
<Button>Browse</Button>
|
||||
</div>
|
||||
<input {...getInputProps()} className="offscreen" />
|
||||
|
|
@ -77,22 +85,23 @@ export default class HomeUpload extends Component {
|
|||
{this.state.files.length > 0 && (
|
||||
<div className="home-uploaded-files">
|
||||
{this.state.files.map((file, i) => {
|
||||
return <UploadFile key={i} {...file} />
|
||||
return <UploadFile key={i} {...file} />;
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="bottom-text fadeInUp delay8">
|
||||
Once a file has been uploaded, a 46 byte link called a 'Skylink' is generated. That link can then be shared
|
||||
with anyone to fetch the file from Skynet.
|
||||
<p className="bottom-text fadeInUp delay5">
|
||||
Once a file has been uploaded, a 46 byte link called a 'Skylink' is
|
||||
generated. That link can then be shared with anyone to fetch the
|
||||
file from Skynet.
|
||||
</p>
|
||||
|
||||
<Deco3 className="deco-3 fadeInUp delay8" />
|
||||
<Deco4 className="deco-4 fadeInUp delay8" />
|
||||
<Deco5 className="deco-5 fadeInUp delay8" />
|
||||
<Deco3 className="deco-3 fadeInUp delay6" />
|
||||
<Deco4 className="deco-4 fadeInUp delay6" />
|
||||
<Deco5 className="deco-5 fadeInUp delay6" />
|
||||
</div>
|
||||
</Reveal>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import '../../variables.scss';
|
||||
@import "../../variables.scss";
|
||||
|
||||
.home-upload {
|
||||
position: relative;
|
||||
|
|
@ -19,7 +19,8 @@
|
|||
.home-upload-box {
|
||||
background: $white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 24px 0 rgba(90, 94, 91, 0.15), 0 2px 4px 0 rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0 8px 24px 0 rgba(90, 94, 91, 0.15),
|
||||
0 2px 4px 0 rgba(0, 0, 0, 0.05);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
|
|
@ -97,10 +98,14 @@
|
|||
|
||||
.home-uploaded-files {
|
||||
border: solid 1px #c5cec7;
|
||||
padding: 0 40px;
|
||||
padding: 0 20px;
|
||||
margin-top: 10px;
|
||||
border-radius: 4px;
|
||||
|
||||
@media (min-width: $largebp) {
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
.upload-file + .upload-file {
|
||||
border-top: 1px solid rgba(197, 206, 199, 0.4);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,73 +1,78 @@
|
|||
import React, { Component } from 'react'
|
||||
import React, { Component } from "react";
|
||||
|
||||
import './UploadFile.scss'
|
||||
import { LoadingSpinner } from '../'
|
||||
import { File, FileCheck, FileError, Copy } from '../../svg'
|
||||
import "./UploadFile.scss";
|
||||
import { LoadingSpinner } from "../";
|
||||
import { File, FileCheck, FileError, Copy } from "../../svg";
|
||||
|
||||
export default class UploadFile extends Component {
|
||||
state = {
|
||||
copied: false,
|
||||
}
|
||||
copied: false
|
||||
};
|
||||
|
||||
getIcon = () => {
|
||||
const { status } = this.props
|
||||
const { status } = this.props;
|
||||
|
||||
if (status === 'uploading' || status === 'processing') {
|
||||
return <File />
|
||||
} else if (status === 'error') {
|
||||
return <FileError />
|
||||
if (status === "uploading" || status === "processing") {
|
||||
return <File />;
|
||||
} else if (status === "error") {
|
||||
return <FileError />;
|
||||
} else {
|
||||
return <FileCheck />
|
||||
return <FileCheck />;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
copyToClipboard = e => {
|
||||
this.urlRef.current.select()
|
||||
document.execCommand('copy')
|
||||
e.target.focus()
|
||||
this.urlRef.current.select();
|
||||
document.execCommand("copy");
|
||||
e.target.focus();
|
||||
|
||||
this.setState({ copied: true }, () => {
|
||||
setTimeout(() => {
|
||||
this.setState({ copied: false })
|
||||
}, 1500)
|
||||
})
|
||||
}
|
||||
this.setState({ copied: false });
|
||||
}, 1500);
|
||||
});
|
||||
};
|
||||
|
||||
urlRef = React.createRef()
|
||||
urlRef = React.createRef();
|
||||
|
||||
render() {
|
||||
const { file, url, status } = this.props
|
||||
const copyText = this.state.copied ? 'Copied!' : 'Copy to clipboard'
|
||||
const { file, url, status } = this.props;
|
||||
const copyText = this.state.copied ? "Copied!" : "Copy to clipboard";
|
||||
return (
|
||||
<div className="upload-file">
|
||||
<div className="upload-file-icon">{this.getIcon()}</div>
|
||||
<div className="upload-file-text">
|
||||
<h3>{file.name}</h3>
|
||||
<p>
|
||||
{status === 'uploading' && 'Uploading...'}
|
||||
{status === 'processing' && 'Processing...'}
|
||||
{status === 'error' && <span className="red-text">Error processing file.</span>}
|
||||
{status === 'complete' && (
|
||||
{status === "uploading" && "Uploading..."}
|
||||
{status === "processing" && "Processing..."}
|
||||
{status === "error" && (
|
||||
<span className="red-text">Error processing file.</span>
|
||||
)}
|
||||
{status === "complete" && (
|
||||
<a href={url} className="url green-text">
|
||||
{url}
|
||||
</a>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
{(status === 'uploading' || status === 'processing') && (
|
||||
{(status === "uploading" || status === "processing") && (
|
||||
<div className="upload-file-loading">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{status === 'complete' && (
|
||||
{status === "complete" && (
|
||||
<button onClick={this.copyToClipboard} className="upload-file-copy">
|
||||
<p className="upload-file-copy-tooltip">{copyText}</p>
|
||||
<Copy />
|
||||
<div className="upload-file-copy-button">
|
||||
Copy Link
|
||||
<Copy />
|
||||
</div>
|
||||
<textarea value={url} ref={this.urlRef} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import '../../variables.scss';
|
||||
@import "../../variables.scss";
|
||||
|
||||
.upload-file {
|
||||
display: flex;
|
||||
|
|
@ -97,8 +97,36 @@
|
|||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
box-shadow: 0 2px 8px 0 rgba(23, 25, 23, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.upload-file-copy-button {
|
||||
border: 1px solid $green;
|
||||
border-radius: 3px;
|
||||
color: $green;
|
||||
line-height: 40px;
|
||||
font-size: 13px;
|
||||
padding: 0 10px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-weight: 700;
|
||||
transition: 0.2s color, 0.2s background-color;
|
||||
|
||||
@media (min-width: $largebp) {
|
||||
font-size: 14px;
|
||||
padding: 0 15px;
|
||||
line-height: 46px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $green;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,41 +1,41 @@
|
|||
@import './variables.scss';
|
||||
@import "./variables.scss";
|
||||
|
||||
@font-face {
|
||||
font-family: 'Haas Grot Disp';
|
||||
src: url('/fonts/hinted-subset-HaasGrotDispR-55Roman.woff2') format('woff2'),
|
||||
url('/fonts/hinted-subset-HaasGrotDispR-55Roman.woff') format('woff');
|
||||
font-family: "Haas Grot Disp";
|
||||
src: url("/fonts/hinted-subset-HaasGrotDispR-55Roman.woff2") format("woff2"),
|
||||
url("/fonts/hinted-subset-HaasGrotDispR-55Roman.woff") format("woff");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Haas Grot Disp';
|
||||
src: url('/fonts/hinted-subset-HaasGrotDispR-65Medium.woff2') format('woff2'),
|
||||
url('/fonts/hinted-subset-HaasGrotDispR-65Medium.woff') format('woff');
|
||||
font-family: "Haas Grot Disp";
|
||||
src: url("/fonts/hinted-subset-HaasGrotDispR-65Medium.woff2") format("woff2"),
|
||||
url("/fonts/hinted-subset-HaasGrotDispR-65Medium.woff") format("woff");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Haas Grot Text';
|
||||
src: url('/fonts/hinted-subset-HaasGrotTextR-75Bold.woff2') format('woff2'),
|
||||
url('/fonts/hinted-subset-HaasGrotTextR-75Bold.woff') format('woff');
|
||||
font-family: "Haas Grot Text";
|
||||
src: url("/fonts/hinted-subset-HaasGrotTextR-75Bold.woff2") format("woff2"),
|
||||
url("/fonts/hinted-subset-HaasGrotTextR-75Bold.woff") format("woff");
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Haas Grot Text';
|
||||
src: url('/fonts/hinted-subset-HaasGrotTextR-65Medium.woff2') format('woff2'),
|
||||
url('/fonts/hinted-subset-HaasGrotTextR-65Medium.woff') format('woff');
|
||||
font-family: "Haas Grot Text";
|
||||
src: url("/fonts/hinted-subset-HaasGrotTextR-65Medium.woff2") format("woff2"),
|
||||
url("/fonts/hinted-subset-HaasGrotTextR-65Medium.woff") format("woff");
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Haas Grot Text';
|
||||
src: url('/fonts/hinted-subset-HaasGrotTextR-55Roman.woff2') format('woff2'),
|
||||
url('/fonts/hinted-subset-HaasGrotTextR-55Roman.woff') format('woff');
|
||||
font-family: "Haas Grot Text";
|
||||
src: url("/fonts/hinted-subset-HaasGrotTextR-55Roman.woff2") format("woff2"),
|
||||
url("/fonts/hinted-subset-HaasGrotTextR-55Roman.woff") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -88,10 +88,10 @@ textarea {
|
|||
font-size: 16px;
|
||||
}
|
||||
|
||||
input[type='email'],
|
||||
input[type='text'],
|
||||
input[type='password'],
|
||||
input[type='search'] {
|
||||
input[type="email"],
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="search"] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -99,9 +99,9 @@ input[type='search'] {
|
|||
a,
|
||||
button,
|
||||
label,
|
||||
input[type='submit'],
|
||||
input[type='checkbox'],
|
||||
input[type='radio'] {
|
||||
input[type="submit"],
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -181,7 +181,7 @@ svg {
|
|||
.fadeInUp {
|
||||
transform: translateY(40px);
|
||||
opacity: 0;
|
||||
transition: 1s opacity, 1s transform;
|
||||
transition: 0.7s opacity, 0.7s transform;
|
||||
|
||||
.active & {
|
||||
opacity: 1;
|
||||
|
|
|
|||
|
|
@ -1,17 +1,16 @@
|
|||
import React from 'react'
|
||||
import React from "react";
|
||||
|
||||
export default function Copy(props) {
|
||||
return (
|
||||
<svg width={18} height={18} viewBox="0 0 18 18" {...props}>
|
||||
<svg width={12} height={14} viewBox="0 0 12 14" {...props}>
|
||||
<path
|
||||
d="M15 13v2a2 2 0 01-2 2H3a2 2 0 01-2-2V5a2 2 0 012-2h2m2.464 3.293L6.05 7.707a3 3 0 104.243 4.243l1.414-1.414h0m-1.414-7.072l1.414-1.414a3 3 0 114.243 4.243l-1.414 1.414h0M8.879 9.121L13.12 4.88"
|
||||
d="M8 1H4a3 3 0 00-3 3v6h0m4-6h5a1 1 0 011 1v7a1 1 0 01-1 1H5a1 1 0 01-1-1V5a1 1 0 011-1z"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
fillRule="evenodd"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Reference in New Issue