Test

import React, { useState } from 'react'
import { Web3Storage } from 'web3.storage'

function Storage() {
  const [image, setImage] = useState()
  const client = new Web3Storage({
    token: process.env.NEXT_PUBLIC_API_TOKEN,
  })
  const obj = { hello: 'world' }

  async function storeFiles() {
    const files = [new File(v, 'Test image')]
    console.log(files)
    try {
      const cid = await client.put(files)
      console.log('stored files with cid:', cid)
      return cid
    } catch (err) {
      console.log(err)
    }
  }

  async function retrieve() {
    const res = await client.get(
      'bafybeic4rawbxffcelx6ryeskeinhhafypzvppg6bzhu5mt2zgj5o626lu'
    )
    console.log(`Got a response! [${res.status}] ${res.statusText}`)
    if (!res.ok) {
      throw new Error(
        `failed to get ${'bafybeic4rawbxffcelx6ryeskeinhhafypzvppg6bzhu5mt2zgj5o626lu'}`
      )
    } // unpack File objects from the response
    const files = await res.files()
    for (const file of files) {
      console.log(
        `${file.cid} -- ${file.name} -- ${file.lastModified} -- ${file.size}`
      )
    }
  }

  // async function checkStatus() {
  //   const status = await client.status(
  //     'bafybeihtfx2jznesd5iifu32y2igy77wrsr4szey3ou7csggghiv2f675m'
  //   )
  //   console.log(status)
  //   if (status) {
  //     // your code to do something fun with the status info here
  //   }
  // }

  // // replace with your own CID to see info about your uploads!
  // checkStatus('bafybeihtfx2jznesd5iifu32y2igy77wrsr4szey3ou7csggghiv2f675m')
  return (
    <div className="space-x-4 flex">
      <button
        onClick={storeFiles}
        className="flex w-60 rounded-2xl px-2 py-1 font-mono font-bold text-gray-400 text-xl bg-white/5"
      >
        <a className="flex justify-center rounded-2xl hover:border border-stone-500 w-full">
          StoreFiles{' '}
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            strokeWidth={1.5}
            stroke="currentColor"
            className="h-6 w-6 ml-2 text-green-500"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z"
            />
          </svg>
        </a>{' '}
      </button>
      <button
        onClick={retrieve}
        className="flex w-60 rounded-2xl px-2 py-1 font-mono font-bold text-gray-400 text-xl bg-white/5"
      >
        <a className="flex justify-center rounded-2xl hover:border border-stone-500 w-full">
          Retrieve{' '}
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            strokeWidth={1.5}
            stroke="currentColor"
            className="h-6 w-6 ml-2 text-green-500"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z"
            />
          </svg>
        </a>{' '}
      </button>
      <input
        multiple
        type="file"
        onChange={(e) => {
          setV(e.target.files)
        }}
        files={image}
      />
      <img src="phantom.png" className="h-8 w-8" />
    </div>
  )
}

export default Storage