const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const selectedFile = e.target.files?.[0];
    if (!selectedFile) return;

    // https://developer.mozilla.org/en-US/docs/Web/API/FileReader
    // The FileReader API is used to read the contents of a Blob or File.
    // It makes it possible to read the contents of a file in JavaScript.
    const reader = new FileReader();

    // The onload event is fired when the file has been read successfully.
    // The event handler is passed the result of the file read as an argument.
    // The result is an ArrayBuffer which is a typed array of integers.
    reader.onload = (e) => {
      if (e.target?.result instanceof ArrayBuffer) {
        setFile(e.target.result);
      }
    };

    // The onerror event is fired when there is an error reading the file.
    // The event handler is passed the error as an argument.
    reader.onerror = (e) => {
      console.error("Error reading file:", e);
    };

    // The onabort event is fired when the file read has been aborted.
    // The event handler is passed no arguments.
    reader.onabort = () => {
      console.log("File reading aborted");
    };

    // Start the file read by calling the readAsArrayBuffer method.
    // This method takes a Blob or File as an argument.
    reader.readAsArrayBuffer(selectedFile);
  };

  return (
    <div className="flex h-full w-full flex-col items-center justify-center">
      <input
        onChange={handleFileChange}
        type="file"
        // limits files that will appear in the file explorer when picking to .dcx
        accept=".docx"
        // tailwind + daisyui classes for file inputs
        className="file-input w-full max-w-xs"
      />
</div>)

// parse the docx using mammoth and convert to json 
import { convertToHtml } from "mammoth";
// below library does not ship types 
//  learn about how to do typescipt module declarations for it
//  https://tigawanna-portfolio.vercel.app/lessons/zvkw94okeaegslk
import HtmlTableToJson from "html-table-to-json";



export async function handleConvert(file: ArrayBuffer | null) {
    if (file) {
      try {
        const options = { };
        const result = await convertToHtml({ arrayBuffer: file }, options);
        const tableAsJson = HtmlTableToJson.parse(result.value)

        return {html: result.value, tableJson: tableAsJson._results};
      } catch (error) {
        console.error('Error converting file:', error);
        return
      }
    } else {
      console.error("File not found");
      return
    }
  };

//custom.d.ts


declare module "html-table-to-json" {

  export default class HtmlTableToJson {

    constructor(html: string);

    static parse(html: string): {
        _results: Record<string, string>[];
        _headers: string[];
        _count: null;
        _firstRowUsedAsHeaders: boolean;
    };

    getResults(): any;

  }

}

• a short cut :keybindings.json

  {
    "key": "ctrl+o",
    "command": "editor.action.sourceAction",
    "args": {
      "kind": "source.addMissingImports",
      "apply": "first"
    }
  },

• automatically on save : settings.json

  "editor.codeActionsOnSave": { "source.addMissingImports": "always" },

      <div className="grid w-full items-center justify-center">
        <div className="col-start-1 row-start-1">
          <img
            height={200}
            width={200}
            src={"https://picsum.photos/id/62/200/200"}
            className="object-cover"
          />
        </div>
      <div className="col-start-1 row-start-1 text-center font-bold text-2xl">Text on image</div>
      </div>

const error = mutation?.error as ClientResponseError;
const pbError = error?.data?.data as Record<string, {message: string,code:string}>

useEffect(() => {
    pbError&&Object?.entries(pbError)?.forEach(([key, value]) => {
      form.setFieldMeta(key as any,(prev)=>{
        return {...prev, errorMap:{
          onChange:value?.message
        }}
      });
    });
}, [pbError]);

Copied from a tanstack form discussion 👇

import { create } from "zustand";

interface OneBear {
  age: number;
  type: "black" | "brown" | "black";
}
interface BearState {
  bears: OneBear[];
  // just takes in the new value
  setBear: (value: OneBear) => void;
  // takes in a function that will give you access to the previous state
  setBearFunctionally: (value: (prev: OneBear[]) => OneBear) => void;
  // takes in a function that will give you access to the previous state or just a plaain value
  setBearvalueOrFunctionally: (value: (prev: OneBear[]) => OneBear | OneBear) => void;
}

const useBearStore = create<BearState>()((set) => ({
  bears: [],
  setBear: (value) => set((state) => ({ bears: [...state.bears, value] })),
  setBearFunctionally: (value) => {
    set((state) => {
      return { bears: [...state.bears, value(state.bears)] };
    });
  },
  setBearvalueOrFunctionally: (value) => {
    set((state) => {
      return { bears: [...state.bears, typeof value === "function" ? value(state.bears) : value] };
    });
  },
}));