Importing Libraries and js-sdk functions

import React, { useState } from "react";
import Head from "next/head";

import {
  init,
  setWallet,
  Greeter,
  listAllocations,
  createAllocation,
  getAllocation,
  getBalance,
  getBalanceWasm,
  bulkUpload,
  download,
  getFaucetToken,
  sendTransaction,
  listObjects,
  share,
  showLogs,
  hideLogs,
  deleteObject,
  renameObject,
  copyObject,
  moveObject,
  reloadAllocation,
  freezeAllocation,
  cancelAllocation,
  updateAllocation,
  createDir,
  getFileStats,
  downloadBlocks,
  getUSDRate,
  isWalletID,
  getPublicEncryptionKey,
  getLookupHash,
  createAllocationWithBlobbers,
  getAllocationBlobbers,
  getBlobberIds,
  createReadPool,
  createWallet,
  recoverWallet,
  getAllocationFromAuthTicket,
  getReadPoolInfo,
  lockWritePool,
  getBlobbers,
  decodeAuthTicket,
  initBridge,
  burnZCN,
  mintZCN,
  getMintWZCNPayload,
} from "@zerochain/zus-sdk";

import { startPlay, stopPlay } from "./player";

import styles from "../styles/Home.module.css";

Describing Code :

• Line 1 import React useState is a Hook that lets you add React state to function components. A Hook is a special function that lets you “hook into” React features.

• Line 2 import Head from "next/head" expose a built-in component for appending elements to the head of the page.

• Line 4 to 51 import all the functionalities from js-sdk to use in the sample web site .Check SDK Reference here.

• Line 53 import variables to capture the current playing audio or video.

• Line 55 import link CSS (stylesheetfiles) file in the HTML <head