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 (
+
+ {files?.map((file) => (
+ -
+
+ {file.path === '' ? 'Folder with all files' : file.path}
+
+
+
+
+
+
+ ))}
+
+ )
+}
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;