tesseract/packages/web-kitchensink-reactnext/src/pages/categories/blob/index.tsx

import {NextPage} from 'next';
import * as React from 'react';
import * as BlobReact from '@tesseract-design/web-blob-react';
import {DefaultLayout} from '@/components/DefaultLayout';
import {Section, Subsection} from '@/components/Section';
import {addDataUrl} from '@/utils/blob';

const BlobPage: NextPage = () => {
  const [imageFile, setImageFile] = React.useState<Partial<File>>();
  React.useEffect(() => {
    fetch('/image.png').then((response) => {
      response.blob().then(async (blob) => {
        const imageFile = new File([blob], 'image.png', {
          type: 'image/png',
        });
        const theFile = await addDataUrl(imageFile);
        setImageFile(theFile);
      });
    });
  }, []);

  const [videoFile, setVideoFile] = React.useState<File>();
  React.useEffect(() => {
    fetch('/video.mp4').then((response) => {
      response.blob().then((blob) => {
        setVideoFile(new File([blob], 'video.mp4', {
          type: 'video/mp4',
        }));
      });
    });
  }, []);

  const [audioFile, setAudioFile] = React.useState<File>();
  React.useEffect(() => {
    fetch('/audio.wav').then((response) => {
      response.blob().then((blob) => {
        setAudioFile(new File([blob], 'audio.wav', {
          type: 'audio/wav',
        }));
      });
    });
  }, []);

  const [binaryFile, setBinaryFile] = React.useState<File>();
  React.useEffect(() => {
    fetch('/binary.bin').then((response) => {
      response.blob().then((blob) => {
        setBinaryFile(new File([blob], 'binary.bin', {
          type: 'application/octet-stream',
        }));
      });
    });
  }, []);

  const [plaintextFile, setPlaintextFile] = React.useState<File>();
  React.useEffect(() => {
    fetch('/plaintext.txt').then((response) => {
      response.blob().then((blob) => {
        setPlaintextFile(new File([blob], 'plaintext.txt', {
          type: 'text/plain',
        }));
      });
    });
  }, []);

  const [codeFile, setCodeFile] = React.useState<File>();
  React.useEffect(() => {
    fetch('/code.py').then((response) => {
      response.blob().then((blob) => {
        setCodeFile(new File([blob], 'code.py', {
          type: 'text/x-python',
        }));
      });
    });
  }, []);

  return (
    <DefaultLayout title="Blob">
      <Section title="ImageFilePreview">
        <Subsection title="Single File">
          <BlobReact.ImageFilePreview
            enhanced
            file={
              imageFile
              ?? {
                name: 'image.png',
                type: 'image/png',
                url: '/image.png',
              } as Partial<File>
            }
            className="sm:h-64"
          />
        </Subsection>
      </Section>
      <Section title="VideoFilePreview">
        <Subsection title="Single File">
          <BlobReact.VideoFilePreview
            file={
              videoFile
              ?? {
                name: 'video.mp4',
                type: 'video/mp4',
                url: '/video.mp4',
              } as Partial<File>
            }
            className="sm:h-64"
            enhanced
          />
        </Subsection>
      </Section>
      <Section title="AudioFilePreview">
        <Subsection title="Single File">
          <BlobReact.AudioFilePreview
            file={
              audioFile
              ?? {
                name: 'audio.wav',
                type: 'audio/wav',
                url: '/audio.wav',
              } as Partial<File>
            }
            className="sm:h-64"
            enhanced
          />
        </Subsection>
      </Section>
      <Section title="BinaryFilePreview">
        <Subsection title="Single File">
          <BlobReact.BinaryFilePreview
            file={
              binaryFile
              ?? {
                name: 'binary.bin',
                type: 'application/octet-stream',
                url: '/binary.bin',
              } as Partial<File>
            }
            className="sm:h-64"
          />
        </Subsection>
      </Section>
      <Section title="TextFilePreview">
        <Subsection title="Single File (Plaintext)">
          <BlobReact.TextFilePreview
            file={
              plaintextFile
              ?? {
                name: 'plaintext.txt',
                type: 'text/plain',
                url: '/plaintext.txt',
              } as Partial<File>
            }
            className="sm:h-64"
          />
        </Subsection>
        <Subsection title="Single File (Code)">
          <BlobReact.TextFilePreview
            file={
              codeFile
              ?? {
                name: 'code.py',
                type: 'text/x-python',
                url: '/code.py',
              } as Partial<File>
            }
            className="sm:h-64"
          />
        </Subsection>
      </Section>
      <Section title="FileSelectBox">
        <Subsection title="Single File">
          <BlobReact.FileSelectBox
            border
            enhanced
            label="Primary Image"
            hint="Select any files here"
            block
            className="sm:h-96"
            onChange={(e) => console.log(e.currentTarget.files)}
          />
        </Subsection>
      </Section>
    </DefaultLayout>
  )
}

export default BlobPage;