gistfile1.tsx

"use client";

import React, { useEffect, useState } from "react";
import { Skeleton } from "@/components/ui/skeleton";
import axios from "axios";

const Offerings = ({ user }) => {
  const [limits, setLimits] = useState<any>({});
  const [offeringsElem, setOfferingsElem] = useState([]);

  useEffect(() => {
    setLimits(user.limits);
  }, [user]);

  useEffect(() => {
    async function getAppSumoLimits() {
      const res = await axios.get(
        `https://appsumo.codemate.ai/user?email=${user.email}`
      );
      setLimits(res.data.limits);
    }

    if (!limits) getAppSumoLimits();
  }, [user]);

  useEffect(() => {
    if (limits)
      setOfferingsElem([
        <li>{`${
          limits.internet_search == -1 ? "Unlimited" : limits.internet_search
        } Internet Searches`}</li>,
        <li>{`Add ${
          limits.knowledge_base == -1 ? "Unlimited" : limits.knowledge_base
        } Knowledege Bases`}</li>,
        <li>{`${limits.tokens} Tokens per month`}</li>,
        <li>{`${limits.storage} Storage(MB) Space`}</li>,
        <li>Bring your own keys is available.</li>,
      ]);
  }, [limits]);

  return (
    <div className="offerings flex flex-col gap-y-3">
      <div className="text-xl text-[#475463] font-medium dark:text-gray-400">Plan Features</div>
      <div className="flex flex-col px-8 gap-y-3 border-[1px] border-[#68737f] dark:border-[#CED4DA] !bg-gradient-to-r from-slate-50 to-neutral-200 dark:from-[#232526] dark:to-[#414345] p-5 items-start rounded-md dark:text-[#E9ECEF] dark:opacity-75">
        {!limits
          ? [1, 2, 3].map((el) => (
              <div key={el} className="flex flex-col items-center">
                <Skeleton className="h-6 w-6" />
                <Skeleton className="h-6 w-24 mt-2" />
                <Skeleton className="h-4 w-12 mt-2" />
              </div>
            ))
          : offeringsElem}
      </div>
    </div>
  );
};

export default Offerings;