diff --git a/src/components/Add.module.css b/src/components/Add.module.css index ec84bc1..fae47cb 100644 --- a/src/components/Add.module.css +++ b/src/components/Add.module.css @@ -4,3 +4,23 @@ word-wrap: break-word; word-break: break-all; } + +.files { + text-align: left; +} + +.title { + margin-bottom: calc(var(--spacer) / 4); + font-size: var(--font-size-base); +} + +.link { + color: var(--color-text); + font-size: var(--font-size-small); + margin-bottom: calc(var(--spacer) / 4); + display: inline-block; +} + +.link:hover { + color: var(--brand-cyan); +} diff --git a/src/components/Add.tsx b/src/components/Add.tsx index 3facbae..23c1bb0 100644 --- a/src/components/Add.tsx +++ b/src/components/Add.tsx @@ -1,10 +1,61 @@ import React, { useState, ReactElement } from 'react' import { ipfsGateway } from '../../site.config' -import Dropzone, { FileDropzone } from './Dropzone' +import Dropzone from './Dropzone' import styles from './Add.module.css' import Loader from './Loader' import useIpfsApi from '../hooks/use-ipfs-api' import { FileIpfs } from '../@types/ipfs' +import { FileWithPath } from 'react-dropzone' + +function FileLink({ + file, + cidFolder, + cid +}: { + file: FileIpfs + cidFolder: string + cid?: string +}) { + const title = cid ? `ipfs://${cid}` : `ipfs://${cidFolder}/${file.path}` + const href = cid + ? `${ipfsGateway}/ipfs/${cid}` + : `${ipfsGateway}/ipfs/${cidFolder}/${file.path}` + + return cidFolder !== cid ? ( + + {title} + + ) : null +} + +function Files({ files }: { files: FileIpfs[] }) { + const cidFolder = files.filter((file) => file.path === '')[0].cid.toString() + + return ( + + ) +} export default function Add(): ReactElement { const { ipfs, isIpfsReady, ipfsError, addFiles } = useIpfsApi() @@ -13,7 +64,7 @@ export default function Add(): ReactElement { const [message] = useState() const [error, setError] = useState() - async function handleOnDrop(acceptedFiles: FileDropzone[]): Promise { + async function handleOnDrop(acceptedFiles: FileWithPath[]): Promise { if (!acceptedFiles || !ipfs || !isIpfsReady) return setLoading(true) @@ -21,7 +72,6 @@ export default function Add(): ReactElement { try { const addedFiles = await addFiles(acceptedFiles) - if (!addedFiles) return setFiles(addedFiles) setLoading(false) } catch (error) { @@ -35,19 +85,7 @@ export default function Add(): ReactElement { {loading ? ( ) : files?.length ? ( - + ) : ( Promise + addFiles: (files: FileWithPath[]) => Promise } const { hostname, port, protocol } = new URL(ipfsNodeUri) @@ -30,11 +30,11 @@ export default function useIpfsApi(): IpfsApiValue { const [ipfsError, setIpfsError] = useState() const addFiles = useCallback( - async (files: FileDropzone[]): Promise => { + async (files: FileWithPath[]): Promise => { if (!ipfs || !files?.length) return const ipfsFiles = [ - ...files.map((file: FileDropzone) => { + ...files.map((file: FileWithPath) => { return { path: file.path, content: file } }) ] diff --git a/src/styles/_variables.css b/src/styles/_variables.css index 5aea0a4..65e6f42 100644 --- a/src/styles/_variables.css +++ b/src/styles/_variables.css @@ -29,7 +29,7 @@ --font-weight-base: 400; --font-weight-bold: 700; - --line-height: 1.6; + --line-height: 1.4; --font-weight-headings: 500; --line-height-headings: 1.1;