feat: convert to ts

[vercel[bot]]

Someone is attempting to deploy a commit to a Personal Account owned by @avneesh0612 on Vercel.

@avneesh0612 first needs to authorize it.

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/avneesh0612/voyagger/5HpmTRhovPScY9egvXPohi86TXUT
✅ Preview: https://voyagger-git-fork-krishguptadev-main-avneesh0612.vercel.app

[avneesh0612]

Hey @krishguptadev the build is failing because of this-

[gptkrsh]

@avneesh0612 There are some errors in the index.tsx file. I don't know react much. Can you help?

[avneesh0612]

Hey @krishguptadev I tried out the code and got all issues fixed but still have 1 more issue left there, can you hop on a vscode live share and try to fix it?

[gptkrsh]

Hey @krishguptadev I tried out the code and got all issues fixed but still have 1 more issue left there, can you hop on a vscode live share and try to fix it?

I don't use vscode 😓 Can you either explain me on how to fix this or share me a doc/guide on how to fix this?

[avneesh0612]

umm ok @krishguptadev even I don't know how to fix this issue but I can point you out to the issue- If this issue get's fixed then the build won't fail :)

[avneesh0612]

and just paste this in books/index.tsx for now-

import { motion } from "framer-motion";
import Image from "next/image";
import { useRouter } from "next/router";
import Header from "../../components/Header";
import requests from "../../utils/requests";

interface Booksprops {
  books: any;
  routertitle: any;
}

const Index: React.FC<Booksprops> = ({ books, routertitle }) => {
  const router = useRouter();

  return (
    <div className="w-screen ">
      <Header />
      <div className="flex">
        <motion.div
          initial={{ x: -100 }}
          animate={{ x: 0 }}
          className="flex flex-col ml-3 space-y-5 text-xl text-text"
        >
          {Object.entries(requests).map(([key, { title }]) => (
            <h2
              key={key}
              className={`mr-3 cursor-pointer font-lobster text-text hover:underline ${
                routertitle === title ? "underline" : ""
              }`}
              onClick={() => router.push(`/books/?volume=${key}`)}
            >
              {title}
            </h2>
          ))}
        </motion.div>
        <motion.div
          initial={{ x: 100 }}
          animate={{ x: 0 }}
          className="relative bottom-0 z-20 flex flex-wrap w-1/2 mx-auto text-text"
        >
          {books.items.map((book: any) => (
            <motion.div
              whileHover={{
                scale: [1, 1.1, 1.05],
                zIndex: 1,
                transition: {
                  duration: 1,
                },
              }}
              key={book.id}
              className="flex flex-col m-5"
            >
              {book.volumeInfo.imageLinks?.thumbnail && (
                <a
                  target="_blank"
                  rel="noreferrer"
                  href={book.volumeInfo.previewLink}
                  className="relative w-[150px] h-[225px]"
                >
                  <motion.div className="flex shadow-xl cursor-pointer">
                    <Image
                      layout="fill"
                      objectFit="contain"
                      src={book.volumeInfo.imageLinks?.thumbnail}
                      alt={book.volumeInfo.title}
                    />
                  </motion.div>
                </a>
              )}
              <h2 className="w-[150px] font-Poppins  cursor-pointer text-text text-center text-lg">
                {book?.volumeInfo.title.slice(0, 25)}{" "}
                {book?.volumeInfo.title.length > 25 ? "..." : ""}
              </h2>
              <h2 className="w-[150px] font-extrabold font-lobster cursor-pointer text-text text-center text-lg">
                {book?.volumeInfo.authors}{" "}
              </h2>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </div>
  );
};

export default Index;

export async function getServerSideProps(context: any) {
  let volume = context.query.volume;

  if (!volume) {
    volume = "fetchFiction";
  }

  const routertitle = requests[volume].title;

  const URL = `https://www.googleapis.com/books/v1${requests[volume]?.url}&maxResults=20`;

  const request = await fetch(URL).then((res) => res.json());

  return {
    props: {
      books: request,
      volume,
      routertitle,
    },
  };
}

[avneesh0612]

@krishguptadev can u delete the worker folder?

[avneesh0612]

Thanks for contributing to voyagger @krishguptadev . I am merging this PR now :)